The design can be seen working here - http://beta1.oconnorhrpartner.com/test.php
Look at the above design in IE, then Firefox...see the difference?
In IE, everything currently looks as it should, but in Firefox, the yellow menu doesn't expand down to fill that gap.
My html
Code: Select all
<div class="outer">
<div class="container">
<div class="menu"><?php require("menu.php"); ?></div>
<div class="header"><div class="headerLogo"><img src="/imgs/logo.jpg" width="161" height="60" alt="O'Connor HR Partner" /></div></div>
<div class="contentArea">
<p>Some content here</p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
</div>
<div class="clearer"> </div>
</div>
<div class="footer"><div class="leftFooter">Left</div><div class="rightFooter"><?php require("footer.php"); ?></div></div>
</div>Code: Select all
/* CSS Document */
body
{
background-color:#ffffff;
margin-left: 0px;
margin-top: 10px;
margin-right: 0px;
margin-bottom: 10px;
background-image: url(/imgs/bg.gif);
}
/*//////////////////////////////////////////*/
/* STYLES RELATING TO THE LAYOU OF THE SITE */
/*//////////////////////////////////////////*/
/* Used to centre the site in the browser */
.outer { text-align: center;}
.container { position: relative; text-align: left; margin: auto; padding:0 9px 0 0; width: 768px; background-color:#FFFFFF; background-image:url(/imgs/shadow.gif); background-position:right; background-repeat:repeat-y; }
.menu { position: relative; width:205px; background-color:#e3ae2b; height:100%; float:left; clear:right;}
.header { position: relative; width:563px; height:60px; background-color:#000000; float:right;
background-color:#000; background-image:url(/imgs/arrBlack.gif);
background-position:left; background-repeat:no-repeat; }
.headerLogo { float:right; }
.contentArea { position: relative; float:right; clear:right; width:543px; background-color:#FFFFFF; padding:10px; }
/* little hack to make float containers expand around the float */
div.clearer {clear: left; line-height: 0; height: 0; }
/* footer */
.footer { padding:0 9px 0 0; margin: auto; text-align: left; height:83px; clear:right; width: 768px; background-image:url(/imgs/shadow.gif); background-position:right; background-repeat:repeat-y; }
.leftFooter { float:left; width:205px; height:80px; background-color:#969696; border-top:medium solid #585858; }
.rightFooter { float:right; width:563px; height:80px; background-color:#d1d1d1; border-top:medium solid #b2b2b2; }Thanks
Mark