CSS DIV Width Gecko VS IE

10px table is 12px in Gecko

[JAB Creations]

I am having a wonderfully hellish time trying to figure out why Gecko keeps adding 2 extra pixels to a DIV when I specify the DIV to be 10px. Opera and IE don't do this.

With a 10px DIV with a 1px border...8px should be inside of the DIV and not part of the border. No other tags or code are involved...

How do I make the DIV exactly 10px in all three browsers?

[mincklerstraat]

I believe some versions of Opera have followed IE's box model (meaning non-standards compliant), so this might be the problem. Meaning: according to the standard, the div total width is the stated width plus margin plus borders. So ie gets it wrong, and opera in some versions follows ie (tsk tsk). One thing you can already do is set margin to 0. Set your general stylesheet to make your div 8px wide, but add an ie stylesheet w/ ie conditional comments to get it right for ie (probably with 10px, just guessing here).

Google 'tantek box model hack' to find more info on this problem. I just design for firefox, which in general is the most standards-compliant, insert a stylesheet for ie with conditional comments, and let opera be slightly different (apple browser uses KHTML and is usually more standards compliant too, like firefox).

[Robin_reala]

It's also worth noting that IE6 in standards compliant mode follows the proper w3c box model.

[createErrorMsg]

You can also use the Star Hack to fix the IE box model. It's shorter and you don't have to remember all that voice-family: gibberish. Just put the compliant width value in the normal rule declaration, then AFTER it in the stylesheet...

* html YOURSELECTOR {
width: IE5.x WIDTH VALUE;
w\idth: ORIGINAL COMPLIANT WIDTH VALUE;
}

The first width gives IE the width for it's broken box model. The second width with the escape backslash feeds the proper width back to IE6 in Standards mode.