A New Way to Trigger hasLayout on Elements in Older Versions of IE?

on | 4 Comments

A New Way to Trigger hasLayout on Elements in Older Versions of IE?I’ll be the first to admit that I haven’t given this too much thought, so I admit there could be some drawbacks I haven’t considered, but I thought I’d throw the idea out there and see what my readers think.

Suppose we have an element that, for design and flexibility purposes, has no set width, and no set height. But obviously it has content, so in most browsers it expands to hold its content. We want that element to have a linear gradient background using CSS3, and we add a Microsoft proprietary filter to cover all versions of IE.

Here’s the element, demoed live on the page, with the aforementioned characteristics:

I can haz layout. I can haz layout. I can haz layout. I can haz layout. I can haz layout. I can haz layout. I can haz layout. I can haz layout. I can haz layout. I can haz layout. I can haz layout. I can haz layout. I can haz layout. I can haz layout. I can haz layout. I can haz layout. I can haz layout. I can haz layout. I can haz layout. I can haz layout. I can haz layout. I can haz layout. I can haz layout. I can haz layout. I can haz layout. I can haz layout.

In every browser except IE6 and IE7, the above box should appear just fine with its gradient background. In IE6 and IE7, it looks like this:

The box without a background in IE6 and IE7
Background missing in IE6/7

You can see this happen if you view the page in IE9 and change the Document Mode to “IE7 Standards” in IE9′s developer bar.

The problem occurs because, according to IE6 and IE7′s weird rendering engines, the element does not “have layout” . One of the most common ways to quickly fix this issue in the problematic versions of IE is to use zoom: 1. But there are other ways to give an element layout. SitePoint’s reference lists a number of the CSS properties that will give layout to an element in those browsers. Most of them are undesirable because they change the way the element behaves (for example, you could float the element, position it absolutely, etc.).

Then there’s the aforementioned “zoom” property and something called writing-mode. Both of those were originally IE-only proprietary properties. writing-mode is now part of the CSS3 spec, but the values that IE6 and IE7 understood are now deprecated. So between those two, the only option is zoom.

A New Solution: min-height

Due to the fact that IE6 usage has now dropped below 5%, many developers are now only really concerned with IE7. In that case, you can simply add a min-height value, and IE7 will fix the problem. I think min-height: 1% is reasonable.

If you need IE6 usage, then just do this:

#haz-layout {
	/* CSS3 gradients and MS filters go here... */
	height: 1%;
	min-height: 1%;
}

IE6 treats the height property somewhat like min-height, so that will give the element layout in both IE6 and IE7, and the box will still have the same flexibility without constraining its dimensions.

This might not be “new” to some people. But I honestly have never seen anyone use this as a customary method of given elements layout in IE6 and IE7.

Drawbacks? Of course!

The main drawback to this is that if you use height or min-height in this way, then you can’t use overflow: hidden or overflow: auto, because that will clip content or add scrollbars.

The other drawback? Well, it’s one more line of code than is needed when you use zoom and it still doesn’t really satisfy the purists because you’re using the proprietary filter anyhow, so what’s the big deal in using the proprietary zoom property?

Any Point Using it?

Honestly? Probably not. As mentioned, if you’re using IE proprietary filters, then you might as well use “zoom”, because they’re both invalid. But if it makes you feel better to use min-height, then consider it as another option–but keep in mind the clipping possibilities if you happen to add “overflow: hidden” or “overflow: auto”.

Advertise Here

4 Responses

  1. #haz-layout { min-height: 0; }
    works also, no need for 1% or “height”

  2. To be true I have never had any problem with setting height: 1% for the IEs. So I don’t know why I should use min-height: 1% or even zoom: 1. And in really tough cases I move this property to the conditional comment of IE6.

  3. Pete:

    The other classic way to trigger hasLayout – if you can’t relatively position an element, for whatever reason – is to give it a height.
    Doesn’t matter what height. Any height will do. I go for either 1% or 100%, but that’ll give it layout, and make it behave. I’ve had lots of “exciting” bugs with background-images on list-items because of IE6′s “layout” property.

    As you note, the concept of “layout” remains in IE7, despite their tidy-up of browser bugs, so it’s still a useful thing to be able to trigger.

Leave a Reply

Comment Rules: Please use a real name or alias. Keywords are not allowed in the "name" field. If you use keywords, your comment will be deleted, or your name will be replaced with the alias from your email address. No foul language, please. Thank you for cooperating.

Instructions for code snippets: Wrap inline code in <code> tags; wrap blocks of code in <pre> and <code> tags. When you want your HTML to display on the page in a code snippet inside of <code> tags, make sure you use &lt; and &gt; instead of < and >, otherwise your code will be eaten by pink unicorns.