Oct 09, 2006 - 06:24 PM
Take a look at http://www.quirksmode.org for more information on this issue. It's the infamous "box model" that has plagued developers for quite a while. The short answer is: IE does not calculate the height/width the same way that FF does, depending on the "mode" you set for your page interpretation.
Hope the link helps...
Oct 09, 2006 - 07:37 PM
Yes, the "box model". Heard about it, but thought that there was only one standard for it.
Apparently IE used to use an alternative box model, where "width" specifies the total width of the element, including the "padding".
In the "correct" box model, however, "width" is the width of the element without the padding.
In my example:
according to the "correct" box model, the total width of the grey box, that this will display, will be 100 + 2 x 10 px = 120px
Specifying a doctype like
will trigger IE to use the same "correct" box model as FF. That way it is easier to make cross-browser compatible web pages.
Personally, I would have preferred IE old "quirky" box model, so that the "width" is the actual width of the box shown. Then the box would stay the same no matter how I choose to change the padding.
Oct 10, 2006 - 02:04 PM
Your code would look like this
An voila, your page now displays the way you want it to look in both browsers :)
read more about it here if you're interested:
Oct 20, 2006 - 06:14 PM
If I leave out the DOCTYPE, IE displays it exactly the same way as without "inline".
FF however shrinks the box to fit the content (none).
If I keep the DOCTYPE, IE also shrinks the box to fit the content - since it's empty, the box disappears altogether.
So I wouldn't say this solution is very solid, but I do get the point that the width specified includes padding if I use "inline".
Dec 28, 2010 - 07:26 PM