Friday, November 14, 2008

Cross browser min-height (IE6 and others)

IE6 ignores CSS 'min-height' property. Fortunately it works with 'height' property exactly like other modern browsers with 'min-height'. That's why there is a possibility to write cross browser CSS, here it is:

min-height: 100px;
height: auto !important;
height: 100px;
Three lines instead of one, but it works excellent in all major browsers including IE6. Modern browsers accept 'min-height', then second line set 'height' to be automatic because there is !important keyword, which makes third line ignored. Now IE6: it ignores first line, then make height automatic but due to IE6 bug it also ignores !important keyword. That's why third line overwrites automatic height property and IE6 shows desired result.

This technique is actually well known by many web developers and very effective as you see. So I hope this help someone to save valuable time, and it's worth to place this post as part of blog knowledge base.