Bloggerrific

IE6, has for quite some time, been the bane of my existence. It has a deluge of bugs, but it also has some easy fixes for it. Below I have a small list of some of those bugs which don’t have easy and simple solutions but that you should still be aware of.

1. PNG transparency fix link bug:
In my last IE6 bugs and hacks post, I wrote about the common PNG transparency issue. The common javascript fix that is used for this actually causes a problem if you use png images inside of a link. I use this a lot for custom-made rollover buttons (which I implement using a great CSS trick). If a PNG image with transparency is placed inside of an <a> tag with the javascript fix enabled, then IE6 won’t recognize it as a link. Luckily, this actually has a fix! Simply add a "position: relative;" to the image CSS definition and you are good to go!

2. Absence of min-height/min-width:
IE6 does not understand min-height or min-width style definitions for objects. These definitions are often very helpful with dynamic content. There is sadly no fix for this problem. Luckily, this usually won’t cause big problems with your layout. The best you can do is try to avoid the need to use these definitions and you should be fine.

3. :hover only works on a tags with an href
Unfortunately, IE6 decided that the pseudo-class :hover wasn’t useful enough for anything other than links. Obviously, that isn’t always the case. You may want to use it for divs, spans, paragraphs, or any number of other objects. There is no fix for this problem, you’ll just have to live with your hover not working in IE6 and below.

4. Divs won’t maintain a small defined height

This is a really strange one. It seems that if you define a div with a height of anywhere below about 10 pixels, IE6 will force it to 10px (or whatever it magically seems to have selected). This is most likely because it is making room for overflow. There are three fixes that I’ve heard of:

• Apply a “font-size: 0px;” to the div (which can be a problem if you have copy in the div).
• Apply a “line-height: 0px;” to the div (which can also be a problem for the same reason above).
• Apply a “overflow: hidden;” to the div which should remove the overflow problem.

Now that all of that is over, Internet Explorer 8 has just been released post Beta. This couldn’t be more frustrating for me seeing as right now there are 3 active version of IE out there. Last time I checked IE has about 50% of the browser market, and within that, IE6 had about 20%, IE7 about 70%, and IE8 the remaining 10%. Slowly this will all shift, but it’ll be at least another year before I’d even consider not testing in IE6 anymore. Sadly that means for at least a year I’ll be testing three frickin versions of Internet Explorer. FRICK! Good luck to you all .

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 will ALWAYS work, but can be more tedious and won't pass validation)
}

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!