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:
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:
/* CSS3 gradients and MS filters go here... */
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”.
Leave a Reply
Comment Rules: Please use a real name or alias. Keywords are not allowed in the "name" field and deep URLs are not allowed in the "Website" field. If you use keywords or deep URLs, your comment or URL will be removed. No foul language, please. Thank you for cooperating.
Markdown in use! Use `backticks` for inline code snippets and triple backticks at start and end for code blocks. You can also indent a code block four spaces. And no need to escape HTML, just type it correctly but make sure it's inside code delimeters (backticks or triple backticks).