It is still possible to write valid code that specifically targets IE6 without resorting to traditional hacks or conditional CSS in additional files. For example, minimum heights can be defined using the code:
view plainprint?
1 2 3 4 5 6 7 8 9 10 11 | #element { min-height: 20em; height: auto !important; /* understood by all browsers */ height: 20em; /* IE6 incorrectly uses this value /* } #element { min-height: 20em; height: auto !important; /* understood by all browsers */ height: 20em; /* IE6 incorrectly uses this value /* } |
IE6 does not understand ‘min-height’ and incorrectly overrides the ‘auto’ height with 20em. However, it then increases the dimensions if the content requires more room.
Another option is to use advanced selectors, e.g.
view plainprint?
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | #element { min-height: 20em; height: 20em; } /* ignored by IE6 */ #element[id] { height: auto; } #element { min-height: 20em; height: 20em; } /* ignored by IE6 */ #element[id] { height: auto; } |
September 24th, 2010 at 5:10 pm
this post is very usefull thx!