Business Services

Ultimate IE6 Cheatsheet: How To Fix 25+ Internet Explorer 6 Bugs

The best strategy for dealing with Internet Explorer 6 is not to support it.

Stop. Ok, I feel your frustration. You're a web developer and you're ready to tear your hair out because you have to support Internet Explorer 6, but, to put it tactfully, IE6 doesn't support you. You've spent hours on it, but you just can't seem to get your layout right. I can empathize. I can also help.

This isn't one of those rants about IE6 or a campaign to try to kill it. There are enough of those around the web, but they don't help if you need to support IE6 because it still has a significant enough marketshare that you can't ignore it for business reasons. No, this is the resource you've been hoping for.

I've scoured the web for resources and also included some of my own fixes for IE6 and now I've put it all together in this cheatsheet/reference manual as a resource for anyone who has to deal with Internet Explorer 6. Where possible, I've done my best to provide the cleanest and valid solutions to each bug instead of ugly hacks. I've also tried to give proper credit for each case, but some of the solutions have been shared so many times that finding the original discover of each fix is difficult. If you see a missing credit or if I missed a bug and fix, please contact me and let me know and I'll update this page.

This massive IE6 guide took a while to put together, so bookmark it, share it, tweet it, and use it to save yourself and your coworkers hours of screaming at your monitor and banging your head against your desk or other inanimate objects. Don't be fooled, however, this cheatsheet is as much for me as it is for you.

Update: Yann Faurie has graciously provided a French translation of this article. Jiho-Choo and Sukjin-Lee have also provided a Korean translation, vicZen has translated the article into Chinese, and Dennis Bri has translated it into Russian. If you've translated this article into another language, please let us know so that we can update it.

Strategies

Before addressing IE6-specific bugs and fixes, it's important to first visit some strategies that will help minimize the occurence of troublesome issues. A little prevention is far more cost-effective than dealing with a multitude of bugs that could otherwise have been avoided by following best practices.

IE6 Market Share

According to Market Share, the current percentage (August 2009) of users on IE6 is 25.25%, but other sources place the percentage much lower at 18.1% and . As much as the statistics vary, all show a downward trend. However, the only statistics that really matter are those for your own site. If you already have analytics for your website traffic, does the IE6 usage percentage for your site warrant developing for it? In business terms, what is the cost/benefit ratio for the time and money spent developing for IE6 versus dropping support for it all together? Can you make a business case to support the steadily dropping IE6?

If the majority of your website visitors don't use IE6 and it won't cost your business money, you can save yourself a lot of time, effort, and money by avoiding the IE6 problem all together.

Plan Your Design and Keep It Simple

If you plan your design ahead, even taking just a few minutes to consider the best coding approach, you can sidestep some potential layout problems. Even the most complicated visual designs can and should be created with simple code solutions. If you find that you are using an excessive amount of markup, it may be a good sign that you should take another look at your design approach.

As you gain experience and conquer various layout issues, keep track of your results and the problem that you solved. I can almost guarantee you that you will run into the same problem again, and having a quick reference sheet will save you time in the future.

XHTML 1.1

Validate Your Code

I've heard a few people argue that there aren't any business reasons for validating code, but I don't buy it. Validation really isn't that hard to do in most cases, and it should only take a few minutes to perform. A few minutes spent validating both your XHTML and CSS can reap benefits in all browsers, not just Internet Explorer 6. Validation ensures forward compatibility and cuts down on maintenance. At the bare minimum, validate your XHTML markup. The only real reason it should be ignored is if you want to start taking advantage of some CSS3 properties for browsers that support them.

Develop For Standards-Compliant Browsers First

In line with validating your code, you will avoid a lot of heartache by developing first for standards-compliant browsers like Firefox, Opera, Safari, and Chrome first, and then moving on to non-compliant browsers like IE6 and IE7. Because the compliant browsers will all render in more-or-less the same way, you will then be able to address the Internet Explorer "pecularities" separately. Using this workflow can also aid in future-proofing your code because it gives you a solid base and if you properly label your fixes, you can remove them painlessly once support for those browsers is no longer needed.

Use Progressive Enhancement

Progressive enhancement simply means to make sure that basic functionality is available to all users before adding the polish. Generally, progressive enhancement refers to making web apps work without JavaScript and then using JavaScript to add animations, Ajax effects, etc., but, when speaking about Internet Explorer 6, one could also apply the progressive enhancement principle to using CSS3 (or even many parts of CSS2), HTML5, and other web protocols that IE6 doesn't support.

In some cases, it just might not be possible to deliver the same experience to all users in all browsers, especially those using Internet Explorer 6. Using the progressive enhancement strategy will ensure that those users will at least have the minimum features available while using your website or web app.

Use A CSS Reset Rule

Each browser comes with its own default stylesheet and to no one's surprise, each one is different. A simple reset rule at the beginning of your stylesheet can go a long ways in writing cross-browser code. There are numerous reset rules around the internet, ranging from simple to detailed.

A Simple Reset

Popular CSS Resets

Use A JavaScript Framework

If JavaScript represents more than a trivial part of your website, consider using a JavaScript framework. Most frameworks have been tested in multiple browsers including IE6 and will handle many (though not all) of your JavaScript cross-browser issues automatically. There are a number of different JavaScript frameworks to choose from. In general, anything you can do in one can be done in another, so choose a framework based on your personal syntax preference.

There are certainly many other frameworks and more are always coming out of the woodwork, but listing all of them is for another day. Of those listed, I love, use, and wholeheartedly recommend MooTools if you know your way around JavaScript. If you're just starting out, jQuery would probably be my next recommendation.

Use A JavaScript IE Fix Script

There are a few JavaScript solutions floating around the Internet that attempt to force Internet Explorer to act like a standards-compliant browser. If your target IE audience has a high-enough percentage of users with JavaScript enabled, you could try using Dean Edwards' IE7 or a similar script.

How To Debug Internet Explorer

Internet Explorer can be notoriously difficult to debug, but there are a number of tools to make it easier on developers. As mentioned before, first develop for standards-compliant browsers. Firebug and Web Developer Toolbar are both excellent add-ons for Firefox and can help unravel or pre-empt many bugs in IE. If you want the power of Firebug in other browsers, Firebug Lite is now also available as a browser bookmarklet.

For testing multiple instances of Internet Explorer, the two best options apart from installing a virtual machine are currently IE Collection and IETester, both of which are free (but will also have the occasional bug). The makers of IETester also offer DebugBar, a plugin for IE that is free for personal use but requires a commercial license after 60 days for commercial use.

How To Isolate IE6

The first step in dealing with Internet Explorer 6 is to be able to isolate it so that any changes you make will effect IE6 only and none of the other browsers. There are several ways to pinpoint IE6: with conditional comments, with CSS selectors, and with JavaScript. We'll look at each of these methods in turn.

Using Conditional Comments For Internet Explorer

Microsoft included conditional comments as a way to target different versions of Internet Explorer. Anything can be placed within the conditional comments including markup, JavaScript, JavaScript files, CSS and external stylesheets. The conditional comments work so that you can target a specific version of Internet Explorer and any versions above or beneath a particular version.

The syntax is as follows:

<p>This message will appear in all browsers.</p>
<!--[if lte IE 6]>
<p>This message will only appear in versions of Internet Explorer less than or equal to version 6.</p>
<![endif]-->
<!--[if gte IE 6]>
<p>This message will only appear in versions of Internet Explorer greater than or equal to version 6.</p>
<![endif]-->
<!--[if gt IE 6]>
<p>This message will only appear in versions of Internet Explorer greater than version 6.</p>
<![endif]-->
<!--[if IE 5.5]>
<p>This message will only appear in Internet Explorer 5.5.</p>
<![endif]-->
<!--Sample Conditional Stylesheet, IE6 and below-->
<!--[if lte IE 6]>
<link type="text/css" rel="stylesheet" href="css/ie6.css" />
<![endif]-->
<p>This message will appear in all browsers.</p>

Using conditional stylesheets has several advantages to other methods. The stylesheet is separate from other stylesheets and so there is no confusion as to which browsers will be affected. Also, when IE6 drops to a significantly low enough market share, the stylesheet can be removed quickly without having to parse through each CSS declaration.

The sole disadvantage of using conditional files is that they add additional HTTP requests to the page for that browser. While this may be an acceptable trade-off for a stylesheet, I would recommend against using a conditional external JavaScript file because JavaScript files act as blockers and will prevent other files from loading until they have been completely loaded. If you need conditional JavaScript in an external file, use JavaScript itself to target the browser.

How To Target IE6 with CSS Selectors

If you don't want to use conditional stylesheets, CSS selectors are another option for targeting IE6. Internet Explorer 6 doesn't support child selectors. You first make a CSS declartion for IE6 and then use child selectors to feed CSS declarations to IE7+ and all other modern browsers.

First, the HTML:

<div>
<p class="header">Some Header Text Here</p>
</div>

Now the CSS:

/*This line for IE6*/
.content {color:red;}
/*This line for everyone else, using the child selector syntax*/
div>p .content {color:blue;}

The drawback with using this method is that it can make your stylesheet messy, so make sure to make clear notes in your comments. The CSS declaration for IE6 will also be detected and used by other browsers, so it's important that it comes before the child selector declaration. The reason the child selector overrides the first declaration is because it gives a higher degree of specificity to the declaration. Because IE6 doesn't recognize the syntax, it ignores it, but all other browsers will process it as they should.

Further Reading

How To Use JavaScript To Detect IE6

If you want to detect IE6 using JavaScript, but don't want to use conditional comments, here's how:

//Pure JavaScript, no framework - NOTE: this must be placed in an onLoad event or after the body has loaded or it will result in an error
if(typeof document.body.style.maxHeight === "undefined") {
alert('IE6 Detected');
}
//MooTools syntax (for IE7, use trident5)
if (Browser.Engine.trident4) {
alert('IE6 Detected');
}
//jQuery syntax - Note that the browser method is now deprecated in favor of feature detection through the support method
if (($.browser.msie) && ($.browser.version == "6.0")){
alert('IE6 Detected');
}

Further Reading

Images

Internet Explorer 6 has a number of issues regarding images that can be show-stoppers if you're on a tight schedule or if you are wedded to a particular layout or design. This section is meant to help alleviate some of that pain.

PNG Alpha Transparency Fix In IE6

One of the more frustrating aspects of Internet Explorer 6 is that it doesn't support transparency for high quality images, making layered layout effects difficult. There are some JavaScript solutions, which I'll list below, but none of them allow you to use CSS sprites, except for an Alpha version of Twin Helix's IE6 PNG Fix.

The simplest solution is to save your image as a PNG8 file with Alpha Transparency enabled. If you're using Adobe Fireworks, you can do this by clicking Save As > Save as type > Flattened PNG > Options > Alpha Transparency. If you're using any type of gradient, you can select the Dither checkbox to get a slightly better quality gradient. Saving as a PNG8 with Alpha Transparency will only render semi-transparent areas of the images as 100% transparent; there are no varied degrees of opacity.

Another option is to add an IE-specific filter in a CSS stylesheet that targets only IE6. Aaron Baxter explains the technique in a tutorial on his blog.

JavaScript PNG Fixes

Rounded Corners In IE6

Rather than go into a detailed explanation here, I'll simply refer you to our tutorial on CSS Rounded Corners Menus, which covers a cross-browser method of creating rounded corners for menus or other layout elements.

How To Solve Flickering Background Images

If you're using CSS sprites as background images for links or buttons, you'll notice that the image will flicker briefly in Internet Explorer 6. The reason is because IE6 doesn't properly cache the background image and reloads it every time. You can fix this with a single line of JavaScript that forces IE6 to cache the image.

document.execCommand("BackgroundImageCache",false,true);

Other Solutions

Layout

The layout bugs of IE6 can be some of the most frustrating to deal with, especially when you're aiming for pixel-perfect design and it works in every browser but Internet Explorer 6. This section will address those bugs and how to fix them.

Understanding hasLayout

A number of IE6 bugs and rendering errors can be attributed to Microsoft's proprietary concept of hasLayout. Briefly explained, hasLayout is triggered whenever an element is given specific dimensions, such as height or width. The absence of those declarations can result in one of the many bugs you'll no doubt run across while working with IE6.

Rather than going into a lengthy description of hasLayout, I'll simply refer you to an excellent tutorial on the subject by John Gallant and Holly Bergevin, which will detail when and how to deal with hasLayout.

Further Reading

IE6 Box Model

If quirks mode is triggered in Internet Explorer 6, IE6 will use Microsoft's older interpretation of the box model, which excludes borders and padding in the total width of an element. The best strategy in dealing with this bug is to avoid triggering quirks mode by using a correct doctype or to avoid applying the width property to an element that already has either the border or padding properties applied to it. Conditional comments can also be used, but should only be called upon as a last resort.

Further Reading

Min Height

IE6 ignores the min-height property and instead treats height as the minimum height. Thanks to Dustin Diaz, a fix was discovered that uses the declaration !important, which IE6 will override but other browsers will not. This solution also works for min-width.

Max Height

Unfortunately, the only ways to achieve the max-height effect in IE6 are by using IE-specific CSS expressions, which are the equivalent of running JavaScript in a stylesheet, or by using JavaScript itself. Of the two, I recommend using the JavaScript solution as CSS expressions are expensive in terms of processing power and can cause the browser to crash. Both solutions will not function if JavaScript is disabled. Note that this solution is for IE6 only as all other browsers support max-height.

100% Height

In order for an element to achieve 100% height in IE6, you will need to specify a fixed height of its parent element. If you want to make the element the full-length of your page, apply height:100%; to both the html and body elements.

Double Margin Float Bug

Internet Explorer 6 will incorrectly double the margin for floated elements with a margin applied on the same side as the element is floated. Steve Clason is credited with the fix, which is simply adding display:inline; to the floated element.

How To Clear Floats

If you're trying to wrap floated elements with a container, but the container doesn't wrap properly, explicitly set either a height or width property on the container to a value other than auto and also add the overflow property with one of the three following values: auto, hidden, or scroll. Alex Walker first wrote about this technique and gives Paul O'Brien credit for the idea.

Further Reading

Float Drops

The float drop bug occurs when the contents of a floated container exceed the specified width of the container. In Firefox, IE7 and other browsers, the contents will merely be cut off, but in Internet Explorer 6, the container will ignore its specified dimensions and expand to accomodate the contents. If any other elements have been floated next to the container, they will then drop below it.

The Float Drop Bug is one IE6 error for which there is no real satisfactory solution, at least that I could find. It can be skirted using overflow:hidden; or overflow:scroll;, but the hidden value presents accessibility issues and the scroll value can ruin the layout. Even JavaScript fixes don't seem to be useful in mitigating the problem. The best solution that I can suggest is to avoid the problem altogether, either by using a fixed layout or being extremely conscious of the size of your content.

Further Reading

The Guillotine Bug

The Guillotine Bug is a particularly frustrating IE6 (and IE7) bug. It truncates or guillotines content in a floated and non-cleared element that is larger than its container element whenever links with different hover styles with non-floated content after the float are moused over. Sound confusing? Don't worry, this bug and its fix are once again well-documented by the folks at Position Is Everything.

Despite the complicated triggers for the bug, the solutions are fairly simple. The first involves adding an additional element at the bottom of the container and setting that element to clear:both;. The second fix is to trigger hasLayout in the element containing the links that enable the guillotine effect. This can be done by simply adding a height:1%; declaration.

Further Reading

1px Gap Bug For Absolutely Positioned Elements

This bug occurs in IE6 (IE7 fixes it) because of a rounding error. IE6 will include a 1-pixel gap on the right or bottom edge between an absolutely-positioned element and its relatively-positioned parent if the parent's dimension is an odd number. The only real fix for this is to specify even heights and widths for the parent element. Sadly, there isn't really a solution for fluid layouts. Paul O'Brien explains the problem in further detail here.

3px Gap Float Bug

Also called the 3px text jog bug, this bug occurs in IE6 when text is abutted next to a floated element. IE6 will add a 3px margin between the element and the text, even if none is specified. Stu Nichols has a particularly elegant solution to the problem.

IE And The z-index Property

If you're using the z-index property on positioned elements in Internet Explorer 6 or 7, the stacking index will reset to zero, causing a rendering error. The solution, pointed out by a person named baker, is to add a higher z-index to the parent element. In some cases, the parent element may also need to be assigned position:relative.

Further Reading

Overflow Bug

Jonathan Snook documents and solves the overflow bug, which occurs when the overflow property is set on a containing element and there is a relatively-positioned child for which the height is greater than that of the parent. In both IE6 and IE7, instead of following the overflow declaration, the larger child element will spill out past its parent. The solution? Add position:relative to the container.

Lists

Horizontal List Item Width Problem

If you're trying to float list items to form a horizontal menu, if you've applied the float the <li> element, you'll find that each menu item will annoyingly stretch to 100% of the width of the containing element, making the menu items stack vertically rather than horizontally. Again, this problem occurs only in IE6. The solution? Thanks to Rofikul Islam Shahin, it's easy. Just apply float:left; to the <a> as well as the <li> and your menu should display the way it should.

Staircase Bug

The Staircase Bug occurs when the contents of <li> elements are floated in an attempt to create a horizontal list (often used for navigation). Each item will either appear vertically stacked, or will float in a staircase pattern.

The solution? There are two: apply the float to the <li> instead, or apply display:inline; to the <li> element.

Vertical Spacing or Whitespace Bug

When creating a vertical list that has<li> elements with block-level children, Internet Explorer 6 (and perhaps some cases of IE7) will erroneously add vertical spacing between the list items. There are multiple solutions for this, but let's take a quick look at an example first.

Further Fixes and Explanations

Behavior

As in many other scenarios, IE6 has problems in how it behaves. Some behavioral issues occur because IE6 is old, because it doesn't fully support CSS2, because it doesn't support CSS3 at all, or because Microsoft simply decided to follow a proprietary standard.

Let's look at some of the more common behavioral problems with Internet Explorer 6.

No Hover State In IE6

There is no IE6 support for a hover state of any element except anchor tags with the href attribute or elements for which such an anchor tag acts as a container. This severely inhibits the usage of any mouseover effects in IE6, but there are a few ways around it.

The best approach is to not rely on the hover property for conveying mission-critical functionality. Instead, use it only to accent or enhance an already functional and accessible feature.

Implementing The Canvas Tag In IE

No version of Internet Explorer (including IE7 and IE8) supports the HTML5 canvas tag because Microsoft favors pushing its own option, VML, instead. However, there are several JavaScript solutions that emulate the canvas tag for IE.

Canvas Fixes and Resources

IE6 Resize Bug

Emil Stenström discovered and found a solution to the IE6 Resize Bug. Basically, on a page where the body element is centered and the layout is fixed, any relatively-positioned elements within it will become fixed if the page is resized but not refreshed. Emil's solution was simple and elegant: add position:relative; to the body.

JavaScript

Internet Explorer 6 also suffers from a myriad of errors while trying to interpret JavaScript. I won't be able to cover each and every IE6 JavaScript bug, but I'll address a few of the more common occurences and what you can do to fix them.

Error: Expected Identifier, String, Or Number

Internet Explorer isn't known for being tolerant of poorly-formed JavaScript and it will often give the error, "Expected Identifier, String, Or Number" if a trailing comma is found after the last item in an array or hash. Other browsers are more forgiving, but by removing the comma, you can usually get rid of this error.

Miscellaneous

Duplicate Characters Bug

When IE6 encounters any sort of hidden elements such as a comment or an element set to display:none; within a floated element, it may duplicate characters. The problem is nicely detailed at Position Is Everything, but the solution seems simple enough: apply display:inline; to the float that precedes the hidden elements.

Favicons in IE

Favicon is short for Favorites Icon and refers to the 16x16 pixel image that appears next to any page that you bookmark in your favorites folder. There are two methods for getting it to appear. The first is simply to save an image called favicon.ico in the root directory of your website. Internet Explorer and other browsers should automatically look for the image and display it. The second method is to place the following code in the head of your HTML document (after uploading your image):

It should be noted that the favicon image can become cached and may not change unless you empty your browser's cache and refresh one or more times. If you would like to have it update automatically for your users, set the expires header on the image.

Tags

Benjamin Kuker is the co-founder of Virtuosi Media and is married to his beautiful wife, Johanna. He is responsible for the design and maintenance of this website. He enjoys reading, writing, programming, business, sports, and traveling.