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
