Spudhead
06-28-2007, 05:41 PM
<style type="text/css">
body{
font-family:Arial, Helvetica, sans-serif;
background-color:#95d3ff;
}
#container{
width:812px;
margin:20px auto;
}
#dropshadow{
width:812px;
background:url(img/content_shadow_bg.gif) top repeat-y;
margin:0; padding:0;
}
#page{
width:779px;
margin:0px 0px 0px 22px;
}
</style>
<body>
<div id="container"><img src="img/content_shadow_top.gif" width="812" height="22" alt="drop shadow" /><div id="dropshadow">
<div id="page">
<img src="img/nav_header.gif" alt="Nav header" width="156" height="205" />
<div><img src="img/banner_468x60.gif" alt="banner" /></div>
</div>
</div><img src="img/content_shadow_bottom.gif" width="812" height="240" alt="drop shadow" /></div>
</body>
Ok, so: that gives me a centered, 812-pixel wide "container" box, with a drop shadow all the way around. Inside that is a 779-pixel wide "page". Into that div, I start chucking elements.
Now, with the code above, the banner element appears immediately below the nav_header image. Which is wrong - I want the banner image to be floated immediately to the right of the nav_header image.
But as soon as I float those two images:
<div id="page">
<img src="img/nav_header.gif" alt="Nav header" width="156" height="205" style="float:left;width:156px;" />
<div style="float:left;width:470px;"><img src="img/banner_468x60.gif" alt="banner" /></div>
</div>
... then although the banner goes where it should, in Firefox 2 the page div loses the bg image (content_shadow_bg.gif - this is a 812px wide, 1px high repeating image with about 20px of fading gradient either side: a drop shadow).
What the...? It's fine in IE6. It passes validation. Why is FF losing the bg image if I float those child elements? Is is a bug? Is it my CSS? How do I fix it??
body{
font-family:Arial, Helvetica, sans-serif;
background-color:#95d3ff;
}
#container{
width:812px;
margin:20px auto;
}
#dropshadow{
width:812px;
background:url(img/content_shadow_bg.gif) top repeat-y;
margin:0; padding:0;
}
#page{
width:779px;
margin:0px 0px 0px 22px;
}
</style>
<body>
<div id="container"><img src="img/content_shadow_top.gif" width="812" height="22" alt="drop shadow" /><div id="dropshadow">
<div id="page">
<img src="img/nav_header.gif" alt="Nav header" width="156" height="205" />
<div><img src="img/banner_468x60.gif" alt="banner" /></div>
</div>
</div><img src="img/content_shadow_bottom.gif" width="812" height="240" alt="drop shadow" /></div>
</body>
Ok, so: that gives me a centered, 812-pixel wide "container" box, with a drop shadow all the way around. Inside that is a 779-pixel wide "page". Into that div, I start chucking elements.
Now, with the code above, the banner element appears immediately below the nav_header image. Which is wrong - I want the banner image to be floated immediately to the right of the nav_header image.
But as soon as I float those two images:
<div id="page">
<img src="img/nav_header.gif" alt="Nav header" width="156" height="205" style="float:left;width:156px;" />
<div style="float:left;width:470px;"><img src="img/banner_468x60.gif" alt="banner" /></div>
</div>
... then although the banner goes where it should, in Firefox 2 the page div loses the bg image (content_shadow_bg.gif - this is a 812px wide, 1px high repeating image with about 20px of fading gradient either side: a drop shadow).
What the...? It's fine in IE6. It passes validation. Why is FF losing the bg image if I float those child elements? Is is a bug? Is it my CSS? How do I fix it??