I’ve been excessively frustrated with IE6 for a long time now and despite my growing anger I’m still forced to work with this terrible software day in and day out. Yesterday I was working for about 6 hours on IE6 fixes and I came across a quite handy hack.
You have a <div> wrapped around 3 elements that are all floated left like so:
Given the above scenario in any browser the wrapper div (#wrapper) would not assume any height. In more recent browsers the fix for this scenario would involve a choice of two approaches:
- Adding an element after #C that has
- Adding to #wrapper
Although the first approach is 100% reliable I hate the additional markup. I find that when I addin one place it ends up all over my site. So I always use the second approach, . It allows for clean markup which doesn’t clutter your editing experience and it shifts the responsibility of the visual layout to the CSS.
Well to not surprise the user ofdoesn’t have this affect in IE6 and it doesn’t work with or . You can’t set a min height (at least not a reliable one) and will also always display a heightless #wrapper.
The solution, set the height (in IE6 only) to 100% and set the overflow to hidden like so.
Thanks for reading
- * Ironically enough if you view this website in IE6 you will get a “slightly insulting” error message telling you to upgrade your browser. For more details visit https://damienhowley.wordpress.com/2009/02/27/my-ie6-revolt/