Box Model Hack Problems

[thebigtymer]

 
#frame {
width:742px;
voice-family: "\"}\"";
voice-family: inherit;
width:740px;
border-style:solid;
border-width:1px;
border-color:#000000;
margin-right:auto;
margin-left:auto;
}
 
html>body #frame {width:740px;}

I want the div to be 742px wide, which is 740px of content and 1px of border on each side.

According to Tantek's hack, this should do it. However, when I run Quirks mode, the div stays 740px wide, including the border. I need those extra 2px, or the layout is out of whack. What am I doing wrong? Help!

[BenANFA]

Remember everything after the voice-family is ignored in quirks mode so with this you shouldn't have a border with your CSS. Try

#frame {
border-style:solid;
border-width:1px;
border-color:#000000;
margin-right:auto;
margin-left:auto;
width:742px;
voice-family: "\"}\"";
voice-family: inherit;
width:740px;
}
 
html>body #frame {width:740px;}

Also note that even in quirks mode IE6 still parses the CSS correctly, the only quirky thing is how it renders it. I suggest not using quirks mode as it appears to be the worst of both worlds.

[Paul O'B]

Hi,

Yes IE6 in quirks mode uses the broken box model but however it does understand the voice family hack (unlike ie5) and then dutifully feeds itself back the wrong dimensions.

So the voice family hack is no good to use in quirks mode.

Paul

[BenANFA]

Although you can still get round it by using extra div's so that you don't have padding and borders on div's with widths.

Still I recon it is easier to add a DOCTYPE and have IE6 work in non-quirks mode.