After some time battling with Internet Explorer 6 & 7, I discovered that most of it’s rendering problems are produced when using floats, because the hasLayout variable gets messed up.
Internet Explorer browser has a built-in variable called hasLayout, that allows the browser to ‘construct’ the elements in the page, interact with other elements, etc. When this variable is set to true, the content displays fine, but when it doesn’t our site gets pretty jammed.
Ignore the technicalities. Let’s go to the practical stage…
There are many ways to clear floats.
The most useful one, without adding any ‘non-semantic’ markup is the following:
ul {overflow:hidden;}
li {float:left; margin-right:10px;}
This property is assigned to the parent element that will wrap around the floating ones.
It’s works like a charm in Firefox, Opera, Safari and Chrome and in IE in some cases too (many in IE7, nearly none in IE6...)
To fix this for IE you just have to add one line on your css.
IE6
* html ul {height:1%;}
IE7
*+ html ul {min-height:1%;}
Another case where this hack is useful
When elements misteriously ‘dissapear’ from a page in IE, and you select them with the mouse by dragging it (as if you were selecting text) and suddenly provoke a magical reappearing, is another great case to use this hack.
This simple tip will reduce your IE headache, try it, it saved me a nice amount of pills :p
