IE6 float margins broken nothing working


IE6 float margins broken nothing working

Posted on Aug 14, 2009 by Paul White

If 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.



Permalink
1245 Visitors
2548 Views

Categories associated with IE6 float margins broken nothing working

Discussion

No Comments have been submitted
name
Email Needed to confirm comment, but not made public.
Website
 
Type Code
Security Check
 
When you Post your Comment, you'll be sent a confirmation link. Once you click this link your thoughts will be made public.. Posts that are considered spam will be deleted, Please keep your thoughts and links relavent to this Article