In a few previous posts, I’ve mentioned the all too scary issue of cross browser compatibility. In particular, Internet Explorer seems to always come up, and even more specifically, Internet Explorer 6 (or IE6). There are dozens of bugs that arise with IE6 because of how the browser reads HTML and CSS. I’ve found the best solution when you encounter a problem with how IE6 renders your code, google it. But, to make things easier for some of you, here is a compilation of some of the most serious problems that I have encountered with IE6, and if their is a good hack or fix for it, I’ll tell you about that too.

1. Padding discrepancy:
IE6 and below calculate the width and height of sizable objects differently than other browsers. This issue is easy to demonstrate with the following example of a div’s css:

div.example{
   width: 100px;
   height: 100px;
   margin: 10px;
   padding: 5px;
   border: solid 2px black;
}

Normally, this div should be rendered as actually having a width and height of 114px (100px defined width + padding-left of 5px + padding-right of 5px + border-left of 2px + border-right of 2px). Though this might seem counter-intuitive, it actually makes sense when you consider wanting to define space for copy or images, but still have padding with a background color (for example). IE6 and below makes the mistake of still defining the width and height of the div as 100 each, meaning the actual usable space inside the padding and border is now down to only 86 pixels.

There are two fixes to this. One is avoid using padding, and use margin instead (which is not included in the same way that padding and border are) when working with objects with defined width or heights. This is what I tend to do, because it doesn’t require using a hack. However, this is not always possible, especially when you are working with divs that have background colors and text inside. So, the best hack I’ve discovered so far is actually the underscore. Yeah, that’s right, _ does wonders when put immediately before a CSS style definition because every browser except IE6 ignores that line. So what you’d want to fix the above problem is the following CSS:

div.example{
   width: 100px;
   _width: 114px;
   height: 100px;
   _height: 114px;
   margin: 10px;
   padding: 5px;
   border: solid 2px black;
}

IE6 will read the first width definition, but then correct it with the second, whereas other browsers will simply skip over the second definition, leaving you with uniform renderings for the div!

2. PNG transparency:
To bring you up to speed, PNGs are far superior to GIFs in every way but one: IE6 displays PNGs with transparency incorrectly. Obviously, there are two fixes yet again. One is avoid using PNGs with transparency and use GIFs when transparency is necessary. I personally do not want to do that because the transparency on PNGs is much better than GIFs (GIF transparency can look rasterized in comparison). The other solution is some handy dandy javascript. There are a lot of these out there. You can check out this one or just google “png fix”. The only issue with these fixes is they often cause problems with background positioning for images. Sadly, you’ll have to live with that bug if you want to fix the first bug…

3. Double margin with floated objects:
Let’s say you have a div that you float to the left for positioning. Then you give it a margin on the right and bottom to give it some space before the next object begins. IE6 has a bug where it will actually double the right margin because the object is being floated. This is incredibly annoying and 100% a bug (as opposed to a discrepancy in how the browser will render something). To fix this evil little bug, add a display: inline style definition inside the floating object. That won’t work 100% of the time, so if it doesn’t work, then use an _margin: definition with half the margin that you defined. For example:

div.example{
   float: left;
   margin-right: 10px;
   margin-bottom: 10px;
   display: inline; /*This will usually do it and is much easier to apply*/
   _margin-right: 5px; /*This ALWAYS works, but is more tedious and technically not valid*/
}

As discussed above, the underscore is only read by IE6 and below but will be ignored by other browsers. This should be used when display: inline will actually mess with your layout, or if for whatever reason it does not work properly.

4. Inability to center divs using auto margins
Centering a div is easy unless you are using IE6. Normally, a div with a defined width and a left and right margin setting of “auto”, will automatically center within it’s parent element. However, IE6 doesn’t like that. To fix it, add a simple “text-align: center;” definition to your html and body tags. This of course will center all of your copy, so add a “text-align: left;” to all of your other tags that might contain copy (p, div, h1, h2, h3, a, etc).

Got other bugs? Got other questions? Got other fixes? Post a comment! Also, check out the second installment of IE6 bugs!