CSS: IE6 Help

after fighting with IE6 on a number of projects, I’ve come up with a short list of tweaks that can make a layout behave in IE6…

Problem #1: floats seem to have duplicated text below the float.

Solution 1: http://www.positioniseverything.net/explorer/dup-characters.html

Solution 2: use/play with the display property

Problem #2: IE6 doubles up the margin on the first element in a set of floated elements

Solution: Add display: inline to the first float

http://www.positioniseverything.net/explorer/floatIndent.html (go to the end)

Problem #3: Layout wraps columns, even when everything is supposed to fit

Solution: specify width and set overflow: none on all columns; this keeps potentially offending elements inside the floats from “breaking out” and thus breaking the layout

Lastly, I will reiterate a point I have made before: when/where possible, stay away from padding (especially left/right).


http://www.maratz.com/blog/archives/2005/06/16/essentials-of-css-hacking-for-internet-explorer/