Web Design Forums

stevendl · 28-03-2008, 04:36

Trying to get an xhtml compliant site with a background that behaves the same in all browsers

Here's the thing: the fixed size content div is always centered in the browser window and the full screen background image of the browser window has shadow that should center behind the content div so it appears as if it's the shadow of the centered div. Makes sense?

It works fine in Safari but the background messes up in Firefox.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "...">
<html xmlns="...">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>title</title>
<link href="style/style.css" rel="stylesheet" type="text/css" />
<script type="text/JavaScript">
</head>
<body>
<div id="center">
test
</div>
</body>

Here's the css:
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
background-color: #573A31;
background-image: url(..);
background-repeat: repeat;
background-position: center;
text-align: center;
}

#main {
position: relative;
width: 100%;
height: 100%;
background-color: #00CC00;
}

#center {
position: absolute;
margin: -265px auto auto -470px;
height: 530px;
width: 940px;
top: 50%;
left: 50%;
background-color: #000;
}

Here are some images:
background image that should center
www dot tank-one.com/back_test01.jpg

the red line in the next one shows where the content div comes
www dot tank-one.com/back_shape01.jpg

and this is what it should look like (everything always centered regardless of the window size)
www dot tank-one.com/back_site01.jpg

I tried with and without adding the 'main' div but no difference either.
When you drag and change the window size, the background image behaves differently in Safari vs. Firefox. Safari keeps taking the new window center (50% 50%) as reference for the background, Firefox keep the reference in the top left corner (0,0)
Any ideas? (I know it works with tables and without doc type but that's what were not looking for

Ryan Downie · 30-03-2008, 15:06

Change the html to:

Code:


<div id="wrapper">
		<p>content here</p>
	</div>

And then use this code to center your design horizontally. You need to play around with the height settings as this is all Dependant on what you need. Perfect vertical centering is a lot more complicated.

Code:


* { margin:0; padding:0; }

body { 
	background: #573A31 url(image.gif) repeat-x; /*add your image here*/ 
	text-align:center;
	}
	
#wrapper {
		margin: 0pt auto; /*Change 0pt to something that will work. */
		text-align:left;  /*Aligns text back to left */
		border:2px solid green; /* Demostartion only remove this */
		width:600px; /*change this to your width */
                }

28-03-2008, 04:36	#1 (permalink)
stevendl Registered User Join Date: Mar 2008 Posts: 1	css background center crossbrowser issue Trying to get an xhtml compliant site with a background that behaves the same in all browsers Here's the thing: the fixed size content div is always centered in the browser window and the full screen background image of the browser window has shadow that should center behind the content div so it appears as if it's the shadow of the centered div. Makes sense? It works fine in Safari but the background messes up in Firefox. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "..."> <html xmlns="..."> <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" /> <title>title</title> <link href="style/style.css" rel="stylesheet" type="text/css" /> <script type="text/JavaScript"> </head> <body> <div id="center"> test </div> </body> Here's the css: body { margin-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; background-color: #573A31; background-image: url(..); background-repeat: repeat; background-position: center; text-align: center; } #main { position: relative; width: 100%; height: 100%; background-color: #00CC00; } #center { position: absolute; margin: -265px auto auto -470px; height: 530px; width: 940px; top: 50%; left: 50%; background-color: #000; } Here are some images: background image that should center www dot tank-one.com/back_test01.jpg the red line in the next one shows where the content div comes www dot tank-one.com/back_shape01.jpg and this is what it should look like (everything always centered regardless of the window size) www dot tank-one.com/back_site01.jpg I tried with and without adding the 'main' div but no difference either. When you drag and change the window size, the background image behaves differently in Safari vs. Firefox. Safari keeps taking the new window center (50% 50%) as reference for the background, Firefox keep the reference in the top left corner (0,0) Any ideas? (I know it works with tables and without doc type but that's what were not looking for

Thread Tools	Search this Thread
Show Printable Version Email this Page	Search this Thread: Advanced Search

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)