Definitive Guide to Taming the IE6 Beast

Jul 23 2009 by Jeff Starr | 67 Comments

Definitive Guide to Taming the IE6 Beast

For years, Internet Explorer 6 (IE6) has been the bane of existence for web designers around the world. Designers and users alike have come to enjoy the increasingly predictable, standards-compliant behavior of great modern browsers like Firefox, Opera, and Safari. Meanwhile, IE6 continues to haunt our designs, lurking in dark places while dying a painfully slow, agonizing death. As we await that grand and glorious day when IE6 is as dead as Netscape 4, let us be mindful of the endagered species of users who, for whatever sad reason, continue to torture themselves with that terrible beast of a browser.

So come now, let us celebrate these last days of IE6 with this definitive guide to taming the IE6 beast.

In this comprehensive article, you’ll learn some of the best methods for supporting IE6, including proper targeting, specific hacks, image support, box models, floats, and everything in between.

Use conditional comments to target IE6

Conditional comments play an important role in getting IE6 to behave. Conditional comments are basically snippets of code that are included in your (X)HTML markup that enable you to target or filter specific versions of Internet Explorer. Here is a conditional comment that targets IE6 with a special message:

<!--[if IE6]>
  <p>Oops! Looks like you're still using Internet Explorer 6! 
     You deserve better!</p>
<![endif]-->

This is an extremely useful method of delivering code and content only to IE6. Other browsers will see this conditional comment as an ordinary (X)HTML comment and simply ignore its contents. Thus, when adapting our web pages for IE6, conditional comments enable us to apply CSS styles directly, without interfering with other browsers. Although conditional comments are a proprietary Microsoft invention, they are arguably the best way to “hack” specific versions of Internet Explorer.

The easiest way to use conditional comments to target and apply styles only to IE6 is to include an “IE6-only” stylesheet in the <head> section of your web pages:

<!--[if IE6]>
  <link rel="stylesheet" href="http://domain.tld/ie6.css" 
    media="screen" />
<![endif]-->

Then, in the ie6.css stylesheet, we place all of the IE6-specific hacks and other trickery that are needed in order to accomodate IE6. This enables us to consolidate our IE6 styles into a single stylesheet that is completely ignored by all other browsers. With this method of applying styles to IE6, there is no need for IE6-specific hacks such as the so-called “star-HTML” hack or the underscore hack. Selectors are simply targeted “as-is” from within the IE6-only stylesheet.

Of course, conditional comments can do much more than target IE6. By design, they are able to target or filter any version(s) of Internet Explorer for both HTML and XHTML. For more information on conditional comments, these fine articles are highly recommended:

Target and filter IE6 with “in-CSS” hacks

Despite the usefulness of conditional comments, there are situations in which you may decide to apply IE6-specific styles from within the stylesheet. A good example of this may happen during site development, when it is more expedient and practical to work with a single stylesheet, in which IE6 styles are located next to “normal” styles for easy comparison. Once development is complete, all “in-CSS” hacks may be consolidated to an IE6 stylesheet included via conditional comments.

Fortunately, when it comes to IE6, there is no shortage of these in-CSS targeting methods. Over the years, a few of these “hacks” have risen to the top of the pile, proving to be extremely useful and effective for targeting IE6. Perhaps the most widely used of these in-CSS techniques is known as the “star-HTML” hack:

/* target IE6 */
* html #selector { color: red; }

While standards-compliant browsers ignore this illogical selector, IE6 treats it as legitimate, even though <html> is the highest element in the document tree. This enables us to apply CSS styles exclusively to IE6 without interfering with other browsers. Best of all, this method of targeting IE6 is completely valid.

There are also cases where we need to hide styles from IE6. The following hack is referred to as the “child-selector filter,” and it enables us to apply CSS styles to all browsers except IE6:

/* filter IE6 */
html>body #selector { color: red; }

This selector is also completely valid, and readily applied by all standards-compliant browsers. It is effective because IE6 simply doesn’t understand its meaning.

Other useful methods of targeting and filtering IE6 include the !important hack, which is useful when you need to override a property value for IE6:

#selector {
  width: 200px !important; /* target other browsers */
  width: 100px;            /* target IE6 and lower */
}

When there are two identical properties for a selctor, IE6 will apply the second property, even if the first property includes the !important directive. Other browsers will of course apply the !important declaration, enabling us to target IE6 with the subsequent rule.

Enable alpha-transparent PNG support

One of the most frustrating shortcomings of IE6 is its lack of 32-bit alpha-transparent PNG support. When displaying a 32-bit alpha-transparent PNG, IE6 replaces all transparency with an ugly grey background. Fortunately, this is a well-known and frequently addressed issue for which there are a wide variety of workarounds and solutions.

Apart from avoiding the use of alpha-transparent PNG images altogether, perhaps the simplest way to ensure visual compatibility with IE6 is to stick with fully transparent PNG images, which are fully supported and displayed properly in all browsers, including IE6.

A more practical approach is to apply alpha-transparency via 8-bit PNG format rather than the usual 32-bit format. To do so, use a program such as Adobe Fireworks (Photoshop does not work for this purpose), save your alpha-tranparent PNG image in 8-bit format, and then include in your design as usual. 8-bit PNGs may not look quite as good as 32-bit versions, but their alpha-transparency degrades gracefully to full index transparency in IE6. This method enables you to employ alpha-transparency in all modern browsers without getting the ugly grey background in IE6.

Of course, it is also possible to enable IE6-support for 32-bit alpha-transparency. There are many different scripts that enable such functionality, but all of them ultimately rely on a proprietary Microsoft AlphaImageLoader filter that may be included in your CSS file as follows:

* html .iepngfix { behavior: url(iepngfix.htc); }

To make this work, you need to upload these two files to the same directory as your CSS file. The first file is a blank gif image, and the second file is an HTC script that provides IE6 (and below) with the functionality required for 32-bit alpha-transparency. This is the most basic implementation of the AlphaImageLoader filter, but more advanced functionality is also possible using a wide variety of freely available scripts. Here are a few of my favorites:

Fix the broken box model

Early versions of Internet Explorer incorrectly interpreted the box model to include borders and padding in the calculation of the content width. For example, consider the following case:

div {
  border: 10px solid black;
  padding: 10px;
  height: 100px;
  width: 100px;
}

In modern browsers, the height and width of this division are each calculated according to W3C specifications as 100px + 20px + 20px = 140px. In early versions of IE, however, the height and width are each calculated improperly as 100px. This discrepency is responsible for many design inconsistencies between standards-compliant browsers and older versions of Internet Explorer.

Fortunately, the broken box model was addressed in IE6, which is capable of rendering proper widths for web pages that include a complete <!DOCTYPE>. When a complete <!DOCTYPE> is present, IE6 switches to either “standards-compliant mode” or “almost-standards-compliant mode,” both of which cause IE6 to correctly interpret the box model. Conversely, when a complete <!DOCTYPE> is not included in a web page, IE6 reverts to “quirks mode” and interprets the box model incorrectly.

Thus, the box-model problem is easily fixed in IE6 by including a complete <!DOCTYPE> and designing in standards-compliant mode. If you need to work in quirks mode, the next easiest fix is to avoid applying padding or borders on elements for which you have specified a width. You can always apply padding and/or margins to the enclosed elements.

Even with these solutions, there may be situations where it is necessary to control the height and width of specific elements. In these cases, we may use the “Tan Hack” to get the job done:

#selector {
  border: 10px solid black;
  padding: 10px;
  height: 100px;
  width: 100px;
}
* html #selector {
  \height: 140px; /* targets IE5 and IE6 in quirks mode */
  he\ight: 100px; /* targets IE6 in standards mode */
  \width: 140px;  /* targets IE5 and IE6 in quirks mode */
  w\idth: 100px;  /* targets IE6 in standards mode */
}

In the first set of rules, we apply our width and height as normal for all standard-compliant browsers. Then, in the second set of rules, we account for the broken box model in IE5 and IE6 quirks mode by adjusting the values for height and width to include the additonal padding and border widths. That’s quite a mouthful, so hopefully the code and comments will clarify the technique.

Fix min-width/max-width and min-height/max-height

Out of the box, IE6 fails to understand maximum and minimum height and width. This is incredibly sad for designers, as many layout scenarios require these properties to function properly. In modern, standards-compliant browsers, we can use the following CSS to acheive our goals:

div.max-height {
  max-height: 333px;
}
div.min-height {
  min-height: 333px;
}
div.max-width {
  max-width: 333px;
}
div.min-width {
  min-width: 333px;
}

Of course, this is waaay tooo easy for Internet Explorer, which completely fails to understand these basic CSS properties. Fortunately, IE supports its own, proprietary expression attribute, which enables us to use JavaScript expressions to manipulate (X)HTML document properties such as max/min-width and max/min-height. For example, to specify a width property value via the expression attribute, we could use this:

div {
  width: expression(333 + "px");
}

..Which is equivalent to this:

div {
  width: 333px;
}

There are two downsides to using IE’s expression attribute. First, as expressions are essentially JavaScript, they fail when JavaScript is disabled (or otherwise missing) in the user’s browser. Second, use of CSS expressions for min/max properties is very resource intensive and may negatively impact browser performance. Nonetheless, the setting of max/min-widths/heights remains an important tool in the web designer’s toolbox. With that in mind, here are some useful CSS expressions enabling complete min/max functionality in IE6.

max-width

/* max-width for IE6 */
* html div.max-width { 
  width: expression(document.body.clientWidth > 776 ? "777px" : "auto");
}
/* max-width for standards-compliant browsers */
div.max-width { 
  max-width: 777px; 
}

min-width

/* min-width for IE6 */
* html div.min-width { 
  width: expression(document.body.clientWidth < 334 ? "333px" : "auto");
}
/* min-width for standards-compliant browsers */
div.min-width {
  min-width: 333px; 
}

max-height

/* max-height for IE6 */
* html div.max-height { 
  height: expression(this.scrollHeight > 332 ? "333px" : "auto");
}
/* max-height for standards-compliant browsers */
div.max-height {
  max-height: 333px;
}

min-height

Fortunately, we can skip the crazy JavaScript/CSS expressions when applying minimum height in IE6. Thanks to Dustin Diaz, we can set min-height in IE6 with this morsel of valid CSS:

/* min-height for IE6 */
div.min-height {
  min-height: 500px;
  height: auto !important;
  height: 500px;
}

Kill the double margin bug

Most web designers who have been designing sites for awhile are familair with IE6′s “doubled floated-margin bug.” This nasty bug rears its ugly head whenever you float an element (such as a <div>) in one direction and then apply a margin in that same direction. For example, if we do this:

div {
  float: right;
  margin-right: 10px;
}

..IE6 will (usually) double the size of the margin to 20px for no apparent reason whatsoever. Needless to say, this double-margin bug has wrecked many a fine web design, causing much pain and distress along the way.

Fortunately, this bug is easy to kill. Simply change the display type of the floated element from block to inline, like so:

div#selector {
  float: right;
  margin-right: 10px;
}
* html div#selector {
  display: inline; /* kill double-margin bug */
}

This solves the double-margin bug 99% of the time without issue. For those rare, unexplainable cases where this fix doesn’t work, you may need to workaround the issue by removing the margin and applying padding to either the parent element or to the floated element itself.

Clear your floats

Clearing floats is another common layout challenge, not only for IE6, but for many modern browsers. In a perfect world, an element that contains a floated element enlcoses that element entirely. In the imperfect world of web browsers, however, floats are frequently not entirely closed. When this happens, we say that the floated element has not been “cleared” by its parent element. Fortunately, there are several easy ways to clear your floats in IE6 and other browsers as well.

One of the oldest ways to clear your floats is to use the clearfix hack. This CSS technique works by generating content after the parent element using the CSS :after pseudo-class. The generated content then serves to clear the floated element. Here is a typical example:

.clearfix:after {
  content: " ";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}

.clearfix { display: inline-table; }

/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix { display: block; }
/* End hide from IE-mac */

To use this method to clear your floats, place it into your CSS file and change all instances of .clearfix to the selector of the element that needs to clear its floated ancestors.

Another CSS method of clearing your floats is to simply float the container element. For example, if you float an image within a container <div> that fails to enclose it, simply apply the following CSS:

div {
  float: left;
}

Then, if the containing element needs to behave as a regular block element, apply a width of 100% to force a line-break before the next element:

div {
  float: left;
  width: 100%;
}

So far so good, but there is an even better method of clearing your floats. By simply applying an overflow value to the container <div>, it will automatically expand vertically and clear its floated children. Here is an example:

div.container {
  overflow: hidden;
  width: 100%;
}

The width declaration is required for Internet Explorer and Opera, but it doesn’t need to be set at 100%; rather, you may use any width and unit of measure that is needed. If you don’t want to specify a width, you may specify a height instead. For the overflow property, you may use any of the following three values:

  • auto – display scrollbars if content exceeds specified width
  • hidden – never display scrollbars even if content exceeds width
  • scroll – always display scrollbars, even if they’re not necessary

As well as this method works for clearing floated elements, there are cases where the overflow property can interfere with other aspects of the design. If this should occur, you may want to try limiting the scope of the overflow by using overflow-x:hidden; or overflow-y:hidden;. And remember, the width property may be replaced by height.

Fix other common IE6 problems

Wrapping things up, let’s run through a few other problems commonly experienced with IE6. These issues and their corresponding fixes are fairly straightforward, so I will spare you the lengthy diatribe and jump straight to the point. Keep in mind as you continue through this article that you should relocate and consolidate any IE6-specific hacks into an IE6-specific stylesheet, which should be included via conditional comments (see first section, above).

Fix relative positioning

Using position:relative in your designs is perhaps the easiest way to mess things up in IE6. Modern browsers display relatively positioned nested elements without issue, but IE6 frequently chokes up on even slightly complicated layouts. Fortunately, the solution is as easy as triggering hasLayout by adding zoom:1; to each relatively positioned element:

.selector {
  position: relative;
}
* html .selector {
  zoom: 1;
}

Note that you should not apply zoom:1; to any inline elements. Doing so will cause IE6 to treat them as block elements. Keep this in mind for the following solutions as well.

Fix negative margins

Negative margins are useful in a variety of scenarios, and most browsers handle them with no problem whatsoever. Unfortunately, IE6 doesn’t like negative margins unless you apply relative positioning to the target element:

.selector {
  margin: -1.5em;
}
* html .selector {
  position: relative;
  zoom: 1;
}

Note the addition of the zoom:1; declaration, which is required because of the relative positioning. Ain’t IE great?

Fix overflow problems

Using the overflow in IE6 will sometimes lead to unexpected, unexplainable display issues. Fortunately, we can resolve many overflow-related display problems by triggering hasLayout via — yep, you guessed it — zoom:1;. Here is an example:

.selector {
  overflow: hidden
}
* html .selector {
  zoom: 1;
}

Another strange overflow-related issue is observed when font-style:italic; expands the width of its parent element. Thankfully, this nuance is easily resolved by applying the following CSS to the parent element:

* html .selector {
  overflow-x: hidden;
}

Line up floated elements

When you float elements of a fixed width, they will align themselves horizontally to fit the width of the parent element. At least, that’s how it works in most browsers. In IE6, the floated items will not be displayed in a straight line, but rather will appear to stepdown in bizarre, staircase-like fashion. Fortunately, there are two ways to fix this issue. The first is to apply a line-height:0; declaration to the parent element:

.selector {
  float: left;
  width: 100px;
  clear: none;
}
* html .selector {
  line-height: 0;
}

Alternately, you may prevent stepdown by applying a display:inline; declaration to the floated elements:

.selector {
  float: left;
  width: 100px;
  clear: none;
}
* html .selector {
  display: inline;
}

Fix your list items

Lastly, if IE6 decides to add an extra set of list items (<li>) after your list (<ul>), adding an HTML comment has been known to magically resolve the issue. Here is what your source code will look like before and after applying the fix:

Before:

<ul>
  <li>Firefox</li>
  <li>Opera</li>
  <li>Safari</li>
  <li>Internet Explorer</li>
  </ul>
<li>Internet Explorer</li>
<li>Internet Explorer</li>

After:

<ul>
  <li>Firefox</li>
  <li>Opera</li>
  <li>Safari</li>
  <li>Internet Explorer</li>
  <-- IE6 fix -->
</ul>

In Closing

With the CSS tricks described in this article, you are well-equipped to tame the IE6 beast and get it to behave when displaying your web pages. When it’s time to make your next design compatible with IE6, refer to this definitive guide for clear explanations and solutions for the most common IE6 issues. And of course, if you’ve got more tricks, ideas, comments, or questions, be sure to sound off in the comments section!

Related content

About the Author

Jeff Starr is a web-developing, graphic-designing alien from the distant planet Perishable Press. When he’s not flying through hyperspace, Jeff uses his alien powers to write amazing stuff about WordPress and design awesome websites for humans. Jeff comes in peace, so don’t be afraid to follow him on Twitter.

67 Comments

Daisy

July 23rd, 2009

This won’t go down well with a lot of other designers but I recently made the decision to quit support for IE6 altogether.

I think we’re part of the problem. Those that still use IE6 most likely do so because a) they aren’t computer literate enough to negotiate Microsoft’s installation procedure and awful track record of useful updates and b) don’t see the point anyway as us designers hack like crazy to make everything display okay.

From now on I display pages, in IE6 only, politely explaining to the user that their browser is out of date. Obviously providing links to other browsers and whatever contact details the client has.

And yes, I am bothered by the relatively large number of users still running IE6 but I think that we should make a stand. Web technology progresses at an astonishing rate and we can’t pander to crappy software forever.

Tony

July 23rd, 2009

Nice article. It reminds my why I’ve stopped all the hoop-jumping. I have a bare-minimum ie6.css file and that’s it. I use a simple combo of js/css/cookies to serve up a nicely worded recommendation to upgrade. If cookies are enabled, the user doesn’t see it again for 7 days. It’s time for people to abandon IE6 once and for all.

SaturnPolly

July 23rd, 2009

CSS Expressions are evil. All of them are evaluated at multiple events (i.e. mouseover which occurs alot). That might not be a good idea for a browser that is slow on JS anyway …
More info: http://robertnyman.com/2007/11/13/stop-using-poor-performance-css-expressions-use-javascript-instead/

iPad

July 23rd, 2009

This is what we need, awesome collection, awesome resource! Thanks Jeff!

Bobby

July 23rd, 2009

As far as I’m concerned, hacks like this just encourage slow moving IT departments, and the idiots that manage them, to continue to use this bloated piece of crapware. Everybody knows that IE6 has been junk since the day it was released. Let’s just forget about indulging those users that are too stupid to update and let their junky browsers render sites with all the crap. Screw em.

Jeff

July 23rd, 2009

Good article… I wish writing this was a waste of time, which would mean IE6 would finally be dead…

Brian Yerkes

July 23rd, 2009

What a thorough post Jeff. Although, the “Death to IE6″ mafia will not be happy with this support of it!

Abu Farhan

July 23rd, 2009

Thanks for complete source about Ie 6, I looking for around about png in IE 6.

paul

July 23rd, 2009

very nice

exactly what I was looking for

Charlie

July 23rd, 2009

Why on July 23rd, 2009, are we still talking ie6??? I respect your article, there’s a lot of research and good information here, but let’s move on to better things and stop supporting this 2001 browser.

Nick

July 23rd, 2009

Thanks for the tips

Darlene Motley

July 23rd, 2009

THANK YOU SO MUCH!!! Nice summary of issues and fixes and I wish I had this article two years ago!!

EllisGL

July 23rd, 2009

I personally use a reset.css file and then make a CSS file with items that that works in all browsers then IE7, IE6 (I’ve found that IE 6 is more compliant) and one for non-ie browsers for the ones that don’t work in IE.

Simon Vansintjan

July 23rd, 2009

This is the how-to I have been waiting for. Most certainly bookmarked.

Thank you!

wfxyz

July 23rd, 2009

This is so far the best article I’ve ever seen about beating that ridiculous IE6 browser. It almost solve 99.9% of my headache made by IE6.

Congratulation and thank you!

Daniel15

July 23rd, 2009

Great article! :)
More references on hasLayout in IE6: http://www.satzansatz.de/cssd/onhavinglayout.html, http://reference.sitepoint.com/css/haslayout. It’s the cause of so many issues. If you have a problem with something displaying wrongly or weirdly in IE6, try giving it a width or “zoom: 1″, and see if that fixes it. A lot of the time, it might (I’ve used it in the past to correct really weird display issues).

Matt

July 24th, 2009

Wow, there are so many pieces of bad advice and poor practices in this article I don’t even know where to begin. With so much information on the internet about how to correctly deal with IE6′s quirks, how can a summary article get so many things so wrong? I guess most of this is effective, but some of these tips are completely wrong even outside of IE6. “In a perfect world, an element that contains a floated element enlcoses [sic] that element entirely.” I’m sorry? Do you understand what a float is?

Hannah Hu

July 24th, 2009

Regarding the min-width issue, be careful of adding side margins and paddings to the affected container. It can cause IE6 to crash: http://perishablepress.com/press/2008/09/14/beware-of-margins-or-padding-when-using-the-min-width-hack-for-ie/ Tried it out myself and it’s true.

Adrian

July 24th, 2009

Best. Article. Ever. P.S. IE6 sucks.

Lamin Barrow

July 24th, 2009

I know how to work around most of the IE6 specific issues in my web design but this article has broaden my perspective even further. It was a great read too.. so thanx so much for your time and effort putting this together. :)

Ivo Bosma

July 24th, 2009

When I code websites (which I don’t do that often) I usually get very annoyed with IE6… Thanks for your very comprehensive and clear article!

Johnboy

July 24th, 2009

Thanks for this, have come across most of these fixes before however I have never seen this particular fix for the double margin bug. Going to have a play with it today.

oh and DEATH TO IE6!!!

Andy

July 24th, 2009

‘For whatever sad reason’ – many of the people using IE6 now are probably folks behind firewalls who couldn’t upgrade the browser even if they wanted to. That’s offices with hundreds and hundreds of people stuck with IE6, so it makes sense to make any website at least usable on the browser.

viktor

July 24th, 2009

hmm..
when i coding a web (strong laoyout, many pages) i dont need any css for IE6, no hacks, no onstructions for ie6..

when you’re good coder, you can create web for ie6, ff35, opera etc – no hacks, no css for ie, etc

Angel

July 24th, 2009

Great and detailed article!
Some of this IE6 fixes are new for me. I will use them in my next works.
Thanks.

J. Pedro Ribeiro

July 24th, 2009

Those are some great tips indeed and I understand that there are a lot of people still using this browser, but I believe we should educate our visitors about the risks of using outdated software rather than creating miraculous solutions for them to access our websites.
Still, great article and very well written!

Tuzemec

July 24th, 2009

You missed the underscore hack?

.something {
    background: green; /* all */
    *background: yellow;  /* IE 6 & 7 */
    _background: red; /* IE6 */
}
Andrea

July 24th, 2009

Very usefull post to recap all this tiny tricks! Well done!
I’ve never seen the “list items” issue before.

Darren

July 24th, 2009

brilliantly written article – thanks! I’ve read about or used all this tricks before but I’ve never seen them all in the same place. Very useful :)

Alex

July 24th, 2009

I agree with Daisy, but what if the client uses IE6 in all of its computers and offices worldwide? Maybe because it’s the browser for which their sales management online software (for instance) was designed for? Maybe they want the last technology but don’t have the money in these times of crisis. Should I say “no” to a project with them?
Cheers

Rick

July 24th, 2009

The people I see still using IE6 are those at companies where the IT department will not upgrade for some reason or another.

For this reason, we still have to make IE6 compatible sites for our clients. But hopefully as IT departments see that many sites aren’t loading correctly they’ll actually upgrade from that 8 year old POS browser.

Jacob Gube

July 24th, 2009

@Daisy: I think that if you can quit supporting IE6 and still make a living, you should definitely not support IE6. But there are some of us that must absolutely support IE6 because of factors including client requirements, particularly for intranet app developers working with large companies that still haven’t upgraded their systems.

@Tony: I think that it’s great to have an ie6.css sheet that you include in all of your web projects. That way, it doesn’t take up a lot of your time. Maybe someday you can release it as a general CSS library to the public, now there’s a thought!

@Bobby: It’s a tricky situation, and it seems no one is at fault. It’s a negative feedback cycle, we enable them, they keep slacking, and so forth… so like I said, if you have a choice, don’t support IE6.

@Michael Garmahis: That’s just silly. Most IE6 users want to upgrade, but can’t due to IT locking down their systems. You’ll just end up frustrating them with something they want, but can’t have.

@Daniel15: Nice resource, thanks for sharing that!

@Lamin Barrow: That’s exactly what I told Jeff after reading his article, I know about IE6 quirks from experience, but there’s just some things in here that broadened my knowledge.

@Alex: From personal experience working with governmental sites – they push these upgrades down their to-do list because of the cost and red tape that you must go through in order to get things done. Same thing with multi-national corporations.

Sean Nieuwoudt

July 24th, 2009

“”As we await that grand and glorious day when IE6 is as dead as Netscape 4″”

Shouldn’t we be focusing on how to get rid of ie6 instead of teaching more and more people how to “hack” their sites to work with it?

If more and more people teach others how to hack their sites to work with ie6, then the end of ie6 will be prolonged more and more.

Just an objective opinion.

Regards,
Sean
twitter.com/SeanNieuwoudt

Milan Petrovic

July 24th, 2009

I agree with Daisy and all the others how said that developers should stop with IE6 support. Almost a decade old browser that was bad to begin with. I know that there are those that don’t want to upgrade or can’t (big corporations with outdated software), but that’s their problem. Once they get into situation that more and more websites are rendering wrong, they will install better browser. Opera, Firefox can work just fine on WinXP or even older systems.

I test with IE6 only if the clients made IE6 a requirement in the project. And that happens very rarely. Designers and developers should STOP supporting IE6, it’s simple as that.

Kevin Quillen

July 24th, 2009

I always like when people say ‘everyone quit supporting IE6!!’.

How do you explain that to your clients who get phone calls from people saying they would like to purchase their services or products, but can’t use the site? If you ran a site that made $1 million in revenue a year, would you want to eliminate 15-20% of your visitors?

Craig Koster

July 24th, 2009

Great article! I’ve been looking for something like this for a while as I have to support a lot of corporate sites where IE6 is still the company standard browser.

Rob Miracle

July 24th, 2009

There are two groups of people to deal with in getting rid of IE6. IT departments and the zillions of people who only know that you get to the internet by clicking on the blue E and don’t know what a browser is.

But if we start making our websites look bad for them, and occasionally tell them they would get a better experience if they updated, it might get people moving.

Ashish

July 24th, 2009

Yahoo too promotes IE8 on Fx3.5, IE6, IE7 only.
See pics that says “Get the New, Safer IE8″
http://bit.ly/rX5n9
All things considered Fx3.5 is a new browser so surprised to see it there.
Chrome, Safari and IE8 show no such message.

This after Digg, Twitter and Youtube already “advising” IE6 users to upgrade

Wayne

July 24th, 2009

I’m glad you took the time to put this together, but this is too much work to support a 9 year old browser. @Daisy I am with you on not supporting IE6. It needs to die so the web can grow. Everyone please goto http://www.free-the-web.com/ and see how you can help make the internet better. I have made the same choice to stop support for the browser all together. I am also a member of http://www.spreadfirefox.com but really any new browser is better than IE. As for IT support locking them into IE 6; the more basic sites that start to boycott IE6 (youtube, gmail, ect) the more lazy administrators will have to upgrade the desktops. Push IE6 off the web!

George L Smyth

July 24th, 2009

Nice listing of resolutions to a problem with which we must all content. I was talking with our IT guy yesterday about the browser and was told of one area in the government that actually mandates IE6. Makes no sense, but tells me that we will need to continue to support it for the foreseeable future.

Fultang

July 24th, 2009

Good article, but we should be thinking more about killing the beast!!!

DesignerDad

July 24th, 2009

This is the best collection of IE6 solutions I’ve come across. It’s sad that 2009 is over half over, and these hacks are still relevant.

I had a shocking moment this week, when we had to tell a manager in IT to update from IE6 to IE7 even though our whole company (with IT’s blessing) upgraded about a year ago.

One minor correction. Photoshop saves PNG files in 8-bit and 24-bit, but not 32.

Matthijs

July 24th, 2009

Most of my clients still request IE6 support. Takes a great deal of my time, but I do get it working every time. At the same time it is really annoying. The day that IE6 is no longer here will be a happy day.

Nice article about Digg & IE6: http://smurl.ca/diggie6

KB

July 24th, 2009

Thanks for posting this — most of them are fixes I have heard about or used, but some are novel, and the main problem I have with debugging IE6 is I can never remember all of the fixes I’ve used in the past, so this concise reference location is very helpful.

Mohammad

July 25th, 2009

IE 6 for a browser bug that became :D

Pierre

July 25th, 2009

If you want to solve 90% to 100% of IE6 problem by just uploading your .css files, go to http://www.codesign.fr/css2ie6/ !!! It will write for you all the rules to correct your style sheets for IE6.

Bye

Ilia

July 25th, 2009

Great article! I know all of these but it’s great to have them all in one place, now I can get rid of that “IEBugs” bookmarks folder I’ve setup for when I forget details of some hack.
Oh and for anyone setting up one of these “you’re using IE6 please switch to better browser” scripts on their site, this is a great article to link and say “See! This is what we have to resort to! Please spare the web developers.” :D

James

July 29th, 2009

Ditto @George etc — UK Gov’t stuck in IE6 timewarp: http://www.computing.co.uk/computing/news/2246229/swathes-whitehall-internet

Kevin Quillen

July 29th, 2009

Do you guys understand why its not good practice to block out a site and say UPGRADE YOUR BROWSER?

What if movie and television producers suddenly thought plasma was not good enough to display media in the quality they preferred, and made it so you couldn’t watch? Instead you get a big red screen PLEASE BUY LCD, UPGRADE! You would be fairly pissed off. So are users when they get to a site with information they need and its blocked out.

Its important to see the issue from both sides of the fence and reach middle ground.

mb

July 29th, 2009

A very helpful post. IE6 is a nightmare. I have decided to stop supporting it on my personal site – instead supplying links to more modern browsers.

Chris

July 30th, 2009

Also a great way to directly address IE6 is the CSS browser selector: http://rafael.adm.br/css_browser_selector/
It allows you to virtually address every browser, in special IE6 and IE7, but also Safari and Opera, which are very difficult to treat with too. It only needs the implementation of a simple JavaScript.

Akim

August 2nd, 2009

thanks. a realy helpful post.
‘!important’ css trick saves me a hour :)

Samuel Larsson

August 4th, 2009

I totally agree with Kevin Quillen here. It´s a part of the job making sites that works with IE6 when designing them for people that pays you.

Maybe its a question of however you´re running an webservice or designing for friends. Some users are old and WILL not upgrade their system, making a site they can´t use will not make my client happy – the visitors will just purchase from any other company that took care of the interaction.

Thats why I´ve bookmarked this article, it will be handy some day. Thank you. And yes I hate IE6 as much as anyone else ;)

eloge Kly

August 11th, 2009

This is simply the most complete article about IE bugs I’ve found so far,I’m actually fixing IE6 bugs on a project thanks a lot!!

Bogdan Pop

August 11th, 2009

So manny articles about conditional statements for IE6. Why not starting to code properly. I stopped creating extra css stylesheets and other stuff for IE6 couple of years ago. Moreover, the sites look the same,and act the same on IE6 as well as IE7, firefox, or others.

Instead of keeping to add more code to the design (be it HTML, CSS etc) try to remove code, make the structure more simple, while strugling to preserve what you wanted, and no conditional tags will be needed.

Carl

August 20th, 2009

If you want to get some insight into how long we have, go to this site http://www.ie6death.com Looks like we will be dealing with IE6 for a long time.

Eddie Johnson

August 21st, 2009

weirdly, I have just posted an article on a similar subject! (I came across this one a few days later) its not as in depth but has some alternate views/solutions to some of the problems listed here (and has a couple of other problems listed/fixed)… am I allowed a link in here?.. ahh bugger it – look here: http://www.websurfshack.net/2009/08/ie6-css-tricks-and-hacks/

doug

September 11th, 2009

“What if movie and television producers suddenly thought plasma was not good enough to display media in the quality they preferred, and made it so you couldn’t watch? Instead you get a big red screen PLEASE BUY LCD, UPGRADE! You would be fairly pissed off. So are users when they get to a site with information they need and its blocked out.”

@Kevin: Uh, didn’t they just do this to our TVs? Try watching an analog station (read: IE6). You can’t anymore. I understand this is a little apples to oranges (there is no department in my home telling me I can’t change TVs, unless you count my budget…) but the concept is the same.

Dennis

September 28th, 2009

Nice writeup. I advise everyone to make very judicious use of the !important modifier. It is not a good fit for a declaration that will need to be overridden because then you’ll have to use the !important modifier again for all browsers. Using it a few times for ‘primitive’ classes leads to having to use it a lot, and you may well find your stylesheet riddled with !important modifiers.

deanoj

January 15th, 2010

Using the ‘overflow’ method to fix the clearing floats issue caused us no end of trouble with disppearing text in IE6. However, I find using the old style clearfix method to work fine.

Peter Watson

February 9th, 2010

Great article, I will definitely keep it book-marked.

To all the people saying kill the beast…if only it were that easy! Please remember that many users are unable to do so. I work in UK local Government, and our desktop support guys simply don’t have the resources or time to upgrade thousands of users. Sad but true. As for users on the outside, we simply don’t have control over that. You can offer them advice on why they should upgrade/change, but they are under no obligation to do so. Building sites that don’t work in IE6 are just going to piss people off, so in the meantime we are stuck with it.

To all those people saying write simpler code – what if you are working on a comlpex third-party app, where you don’t actually have access to the code but you can work on the CSS? I’m speaking from experience here, where I have been asked to style a GIS application that by its very nature is quite complicated.

Youngstream

September 25th, 2010

IE6 must die!!
Other than that, good job, this is a really thorough and useful article!

Yeu Ly

April 4th, 2011

Hi admin,
Im using IE8, is there any differences about editting CSS code? Thank alot for sharing.

Yeu

FinnBB

May 29th, 2011

Thanks for a great article. Real nice idea about the separate IE6 stylesheet. You are bookmarked! Be nice if Microsoft tried to encourage customers to upgrade their IE6 browsers by means of an ad campaign or offering incentives? If Microsoft are prepared to pay a fortune for Skype in an effort to improve their market position, surely targeting people who haven’t thought about or face challenges when upgrading their browsers would give them much needed kudos and help designers and users’ online experiences. I am going to stop writing now as sadly I am starting to feel annoyed. :(

Lavinia

June 28th, 2011

Exrtmeley helpful article, please write more.

Leave a Comment

Subscribe to the comments on this article.