IE6 float margins broken nothing working
Posted on Aug 14, 2009 by
Paul WhiteIf you have ever ran into the problem of having your floated elements
not line up correctly in IE6, and you have already tried all the other
suggestions like display:inline; clear:both; position:relative; I
have a solution, although you may not like it.
No I am not about to tell you to forget about IE6. Last time I checked 30% of my website's visitors still use this old non compliant POS browser. Hopefully once
Windows 7 comes out, people will upgrade their systems, and this will no longer be an issue. But until them developers still need to mak their
websites compatible.
So I was doing what most developers do. Look at the site in IE6. Change my code, Refresh, Look at the site in IE6. Change my code, Refresh, Look at the site in IE6. Change my code, Refresh, Look at the site in IE6. Change my code, Refresh, Look at the site in IE6. Notice coffee cup is empty, refill coffee cup. Return to desk. Those of you who would rather see this in logic.
While ( site looks like crap in IE6 ){
Change Code
Refresh Brower
IF( out of coffee ){
Refill coffee cup
}
IF( bladder full ){
Take a piss
}
}
Notice how in this code snippet I could potentially go for days without sleep or food ( very realistic )
Fortunately the fix I came accross had to do with the container div's Width, padding and border. Those of you who like to let your blocked elements just inherit their width from the larger elements width, this is a bad idea. If you want it done right you have to do it yourself. The cause it turns out has to do with when you have a floated element, such as a column for layout purposes, and you then fill this column with more container divs. Even if you specify the width of the floated div, if you don't declare the width, padding, and border of the children divs. you will have display problems in IE6. If you are looking at your sites in IE 7, IE8 or Firefox. Everything looks great. But if you want things to look good in IE6 you have to individually declare your width. Don't just assume it will stretch to fill your container div. Also remember that the width of any blocked element is its internal width + Padding + border + margin.
Hope this helps.
Discussion
No Comments have been submitted
WhiteSites Blog