Posted in Source
My thoughts on Internet Explorer have been well documented; for those that don’t already know, I think IE hinders the internet’s progress and represents another embarrassment for Microsoft. That said, a majority of users still browse with Internet Explorer 6 so it’s important to make sure our customers’ websites look good in the browser.
One of IE6′s glaring mistakes is producing double padding and/or double margin when using the respective property on two floating DIVs that fall next to each other. Since I build websites using all DIVs, I run into this problem with every framework I create.
The Problem
The above title is misleading, as my code isn’t the problem — IE6 is. That said, the following code alone isn’t good enough:
#global-column-1 { margin:0 0 0 33px; padding:0 20px 0 0; width:255px; float:left; }
#global-column-2 { margin:0 0 30px 30px; width:250px; float:left; }
The Solution
Use IE6-only CSS code to fix the problem in that browser.
#global-column-1 { margin:0 0 0 33px; padding:0 20px 0 0; width:255px; float:left; } * html #global-column-1 { display:inline; }
#global-column-2 { margin:0 0 30px 30px; width:250px; float:left; }
The “* html #global-column-1″ declaration is only viewed by IE6. The”display:inline;” code actually corrects the double spacing.
Shouldn’t developers and the browser creators be working together? Apparently not, as Microsoft never fixed this issue.
