Forum Moderators: not2easy
I've posted the important css below. I'm not sure where the error is.
The problem layer is #main. The content within the #main layer is left justified in Fire Fox.
This is basically how my page is laid out:
<body>
<div id="wrapper">
<div id="topHead">
</div>
<div id="main">
left justified stuff...
</div>
<div id="footer">
</div>
<div>
<body>
This is my css:
html{
margin:auto;
background-image:url(../images/homepageGrad.png);
background-position:top;
background-repeat:repeat-x;
background-attach:fixed;
background-color:#26323A;
height:100%;
}
body{
margin:auto;
background-image:url(../images/homepage_bg2.png);
background-position:top;
background-repeat:no-repeat;
background-attach:fixed;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
color:#FFFFFF;
height:100%;
}
#wrapper{
margin:auto;
padding-top:50px;
width:778px;
text-align: center;
}
#topHead{
width:778px;
background-image:url(../images/topSlice.png);
background-position:bottom;
background-repeat:no-repeat;
background-attach:fixed;
padding-bottom:5px;
text-align:left;
}
#main{
width:778px;
background-image:url(../images/middleSlice.png);
background-repeat:repeat-y;
align: center;
text-align: center;
margin:auto;
}
#footer{
width:778px;
height:50px;
background-image:url(../images/footSlice.png);
background-position:top;
background-repeat:no-repeat;
background-attach:fixed;
text-align:left;
}
Thanks for looking at this! I appreciate any help or suggestions.
In the provided HTML code:
The closing </div> and and </body> tags are declared as opening tags - not closing.
The CSS does not validate:
14 html Property background-attach doesn't exist : fixed
24 body Property background-attach doesn't exist : fixed
43 #topHead Property background-attach doesn't exist : fixed
52 #main Property align doesn't exist : center
63 #footer Property background-attach doesn't exist : fixed
It's not often that one sees html and body marked up this way. Not saying that you can't split them up like this. Just not usual.
Using an XHTML Strict DTD I am seeing identical rendering in Firefox, Opera, IE. "left centered stuff..." is centered in all three.
W3c - Background [stu.w3.org] - Given the other declarations, don't know that you need to use background-attachment: anyway.?
