hasLayout, Will Travel

What is the hasLayout hack?

IE has some problems. It doesn’t rendering some objects correctly, especially when floats are involved. Before I knew about the nature of this problem I would set position:relative; on the bugged objects and that sually fixed things.

Research by others has turned up this page about the hasLayout property, which is an attribute assigned to objects in a web page.

It appears that by triggering this property to be set to true resolves many rendering issues with IE.

position:relative; is one way to trigger this property. But there are instances where you can’t use this property on certain objects in your layout. Another approach is to set the width or height property. I would use a height:100% to fix a text-jog bug in IE that occurs when you have a float and non-floating element next to each other. One trick that I was shown that I now use quite often is to set the height to 0.01%. IE will automatically grow the element to whatever height is needed to contain it’s children, effectively making this bit of CSS meaningless, except that it triggers the hasLayout property. Now with this approach, you also have to keep that CSS from being applied any anything other than IE. So we use an IE-only CSS selector to keep it within IE. We can then take it one step further with a comment hack to keep IE/Mac from applying the CSS as well. The result is what is probably the most common, easiest approach to the hasLayout hack that is out there:

* html .hasLayoutHack
{
    /* \*/ height: 0.01%; /* hasLayout Hack */
}

There you go.

Why 0.01%? Why not 1%? That’s because if this value is larger than the contents of the object this is applied to, it will take the defined height, meaning it’ll be taller than intended. I’ve come across this before when being used on a very very very long webpage.

What about using 1px instead of a percent value?

An excelent question, for which I have no answer. I think it was just a force of habit. Using 1px should work fine. In fact, unless you find a bug using pixels, I’d say go right ahead and use 1px. And if I remember why I stick with percents on this hack, or if there’s no real reason for this, I’ll be sure to leet everyone know.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s