Tuesday, January 19, 2010

Hateful Double Margin Problems in IE6

Some readers may noticed that this blog does not look good in IE6 at all, mainly due to the double margin problems that I have been delaying to solve. After spending a few days of efforts, it is finally compatible with IE6 now.

The Problem

The image below shows the wireframe of 10Steps.SG. This layout is pretty common in most web design nowadays and the Margin property is used to create nice little gaps between all the rows and columns.
But if you were to use the Float property along with your margins, following is what will happen in IE6. This is quite a serious case as there are still plenty of people using the browser. Take note that it is not all floated objects will get a double margin in IE6. It will happen only when you are using margin on the same side of the object as you are floating it.

Why Care About IE6?

Just for a reference, there are more than 6,000 IE6 users visited 10Steps.SG in December 2009. Let us go over to W3Schools to check out some stats. We are happy to see there is a constant DROP in the percentage of IE6 users. Nonetheless, it is still holding 10.9% of the population. So let's do not overlook the importance of fixing this problem.

Solution 1 – Display Inline

Some web designers suggested using the property [ display:"inline;" ] to all floating objects in the CSS stylesheet. I have tried personally and it works like a charm. Download the file below to see application of Display Inline property.

Solution 2 – IF Statement

Double margin is not the only problem when working with IE6. So if there are many parts to modify on, creating a separate stylesheet for IE6 is a better option. You can specify an IE6 stylesheet by using the following sample code:
<!–[if IE 6]> <link href="yourie6stylesheet.css" rel="stylesheet" type="text/css"> <![endif]–>
Download the sample file below to see application of the IF statement.

Solution 3 – Padding Property

With the problem in using Margin property, maybe it is good to consider using all paddings instead. Although they function differently, we can still use Padding property to simulate the use of margins in some cases, with the use of much more DIVs of course. Download the sample file below to see application of Padding property.

How to Test Without IE6?

Now if you are wondering how to test your CSS without IE6 installed, you can download the free IETester from My DebugBar. It is a free WebBrowser that allows you to have the rendering and javascript engines of IE8, IE7 IE 6 and IE5.5 on Windows 7, Vista and XP, as well as the installed IE in the same process. Below is a screenshot of how the software look like.

No comments: