Anne van Kesteren

Internet Explorer’s width and height issues

Although in many cases height and width just work in Internet Explorer they are not really the same as the ones described in the CSS2.1 specification. A common bug filed against non-IE browsers is that they do not allow width or height to be applied on an inline-level A or SPAN element. IE actually does do that and makes the element an inline-block (or at least, that is how it looks, how it really works is probably something you wouldn’t want to know). That doesn’t work the other way around, a block-level element can not became an inline-block. (Note that by block-level I mean an element with display:block applied to it, not the HTML4 definition of block-level elements.)

This is quite a nice feature of Internet Explorer, except that it shouldn’t work. If IE7 doesn’t implement display:inline-block and keeps this behavior we are probably happy. As when Mozilla and Opera finally implement display:inline-block we can use it in a way that is compatible with Internet Explorer. Note that there is an implication here, that being backwards compatible for non-IE browsers is not really a must have. Note also that I mentioned that Opera should support display:inline-block as well. And although Opera does have some support for it, it is buggy and therefore it should support it.

Let’s get back to the height and width attributes. The behavior Internet Explorer attaches to these properties is really interesting and most of the times it is similar to min-width and min-width as defined by CSS2.1. (This does indeed make all the screaming for support of these properties a bit dubious and it is. What we “should” want is support for height and width and perhaps for max-height and max-width. (And let the current height and width properties be renamed to min-height and min-width plus perhaps some additional fix up of these properties.)

You could also compare it to tables, where height and width actually do have a different meaning and there min- and max- variants generally don’t apply. A simple example to explain the behavoir might be helpful. I once saw the following code in bug report against Mozilla:

p{ height:20px; background:lime }

… most people seem to expect that when there is enough text in the P element to make it higher than 20px the height of the P element should stretch. While in fact, the P element should generate overflow of which the initial value is visible. Only the height:20px and perhaps some padding that was there by default should get a green background. The area that generated the overflow however, should not.

It is of course a pity that IE doesn’t support these properties properly. It is also a pity that they don’t support the min- and max- variants of course, but those are just an unimplemented feature. (Every browser has those.) However, if IE didn’t implement height and width as they did now, other browsers would probably have less useless bugs filed against them, but CSS layouts would have been quite limited.

Comments

  1. In fact, when strict mode is enforced by a strict doctype, IE does not automatically add display: inline-block to inline elements. You then need to specify display: inline-block on your own to get the quirks mode equivalent.

    It also starts to respect the min-height and min-width properties but only when these are applied to table cells, rows, columns or whole tables.

    Posted by Patrys at

  2. I also forgot to add that in strict mode it starts to treat width and height the right way (rather then substracting padding from them before displaying).

    Posted by Patrys at

  3. Note that Opera 7 mimics MSIE in Quirks mode by setting inline elements to inline-block when a style applies width and/or height to them.

    Also note that Opera 8 will probably drop this specific Quirks mode feature, because we found that MSIE does not do it exactly this way, and Opera's handling caused problems in a few places.

    Posted by Rijk at

  4. "Most people seem to expect that when there is enough text in the P element to make it higher than 20px the height of the P element should stretch. While in fact, the P element should generate overflow of which the initial value is visible. Only the height:20px and perhaps some padding that was there by default should get a green background. The area that generated the overflow however, should not."

    Isn't this impractical? Shouldn't the overflow also be lime, because that would look best? Shouldn't standards be less about technicalities and more about practicalities for everyday use?

    Posted by Chris Hester at

  5. Perhaps for that use case, but I have encountered some cases where this is not desired. And furthermore, standards provide min-height which is exactly what you really meant to be using.

    Posted by Anne at