I have recently been getting mildly irritated at all of the "Just don't code for Internet Explorer 6 and people will stop using it" blog entries I've been seeing lately. I consider it a huge problem in the mentality of a designer when they disregard a large portion of visitors and/or customers. No disrespect to Nick La, but simply "giving up" on IE6 is not (at this time) a viable solution, especially because IE6 still has the largest user base.

The fact is, IE6 is not that hard to code for, as long as you have a good understanding of Semantic XHTML, you shouldn't have much of a problem. In this post, I'm going to outline some of the steps you can take to reduce the time it takes to develop your pages for Internet Explorer 6.

The Stats

According to TheCounter.com, IE6 is at 50%, the next largest being IE7 at 24% and following that is FF, at 13%.

TheCounter.com's Browser Statistics
Bar graph showing top 3 browsers. -- Image courtesy of TheCounter.com

Of course, these results will differ from your own website, which is a much better reference. For instance, according to Phazm.com's statistics, IE7 is (very) slightly more used than IE6 -- 24.7% to 24.5%.

Either way you look at it, Internet Explorer 6 still constitutes a very large portion of visits. I don't know why anyone would suggest abandoning 25-50% of their traffic, but if you ask me, it's not a good decision. Read below for some tips on speeding up the entire process.

Reset Your CSS

There are two main differing behaviors in browsers: Their default rendering of HTML elements, and how they handle CSS. To start with, I recommend you always (or whenever possible) use a CSS Reset. Resetting the CSS takes away one of the differing behaviors between multiple browsers. For example, IE6 and Firefox both give <p> tags a default margin, however, that margin is slightly different between both browsers. When you eliminate that behavior, and set everything to have no default(browser) styling, you make your job a whole lot easier. Eric Meyer has created a fantastic CSS Reset which you can find here.

There are several ways you can use this CSS. I prefer to import it within my main/global CSS File.

@import url("reset.css");

Simply put this at the top of the CSS file that is linked on every page on your site, and it will set nearly everything back to have no styling whatsoever. Obviously, there are downsides to doing this. The first is that you really need to start from a clean slate, because any elements that depend on the default margin of a header tag are going to break. The other downside is having to re-declare styles, such as making a list have bullets, making text within italic, and so on.

Conditional Comments

Using conditional comments, most (if not all) CSS hacks can be avoided. Because we only have to worry about the rendering of the CSS, and not the default styling (due to using the CSS Reset) this can actually go quite fast.

Now, some say that you shouldn't use a conditional comment, due to it being proprietary Microsoft code, but I disagree. Not only does your page still validate, other browsers simply ignore the code - I have never had an instance where a properly formatted conditional comment went awry in any browser.

Here is the syntax for creating a conditional comment:

<!--[if (condition) IE (version)]>
Code to run
<![endif]-->

Possible conditions/operators:

  • lt = Less Than
  • lte =Less Than or Equal To
  • gt = greater than
  • gte = Greater Than or Equal To
  • ! = Not

Using the above operators, if you want to have a stylesheet for all Internet Explorers below IE7, you would put the following in your code within the tags:

<!--[if lt IE 7]>
<link rel="stylesheet" href="LegacyBrowser.css" type="text/CSS" />
<![endif]-->

This will call a separate CSS file, called LegacyBrowser.css, which will only affect IE versions below IE7.

Styling the Page

Now, get your page working in Firefox. Once you have done that (completely) you open up your page in IE6, and start creating over-ride classes as necessary. If .imagedisplay is 3 pixels too far to the left, simply add in your LegacyBrowser.css:

.imagedisplay { margin-right : -3px; }

or something similar, to get the desired effect.

Note that if you have already specified margin-right, you may need to add !important to the mix, like so:

.imagedisplay { margin-right : -3px !important; }

This is a very loose example, and in most cases you will simply replace a margin/padding with a slightly increased or decreased value, and use !important.

In this way, you can avoid using CSS Hacks that could possibly break in future browsers, and you give yourself more control over how your page displays in Internet Explorer.

Feedback

I would love your comments regarding this topic. Do you agree that IE6 is still prevalent enough to be worth the additional coding time, or do you think it is a waste of time to cater to a dying browser? Let me know!

  • Digg
  • del.icio.us
  • StumbleUpon
  • Reddit
  • Ma.gnolia
  • Technorati
  • Fark
  • NewsVine
  • Slashdot
  • blogmarks