Hi all,
my CSS layout is going great apart from one thing.
I have a main container for 3 divs which us floats to lay them out correctly. My 3 divs do not have any background colours or background images of their own. The main container does have a background image. Why isn’t it showing through on FIREFOX but is working ok on IE?! Grr!! Please help…
MY CSS STYLE
div#siteWrap {
padding: 0px;
height: 43px;
width: 700px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
background-color: #FFFFFF;
}
div#header {
margin: 0px;
padding: 0px;
height: 46px;
width: 700px;
}
div#mainWrapper {
margin: 0px;
padding: 0px;
width: 700px;
background: url("body_bg.gif") repeat-y left top;
}
div#mainContent {
margin: 0px 3px 0px 0px;
padding: 0px;
width: 354px;
float: left;
font-family: "Trebuchet MS", Arial, Verdana;
font-size: 0.7em;
line-height: 1.8em;
color: #000000;
}
div#mainImage {
margin: 0px;
padding: 0px;
width: 140px;
float: left;
}
div#mainNavigation {
width: 200px;
margin: 0px 0px 0px 3px;
padding: 0px;
float: right;
}
MY HTML MARKUP
<div id="siteWrap">
<div id="header">my header</div>
<div id="mainWrapper">
<div id="mainContent">
<p>content blah blah blah</p>
</div>
<div id="mainImage">
<p>my image</p>
</div>
<div id="mainNavigation">
<p>navigation</p>
</div>
</div>
</div>
See attached body background image. Thanks