Set width of box with borders

Differences between IE and Mozilla borders

[Perfect Member Name]

I'm trying to define a box that has a width of 145 pixels. There is a 1 pixel border on the box. I want the box and its border to be 145 pixels wide.

In IE, I'm able to set width: 145px; border: 1px solid #000000; and I get exactly what I'm looking for. However, Mozilla/Firefox render the inside area as 145 pixels wide and adds the borders to the outside of it, creating a box with borders that is 147 pixels wide.

Is there any way to get what I'm looking for without doing browser detection and altering the width?

Thanks!

[Perfect Member Name]

I came across an article on the Tan box model hack which has solved my problem:

[positioniseverything.net...]

[kaled]

This is an issue of quirks mode (IE mistakes) verses standards mode. According to CSS standards, width & height define the size of the drawing canvas, however, IE implemented this incorrectly.

You may be able to get around this by placing one div in another and setting the border and padding of the outer div to 0px. Setting the width of the inner div to 100% might then work - maybe (I've been thinking about trying this).

Changing the DOCTYPE will affect this - IE 6 behaves correctly with DIVs in standards mode (I think) but frames are another story.

I try very hard to avoid these issues altogether.

Kaled.

[createErrorMsg]

The Tan hack, the Tantek Box Model Hack, the Underscore hack, and the nested boxes solution mentioned by kaled are all ways to fix IE's quirky box model issues. Of those listed above, ony the Nested boxes solution doesn't exploit bugs to deliver an IE/Quirks friendly width value. All the other 'hack' solutions deliver one value to complint browsers and another to IE5.x and 6/Quirks.

Which one you use is a matter of personal preference. Some designers prefer not to use hacks in their CSS. Others don't like adding extra <div>s (which nested boxes requires) to their source code. Some require that the CSS validates (the Underscore hack, for instance, will not; Tan and Tantek will).

Personally, I've always used the Tan Hack, but I'm in the process of switching over to using IE Conditionals to deliver the necessary IE browsers an entirely different stylesheet. Again, it's all a matter of preference.