I decided to write a guide on how to avoid potential display issues when you have to support IE6 in a project. Whilst I would love not to have to worry about IE6, the simple fact is there are still a lot of people on the web still using the 8 year old browser, and many companies are not able to upgrade their browser due to internal systems relying on it and due to upgrade costs. Whilst working with RNIB and the WAC it was also clear that many blind or partially sighted users are reluctant to upgrade when they know their browser works with their current screen reader software.
I am not a fan of IE6 hacks or browser specific CSS files. The reason for this is often hacks can cause CSS validation to fail, and browser specific CSS files often require script on the page to detect the browser. The approach I like to take is to understand the pitfalls of IE6 and then code your CSS and HTML in way that avoids conflict in the first place. There are lots of different issues surrounding IE6, but I am going to talk about the most commonplace issues that I have found whilst working on a variety of websites/intranets.
The box model is a term used to describe the way that browsers add width, padding, margin and borders to an element. The diagram below is how W3 describes the box model:
A lot of the problems people encounter with layouts and elements looking different in IE6 are to do with the different approach the browser takes to rendering the box model. Whilst all the modern browsers (including IE7 and IE8) add padding onto the calculated width of an element, IE6 includes the padding in the width of the element. So if you have a class that has a width of 100px and a left padding of 10px, most browsers will display the element as 110px wide. However IE6 will display the element as 100px wide and simply push the contents in 10px. In a way the IE6 approach makes more sense, for example if you were going to sound proof a room by padding the walls, the exterior width of the room would not increase, but the content inside would have less room.
The simple solution to avoiding cross browser problems with the box model is to not mix width and padding. Although this often causes extra markup on the page, the amount of time it can avoid fixing issues for IE6 more than makes up for it. For example, if you have the following HTML:
If the class called myclass has a width of 180px and you wanted to add 15px padding to it, you could either add padding to the h1 and paragraphs, or you could add another div inside the myclass div and assign the 15px padding to that e.g.
Using percentages for widths, margins and padding is particularly useful on flexible width sites. Making sure that your inner elements flow with the page as well as the layout is a great way to make use of all the available space. I don't recommend trying to use percentage heights as it often doesn't work and setting heights (fixed or otherwise) is generally a bad idea in terms of allowing for text resizing and content flow.
IE draws objects on the screen using a "layout" property. I won't go too far into explaining this (as I don't fully understand it!), but all you need to know is that various HTML elements don't have "hasLayout" set to true by default, and this is what often causes various issues in IE6, including percentage widths, padding etc. often looking inconsistent with other browsers.
To set an elements hasLayout to true you can use a few CSS tricks. The method you use will depend on your CSS, as you don't want to override a width or a position just to give something layout. So here is a list of CSS attributes you can apply to a class/ID to set it's hasLayout to true:
This is a favourite of mine as it basically does nothing other than to give the element layout.
2. Set a height or width to anything other than auto
If you give an element a width or a height, IE will give that element layout. A trick often used is to add height:1%, as it will give the element layout but won't do anything else. Avoid using with overflow:hidden.
3. float:left / float:right
Gives an element layout, but you then have to clear your float, which can have its own challenges.
4. position: absolute / relative
This sets hasLayout to true, but I would avoid this unless you are using positioning on the site already.
The peekaboo bug is a term that describes disappearing backgrounds/borders/text in IE6 (and sometimes IE7). You can often spot it when you are scrolling up and down a page and something that wasn't there before suddenly is there or vice-versa.
The peekaboo bug is also caused by the hasLayout problem, so any of the above fixes for percentages will solve this problem.
Move on Hover/tab
If you ever see elements jump slightly when you hover over them/tab into them, this is again often caused by the hasLayout issue. So use any of the fixes listed in the percentages section above.
To PNG or not PNG?
PNG images are incredibly useful in that they give you variable transparency, unlike GIF's or JPG's. A GIF offers transparency, but each pixel either has its transparency set to on or off. In PNG's, you can have images that slowly fade into the background.
IE6 does not support PNG-24 transparency. If you try to use a PNG with nice faded transparent edges (often useful with shadow borders) you will get a nasty colour replacing the once transparent sections of the image in IE6.
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src='background.png');
Now I have found a much nicer solution. You can actually get IE6 to accept transparent PNG's, you just have to save it in a particular way. The most reliable way I have found is to save it as a PNG-24 in Photoshop, and then open it up in Paint.NET (I have been told that Fireworks also works). Then you just save it out as a PNG-8. Unfortunately if you try to save it as a PNG-8 in Photoshop it doesn't seem to work, I'm not sure why. Sometimes the quality of the image can suffer slightly using this method, but I have found it is fine when you're using it for border shadows or curved corners.
General IE6 testing
It is worth setting up a VPC with IE6 before you start any development on a site that has IE6 as a requirement. Regular testing is the only way to catch bugs as they happen. Microsoft have various free VPC's available running different OS's and versions of IE available here:
If you don't/can't run Virtual PC, you can try installing Multiple IE from here:
However this isn't supported on Windows Vista or later.
Another tool is IETester which can be found here:
Please let me know if there are any common IE6 issues that you have encountered that I have missed above, and if there is a simple fix available for them.