Home | Resumé | Blog | Search Blog

<< Next Blog | print | Previous Blog >>

Internet Explorer hasLayout Inline Style Bug

In the process of working on a site the other day, I encountered a bug with IE. It seems that child elements inherit the layout of their parents. Unfortunately this also means the "block element"-ness of their parent.

Block-element means that it takes up the entire vertical space in which it is located. Subsequent markup must appear below the element. It can not appear in the same space, unless positioned absolutely. Examples of block elements are <p>, <div>, <ul>, etc... Inline elements are elements that allow subsequent markup to appear on the same line as the inline markup. Examples of inline elements are <a>, <span>, <em>, <i>, <b>, etc...

The problem I was having was that I had a <p> element with a floated image tag and the clear attribute, along with text content, and an <em> inside the <p>. The <em> was appearing as a block element, it was wrapping by itself on its own line, with the subsequent text appearing centered and to the right of the box of italic text.

After searching msdn, I found a bug reported with a workaround of using zoom:0 to force the child element to obtain hasLayout. I had no idea what hasLayout meant, but apparently Microsoft, in IE 6 and IE 7, have an attribute that denotes which element is responsible for its layout. If it is a parent element, the read-only attribute will be -1, meaning that it is inheriting its parent's style. If the attribute is set to anything else, it is controlling its own style.

An <em> element should never inherit its display attribute from any other element, especially a <p> element. A co-worker and I both tried applying the zoom:0 attribute from the stylesheet, but that didn't work. After playing around with the IE Developer Toolbar for a while, I noticed that when I applied the zoom:0 attribute there, directly to the element, it worked. But it added the dreaded !important modifier to the CSS.

To fix it, I removed the <em>, because I hate HTML 4 in XHTML 1.0 Strict because it doesn't validate. I changed it to <span style="text-style: italic, zoom: 0!important">. That fixed the problem. I don't like being forced to use inline styles, but I didn't find anything else that worked.

IE 6, when released was an amazingly advanced browser, but because no one embraced the new technologies Microsoft was building in, they got lazy, and now we are stuck with bugs like this. Hopefully IE 8 will eliminate hasLayout, but I'm not going to hold my breath.