2008.11.09 18:29:41
Susan Jackman

A few tips for optimizing your CSS for IE 6

As a web designer it is very tempting to ignore IE 6 issues but unfortunately the user base for the outdated browser is still high.   It is in our best interest as designers and website owners to ensure that our sites work for all users.

Here are a few tips I have compiled for issues I have had when testing for IE 6 and the fixes that worked for me.

Suckerfish Menu’s

Suckerfish menu’s are very popular as a way to do drop down menu’s using CSS.  My IE 6 tip for suckerfish menu’s is to give height and width to the text of the dropdowns.

Doubled Float-Margin Bug

A left float inside a container has a left margin.  In IE 6 that left margin is doubled. This occurs when floated element's margin extends in the same direction as the float and is trapped directly between the float and  the inside edge of the container box. Place {display: inline;} on the floated element  to fix this bug.

IE6 and negative margins

IE 6 will not allow Negative margins to break outside their container but relative positioning will.

Small Height Bug

IE 6 will not collapse to a smaller height than the base font-size and will always render at a size that allows text to fit into the height available. To fix this you can either set the font-size: 0; within the rule or set the rule to overflow: hidden.

  CSS | Tips | IE 6 | Web Development | Test | Susan Jackman

2010.11.16 01:49:12

Thanks for your posting; I really appreciate your ideas. Hope you can keep going.
This is a really great website, and I really like your essay. Thanks for your sharing.
I like it very much, thanks!!!
Thanks for that recommendation; it is really helpful for me to say!