[mk2phil]

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?

[mk2phil]

Fixed it, missing doctype!

[skyrocket]

Glad you fixed it. I was thinking straight away when I read it "quirks mode". Classic example of working to web standards ...