Wednesday 9 December 2009

IE6 survival guide

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.

Box model

An overview:

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:

The problem:

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 solution:

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:

<div class="myclass">

<h1>Heading</h1>

<p>Content</p>

</div>

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.

<div class="myclass">

<div class="myclass-inner">

<h1>Heading</h1>

<p>Content</p>

</div>

</div>

Percentages

An overview:

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.

The problem:

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.

The solution:

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:

1. display:inline-block

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.

Peekaboo!

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?

An Overview:

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.

The problem:

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.

The solution:

There are lots of fixes on the web for this. I personally think a lot of them are complete overkill, often using a lot of lines of javaScript to filter the PNG's. For some sites I have used some invalid CSS to fix the problem:

.myclass {
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src='background.png');
}

However, this fix only worked for CSS background image, so if you wanted an image on the page you would have to use javaScript. Also, it's invalid so it’s not great.

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:

http://www.microsoft.com/downloads/details.aspx?FamilyId=21EABB90-958F-4B64-B5F1-73D0A413C8EF&displaylang=en

If you don't/can't run Virtual PC, you can try installing Multiple IE from here:

http://tredosoft.com/Multiple_IE

However this isn't supported on Windows Vista or later.

Another tool is IETester which can be found here:

http://www.my-debugbar.com/wiki/IETester/HomePage

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.

Migrating Multiple Teams between 2 tenants from a list of URL's using ShareGate PowerShell.

If you are lucky enough to have a license to ShareGate, you may find yourself using the Copy Team functionality. The Desktop App is pretty g...