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
This one is a problem that convert a pleasant newbie css trip into a nightmare!
The fact that you started this blog with this handy advice makes me think that this is gonna be an excelent reference blog for my own work!
Congrats, and will wait for more excellent articles!
PS: A complete reference on hasLayout problem can be found in http://www.satzansatz.de/cssd/onhavinglayout.html
I think I’ll be using this advice tomorrow at work.
Long live the pidgeon!
(P.S.: When I click on the empty part of the comment box it clears the text I have written. Please fix it.)
I added the labels to avoid future problems.
Thank you little pidgin :p
This is still happening for me in Safari 4. When focusing on the “comment message” textarea, its contents are cleared.
I try to avoid CSS hacks as much as possible but I know that this trick will be helpful in the future. Thanks for sharing.
Raymond, is it really possible to avoid using hacks or conditional comments in IE? If it means a few lines I use hacks, if is a heavy duty I prefer to use conditional comments and another stylesheet for IE.
Good Fix
Great tip – a definitely subscribing! Looking forward to more great CSS advice.
I normally use overflow:auto for all browsers and for IE I specify the width.
I find that adding zoom: 1; to a conditional stylesheet does the trick too.
It does mishoo, but the zoom:1; property is not W3C valid
i sincerely feel IE should be wiped off the internet and surely most of the problems will be solved
zoom:1 is what I do and I don’t care about valid css because I don’t think it really matters.
Recently i’ve been thinking whether * {zoom:1} would be a performance issue for IE. Perhaps anyone has some info on the topic?
Thank you for the nice tip in minimizing IE development woes. Correct me if I am wrong but couldn’t you do ” li {display: inline; margin-right:10px; } “. That should create non block style behavior without having to use the float property.
Damn, that sound’s so easy if you think about it.
Thanks!! I was having the IE issue of hidden elements that appear magically when you select the area or scroll. I thought I needed a pair of glasses..Thanks for the tip!!
The form problem fixed. An old JS was lurking around…