Is there an issue with the box model in IE6. only I've created a div 700px wide, which sits under a header which is again 700px.
#header {
height:50px;
width:700px;
background:url("/images/pfs/header.gif") no-repeat top left; }
#mainbody {
text-align:left;
background-color:#e6f2fe;
border-left:2px #036 solid;
border-right:2px #036 solid;
border-bottom:2px #036 solid;
border-top:1px #036 solid;
padding:10px;
width:700px; }
When I view them in IE all is well, but in Firefox the padding pushes it out past the header at the top. Now I know that FF is displaying correctly (700 + 24 = 724px), but I thought the box model wasn't an issue with IE6, but IE 5.5 and below?
In an attempt to fix this, assuming the box model hack might work (although I thought IE6 didn't need it) I have added the following:
#mainbody {
text-align:left;
background-color:#e6f2fe;
border-left:2px #036 solid;
border-right:2px #036 solid;
border-bottom:2px #036 solid;
border-top:1px #036 solid;
padding:10px;
width:700px;
voice-family: "\"}\"";
voice-family:inherit;
width:676px;
}
Now Firefox is spot on, but both IE and Opera are SMALLER than 700px (676px I'd imagine)? I dont understand this.
I thought this rule was supposed to fix this?
Can anyone help?