No Mod Required

Here’s it is.

//height for IE6. Thankfully IE6 messes up height in a useful way
height:350px;
//height for everything else. IE6 looks at this and says "wha?"
height:auto;
//min-height for everything else. IE6 is baffled by this.
min-height:350px;

I can’t tell you how many times I’ve used this exact pattern. It actually works really well, it’s just so wrong it bothers me each and every time I type it into a style sheet.

It works because the first height declaration, in pixels, is rendered by Internet Explorer 6 exactly the way the next two rules are rendered by every other browser. Meaning, it starts at 350px and then expands to fill whatever content it contains. Add to that the fact IE6 is baffled by the next two declarations (not understanding auto as a value for height and not supporting min-height in any way, shape or form) and for IE6 height is all you need.

Thing is, every other browser that matters renders the single height declaration (with overflowing content) like this:

Which is where the height:auto and min-height declarations come into play. Add those in and things start acting as expected with the other browsers- the container starts at 350px and expands to fit the overflowing content.

Since there are no “hacks”, the above sheet will validate, I just hate the pattern of declaring height once and then immediately redeclaring it- especially to support a seven year old browser.

So… IE6? Are you listening? Can you please give up the ghost so I can put this pattern to bed?

Pretty please?