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.
 
 

Other Design Articles You May Find Interesting

18 Comments | Write a Comment

  1. Foto Galeri says:

    Thank you very much. I’m searching it.

  2. sadhu says:

    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…

  3. HI,

    Your articles is very nice.

    In what conditions we should use solution 3 and when we can’t.?

  4. teachsanjay says:

    nice man! like the way you put it.

  5. W3promoter says:

    This is really great piece of work. Thanks a lot for the solution….

    cheers

  6. Very interesting blog post I enjoy your site keep up the amazing articles

  7. Ins1de says:

    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 🙂

  8. edoluz says:

    i love you man! it’s exactly what i was looking for! thank you very much! you are the best! 😉

  9. Coolman says:

    You are my SAVIOR!

  10. Salmen says:

    helpfull thank you 🙂

  11. Ryan says:

    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

  12. 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.

    • Johnson Koh says:

      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.

  13. vivekdevaiah says:

    Thanks a lot for the solution! using the property [ display:”inline;” ] helped for me though!

  14. Tom says:

    Oh thank you for the IE-Test software advice!
    There are a lot of them out there, but this one is really nice!

17-09-2014 | Comments Off on Top 50 sport wordPress themes
18-06-2013 | Comments Off on 20 sets of free grunge photoshop brushes
21-01-2013 | Comments Off on Free futuristic fonts from urbanfonts.com
06-01-2013 | (2) Comments
24-11-2012 | Comments Off on Make your own business card for free
08-02-2012 | (1) Comment
  • Free Brushes
  • FudgeGraphics
  • CrazyLeaf Design Blog
  • Fuel Your Creativity
  • Photoshop Tutorials and Design Resources
  • touch up photo retouching services
  • Small House Design
  • http://www.webbuildersguide.com/
Follow My Twitter Subcribe Full RSS