| 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. |
| |
 |
| |
I am Johnson Koh, an Art Director based in Singapore. Founded 10Steps.SG with the purpose to share my experiments and interesting design news. Connect with me on LinkedIn. 
18 Comments | Write a Comment
Thank you very much. I’m searching it.
reading reading.. haha..
i searched abuot testing ie6 standalone stuff the other day, and i saw this tester too, then i found another plugin call Spoon Sandbox Manager 3.21 and it has good feedback too, then i installed it, but nth happen and i dun kow how to use it… i guess it isnt compatiable with window 7 or smt…
HI,
Your articles is very nice.
In what conditions we should use solution 3 and when we can’t.?
nice man! like the way you put it.
This is really great piece of work. Thanks a lot for the solution….
cheers
Very interesting blog post I enjoy your site keep up the amazing articles
Hi,if you do not have IE 6 install on your computer you can try other solution which is Multiple IE.You can find the installation pack here:
http://tredosoft.com/Multiple_IE
Ins1de
Thx! nice post
i love you man! it’s exactly what i was looking for! thank you very much! you are the best!
thank for post
You are my SAVIOR!
helpfull thank you
The best resource I have found for doing browser testing is Adobe Browser Lab (https://browserlab.adobe.com). It is free and allows you to test in several browsers ar once and even compare them side by side. Its all web based so that even if your on Ubuntu or OSX you can test in IE6.0
It’s ridiculous to presume that anyone should pander to the ignorant/stupid minority who still uses IE6. God knows if the web got unfriendly sooner to these people, we might be rid of them already.
It is not good to brand the group as stupid or ignorant. By looking at the decreasing rate of IE6 population, I think we can stop accommodating with it in the next 1-2 years.
Thanks a lot for the solution! using the property [ display:"inline;" ] helped for me though!
Oh thank you for the IE-Test software advice!
There are a lot of them out there, but this one is really nice!