how to make ie6 behave
As I explained in my previous article on ie6 debugging, it's all about fixing the core of the problem, not about tweaking values to make a design look right. I realize this might sounds a bit vague, so this post will look into some examples where core fixing could save you a lot of time and turn the battle with ie6 into your favor. Buckle up for some good ole ie6 weirdness.
The purpose of this article is to identify ie6 misbehavior and to find solutions that force ie6 to behave like other browsers do. None of these bugs or solutions were identified by myself, for that sites like quirksmode are invaluable.
fix min values
div {min-height:100px;} /* ie6 fix .............................................. */ div {height:100px;} Sometimes applying a min-height or min-width value to an element is a necessary evil. Sadly, ie6 doesn't know how to handle these css properties, so a workaround was needed. Ironically, another ie6 bug was exploited to fix this issue. It suffices to place the same value declared as simple height or width. The behavior of these css properties in ie6 is the same as the min-height and min-width properties in other browsers.
fix floats
div {float:left;} /* ie6 fix .............................................. */ div {display:inline;} Many ie6 bugs are connected to floats, luckily they can be fixed quite easily. Even though floats are supposed to act like block elements, adding a display:inline declaration will make floats behave in ie6 like they're supposed to. And regardless of the display value assigned, they will still act like block elements (ie. accept paddings, margins, widths etc).
fix position:relative
div {position:relative;} /* ie6 fix .............................................. */ div {zoom:1;} The position:relative declaration is probably the most dangerous of css declarations for raising ie6 issues. Depending on how many are nested, they can start acting up and completely mess up your design. And they are sure to mess up the position of your absolutely positioned elements. All of that can be fixed by adding a zoom:1 to each element bearing a position:relative. If you don't know what zoom:1 does or where it comes from, read up on the hasLayout issue here.
The only reservation here is that zoom:1 is best not used on inline elements, as they will start behaving like block elements. It's rare to put a pos:rel on an inline element, but it's better to be alert when applying ie6 fixes.
fix negative margins
div {margin:-0.5em;} /* ie6 fix .............................................. */ div {position:relative; zoom:1;} Negative margins are another thing ie6 doesn't like to handle. To make them work as intended, you need to apply a position:relative declaration to the element bearing the negative margin. Keeping the fix above in mind, you'll also need a zoom:1 to make the pos:rel behave. A solid fix, but with the same reservation as above, keep these declarations away from inline elements just to be sure.
fix overflow hidden
div {overflow:hidden} /* ie6 fix .............................................. */ div {zoom:1;} And yet another zoom fix. I'm not really sure when ie6 starts messing up overflow:hidden declarations, but a zoom:1 is sure to fix all when it starts to go wrong. Again, keep your zoom:1 away from inline elements, though I wonder why you'd want to set an overflow:hidden declaration on an inline element.
is there more?
No doubt there is more. I'm not an expert on ie6 debugging, but for the greater part these are issues that pop up with every project, and getting these fixes in as quickly as possible makes for much easier ie6 debugging afterwards. Whether you create your ie6 css alongside your main css or run through your main css to construct a ie6 css when everything is finished is entirely up to you. But when you make sure all the above is taken care of, ie6 will look like a much nicer browser.