10 Fixes That Solve IE6 Problems

How to fix IE6We know IE is likely to be around for some time, but can we still support the browser and avoid hacks and conditional CSS? Here are 10 fixes to solve the majority of IE6 problems with valid HTML and CSS code…

1. Use a DOCTYPE
You should always place a DOCTYPE at the top of every HTML page and a strict version is recommended, i.e.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

or, for XHTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

The last thing you need is IE6 going into quirks mode – it’s quirky enough already.

2. Set position: relative
Setting an element to position:relative solves a multitude of problems, especially if you have ever experienced invisible or strangely aligned boxes. Obviously, you need to be careful that absolutely-positioned child nodes are repositioned accordingly.

3. Use display:inline for floated elements
Floated elements with a margin can fire the famous IE6 double-margin bug, e.g. you specify a left margin of 5px and actually get 10px. display:inline will fix the problem and, although it should not be required, your CSS remains valid.

4. Set an element to hasLayout
Many of IE6′s (and IE7′s) rendering issues can be fixed by setting the element’s hasLayout property. This is an internal IE setting that determines how content is bounded and positioned in relation to other items. Setting hasLayout can also be essential if you need to make an inline element such as a link into a block or apply transparency effects.

The easiest way to set hasLayout is to set a CSS height or width (zoom can also be used, but that is not part of the CSS standard). Setting the actual dimensions is recommended but, where that is not possible, you may be able to use height:1%. If the parent element has no set height, the element’s physical height is not affected but hasLayout is enabled.

5. Fixing the repeated characters bug
Complex layouts can trigger a bug where the last few characters of a floated element can appear on the cleared element below. There are several solutions; few are ideal and a little trial and error will be required:

  • ensure all floated elements use display:inline;
  • use a margin-right:-3px; on the last floated element
  • use a conditional comment as the last item in the floated element, i.e. <!--[if !IE]>Put your commentary in here...<![endif]-->
  • use an empty div in the last element of the container (it can also be necessary to set the width to 90% or similar)

See positioniseverything.net for a full description of the problem.

6. Use only <a> tags for clickable and hovered elements
IE6 can only apply CSS hover effects to <a> tags.

You should also use them for controls within JavaScript-powered widgets so they remain keyboard navigable. There are some alternative options, but <a> tags are more reliable than most solutions.

7. Use !important or advanced selectors for IE-specific code
It is still possible to write valid code that specifically targets IE6 without resorting to traditional hacks or conditional CSS in additional files. For example, minimum heights can be defined using the code:


#element {
	min-height: 20em;
	height: auto !important; /* understood by all browsers */
	height: 20em; /* IE6 incorrectly uses this value /*
}

IE6 does not understand ‘min-height’ and incorrectly overrides the ‘auto’ height with 20em. However, it then increases the dimensions if the content requires more room.

Another option is to use advanced selectors, e.g.


#element {
	min-height: 20em;
	height: 20em;
}

/* ignored by IE6 */
#element[id] {
	 height: auto;
}

8. Avoid percentage dimensions
Percentages confuse IE. Unless you can carefully size every parent element, they are probably best avoided. You can still use percentage values in other browsers with !important, e.g.


body {
	margin: 2% 0 !important;
	margin: 20px 0; /* IE6 only */
}

9. Test early and test often
Never leave IE6 testing until your website or application is complete; the problems will be worse and take longer to fix. If your site works in Firefox and IE6, it is almost certain to work in other browsers.

10. Refactor your code
Often, it can take longer to fix than re-think a layout problem. Minor alterations to the HTML and simpler CSS are often more effective. This may mean you abandon perfectly legitimate code, but fewer long-term issues will arise and you know how to handle the problem in future.

Have I missed your favourite IE6 fix? Comments and suggestions welcome.

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • Gastón

    Very good article

  • GarthDB

    Best fix is to upgrade.

  • Ezra Olubi

    @GarthDB
    that is not a fix. that’s running away from an obvious problem. i still saw someone on IE6 today. :p

  • http://www.dan-schulz.com Dan Schulz

    If I may make a suggestion for a couple corrections, only IE 6 and earlier can select :hover on links. IE 7 and later can target any element.

    Also, if I remember correctly, selecting a height immediately followed by a minimum height can cause some other browsers to have problems. I forget what they are exactly, but Paul O’Brien (Paul O’B) would know.

    @GarthDB, not everybody can, especially those on public computers (such as those at some libraries) or work stations/terminals.

  • Jeff

    I can’t believe you’d actually recommend people use height: 1%. That’s definitely one of the ‘hacks’ you are trying to tell people to avoid. You’re !important hack might technically be valid code, but it’s just as much of a hack as using an underscore.

  • Drew McLellan

    This article contains some monumentally bad advice that I feel compelled to correct lest anyone get mislead. Whilst I could waffle on all day, the following point must be made:

    DO NOT use !important to push through browser-specific code. That is a bigger abuse of the technology than any whacky invalid browser hack. You should rarely, if ever, use !important in a regular site stylesheet.

    By the rules of the cascade, declarations given weight with !important cannot be overridden by anything else, including a user stylesheet designed to aid accessibility. You should always defer to the user, giving them the last chance to say how something should be styled, because they know how the page is to be used whereas you don’t.

    That aside, the suggested ‘solution’ is a hacky incantation that is exploiting a specific browser bug. It is far safer, cleaner and more maintainable to override styles in a browser-specific stylesheet delivered with the use of Conditional Comments.

  • http://www.optimalworks.net/ Craig Buckler

    Yes, sorry Dan, all the fixes apply to IE6 although some will help with IE7 problems.

  • http://www.lovezapp.com lovezapp

    @GarthDB You can’t force your users to upgrade.

    Also, if you’re floating left and right divs (i.e., in a two-column layout) then giving the parent div the properties “overflow: hidden” and “zoom:1″ will solve many IE6 issues.

  • WWS

    Nice recap of fixes, thanks! I wish there were any new to me, but still useful to have them all here handy.

    I do have one thing that still forces me to create conditional CSS, semi-transparents PNGs. As far as I know none of the various fixes can get a semi-transparent background “moving” (hover, stripes) png to work. They only work in img tags and on fixed backgrounds (so I put transparent gifs in the conditional CSS). Or did I miss a fix?

  • http://www.optimalworks.net/ Craig Buckler

    Note that zoom is an IE-specific property and will trigger CSS validation errors. Setting a width or height should have the same effect.

  • michael

    also by using the IE-specific conditional comments you can specify some special things for the IE6 (and also other IEs).
    And also specifying in the css some special behaviours for IE by adding “* html” in front of the definition helps sometimes.

  • flashparry

    Thanks, some useful points, although the following still look like hacks to me (despite being valid CSS):

    “where that is not possible, you may be able to use height:1%.”

    height: auto !important; /* understood by all browsers */
    height: 20em; /* IE6 incorrectly uses this value /*

  • http://www.optimalworks.net/ Craig Buckler

    That is the point – it remains valid CSS, is readable, and does not need to go in a separate file. Even then, I would say these are edge cases where you can not get IE to do what it should.

  • n0other

    I hoped this list to be a little more specific and based on popularity of bugs encountered with IE6.

    Some more should be mentioned:

    1. Empty element line-height acting as height even though there’s no text inside. What I usually do is fill all my empty divs with comments, such as

    <div><!– –></div>

    2. IE6 Double characters bug. This one is crazy, couldn’t believe it when I first encountered.

    Demo: http://www.positioniseverything.net/explorer/dup-characters.html

    Quote: “The direct cause is nothing more than ordinary HTML comments, such as, , sandwiched between floats that come in sequence.”

    Easy fix is to avoid having comments in such places.

    3. Dropdowns rendered in OS level instead of browser for IE6, unstyleable, unhide-able. You can’t put layer on top of it to hide the dropdown, it tears to the top. As far as I know, the only way to fix this is to put your on-top layers in separate frames. This bug can be seen in many grade A websites with dropdown navigation.

    4. No support for transparent PNGs. Well just use GIFs you say? Problem is, GIFs don’t support partial transparency, so no gradient shadows and the like. Google for supersleight, it’s an elegant and unobtrusive JS piece that gets the job done.

    http://24ways.org/2007/supersleight-transparent-png-in-ie6

    To educate yourself further: http://www.positioniseverything.net/explorer.html

  • http://www.dan-schulz.com Dan Schulz

    @n0other, to collapse the line height in IE, set the line height and height to zero.

  • Chris

    Good list and some things I hadn’t already known. I prefer to put my IE6 specific CSS into a separate file and use IE’s conditional commenting to include that for IE6 only. That way you get to keep all the extra IE hacks out of the main CSS file so it’s not so messy.

  • Jerrol Krause

    IE6 is definitely the one of the most aggravating factors of web design. Fortunately after you’ve been working with it for a while you just learn to avoid most of IE6′s quirks instinctively.

    Point #9 is definitely the key to avoiding most of IE6′s headaches.

  • cssguy

    maybe the most important advice I have read. Forget all about those fancy new techniques, if you can’t make them work in IE6 then you can forget it…
    And IE6 will be around at least five more years, propably ten more years…

  • Chris

    Where’s number 5? There’s only 9 in that list :)

  • TheBuzzSaw

    #11 — Don’t support IE6.

    All problems solved! :D

  • Jure Merhar

    That is the point – it remains valid CSS, is readable, and does not need to go in a separate file. Even then, I would say these are edge cases where you can not get IE to do what it should.

    I respectfully disagree. They are as much hacks as any other (like * html). The fact that they are not in a separate stylesheet is not an advantage, it’s a great disadvantage. It unnecessarily clutters the main stylesheet, and makes it extremely hard to remove if you ever decide to drop IE6 support.

    I’m sorry to say, I’m a little disappointed by this article. After the one yesterday, I was expecting some kind of magic. :) To be honest though, these are just hacks, whether you call them so or not. It makes little difference whether they validate or not. If you put them in a separate stylesheet inside a conditional block, you have no validation errors either.

  • Brian

    IE 6 is over 10 years old. People, please let it go!

  • rimmer333

    Attention! When dealing with filter-treated PNG backgrounded layer in IE6 that should contain links, be sure NOT to use position: property on that layer at all! Or else your links will become inaccessible. Remember links on semitransparent should have position:, the semitransparent layer should not.

  • Phil

    What’s the point in having your CSS “valid” if it’s just full of hacks anyway? How is using height: 1% any less hacky than using zoom: 1?

    I know it’s nice to have your CSS pass W3C validation but in the real world we have to cater for IE, and that means sometimes using IE specific properties to get the desired results.

    One of the biggest disparities I find with IE is in the area of forms. It’s painful to get form elements consistent across IE and the rest.

    An effective method I’ve been using lately is this:

    <body>

    <!--[if IE 6]><div class="ie6"><![endif]-->
    <!--[if IE 7]><div class="ie7"><![endif]-->
    ...rest of page in here...
    <!--[if IE 6]></div><![endif]-->
    <!--[if IE 7]></div><![endif]-->

    </body>

    And then in your CSS you use something like this:

    .className { height: auto )
    .ie6 .className { height: 20px; }

    That way you don’t have to have separate CSS files, you’re code is reasonably forwards compatable and you can target any version if IE you like.

  • http://www.quizzpot.com hquinn

    Great article! I agree with comment #1, the best fix is to upgrade ;)

  • prafuitu

    @TheBuzzSaw
    I second that!

  • http://www.lunadesign.org awasson

    Hey Craig,
    Some good info here. I especially like #3 and will likely use that often as it is really the worst IE6 bug. #7 is really handy too to get around IE6′s lack of min-height recognition. Nice!

  • http://www.cemerson.co.uk Stormrider

    @TheBuzzSaw

    Not really practical though is it? A large percentage of people still use IE6, and it isn’t good enough to tell a client that you won’t support it because it is a bit harder to, and you can’t be bothered.

  • Michael

    DOCTYPE is my favourite, it fixes IE’s incorrect box model implementation and I wish I had known about it two years ago.

    @TheBuzzSaw not supporting it is the easiest solution but when 25% of my visitors use IE6 and a large portion of them are still on dial-up it is not viable. After you’ve made a couple sites that work in IE6 and are standards compliant it becomes pretty easy to continue supporting IE6.

  • adam

    It will be a interesting research about why people still using IE6? I think one reason is because loads of user are using illegal copy of Windows XP, and so can’t get IE7.
    Other IMPORTANT reason is, if we put more effort to “support” IE6, the slower people going to upgrade their “lovely” browser.

  • Devs_For_IE6

    Some proportion of people will always have an old annoying version. We sell items to an older market and almost 25% of the IE visitors use IE6. When a sale means a few thousand dollars, you tend to be required to support IE6.

    As a freelancer, I usually have an “IE6 fee” if the client wants it supported.

  • solas

    Some good tips there….
    Here’s a couple more

  • http://www.optimalworks.net/ Craig Buckler

    Where’s number 5? There’s only 9 in that list :)

    Well spotted! I better find another! The duplicate characters one is particularly annoying and I’d forgotten that one.

  • SD

    No body uses IE6 these days. Please post something relevant.

    SD

  • http://www.optimalworks.net/ Craig Buckler

    No body uses IE6 these days.

    Really, SD? Either you are very lucky, or you’re ignoring up to 1 in 5 website visitors. IE6 is not dead yet

  • http://www.tyssendesign.com.au Tyssen

    Please post something relevant.

    Erm, pot/kettle – how is the link you posted relevant to this topic? :|

  • SD

    Erm, pot/kettle – how is the link you posted relevant to this topic? :|

    Ha ha this is not called a link. This are the initials of my name and there is a different between initials and links. Gain some knowledge and then post, please!

  • Chiseler

    While some of the specific fixes in this article might be useful, the general principle behind this article is terrible. For the sake of “CSS validation,” the author commits numerous hacks and sins like !important. If you want to use some of these fixes, put them in a stylesheet served only to IE6 and lower via conditional comments. Some of the suggestions are just plain insane, in that they take the position that we should just lower ourselves to the lowest common denominator of IE6, rather than moving forward, as the rest of the browser world (including IE!) has done. Only use :hover on ? Hello, :hover on is essential for doing dropdown menus without Javascript. Serve up :whatever .htc to IE6 and below via conditional comments, and you’re golden. It will slow down performance for IE6 users, but it will work, and heck, maybe they could use a little suffering so that they upgrade to a modern browser.

  • Chiseler

    One other quick sidenote. This article, and the previous article, really make me question the editors at sitepoint. I’ve enjoyed a number of sitepoint’s books, but this article is so far off that it is giving actively bad advice to web designers. I have a hard time trusting anybody who gives out bad advice that makes the quest for web standards harder, not easier.

  • frozenmyst

    Form select dropdowns rendered at OS level:

    One way to hide them when they are supposed to be hovered by a div (for example, when a sub menu is appearing), is to use javascript and change their visibility to hidden at that moment.

  • matt

    i’d have to agree with Chiseler on some points. Just because you are not putting the hacks into a separate stylesheet, and conditionals, you are still writing extra code for IE…how is this any different. And, when IE6 support and use is gone, and your boss says drop the IE6 styles to free up some space, you’re going to have to sort through your CSS and rip them out…VS just deleting a few lines of conditionals and their subsequent CSS files.

  • mark@diwebdesign

    I always find setting all margins and padding to 0 in the CSS helps so much.
    Just place
    *{margin:0; padding:0;}
    at the beginning of the CSS

  • http://www.optimalworks.net/ Craig Buckler

    …they take the position that we should just lower ourselves to the lowest common denominator of IE6

    Absolutely not. IE6 still accounts for 1 in 5 internet users and you cannot ignore it.

    There is nothing to stop you using modern techniques, but IE6 needs to remains usable. Standards and progressive enhancement is the key. For example, you can use :focus styles on input boxes – IE6 will ignore it, but that will not stop the form working.

    The suggestions in this article can help you keep your HTML and CSS code valid, clean, and maintainable whilst supporting IE6. Whether you consider display:inline to be a hack or not doesn’t really matter – it’s often essential to make IE6 floats work as they should. All the browsers and validators understand the property even though it’s not required. You could put it into an IE6-specific CSS file, but how will that make maintenance easier?

    Despite it’s faults, IE6 is good enough to support standards-based development if you know what the issues are (even IE5 and 5.5 are possible). However, all too often, developers blame IE6 for its inadequacies when they finally get around to testing the browser at the end of a development project.

    Professional web developers should support as many browsers as possible. Web standards and progressive enhancement can help: there’s no reason why your site can not work in screen readers, Lynx or IE1 (no CSS or even tables!)

    Like it or not, you will need to understand and support IE6 for some time to come.

  • http://www.optimalworks.net/ Craig Buckler

    Form select dropdowns rendered at OS level … use javascript and change their visibility to hidden at that moment

    The problem also affects iframes and applets. Hiding them is an easy solution (and the only one in IE5.0). For IE5.5 and IE6.0, you can overlay an iframe then put your sub-menu over that. Unfortunately, it introduces a browser detection and a fair amount of iframe-generation code into your JavaScript, but several libraries already support it.

  • VitorGGA

    11. Kill Bill Gates.

  • frozenmyst

    CSS expressions

    If you’re want your site to work on IE6 but do not care too much on slowing down the browser (and mixing some javascript inside CSS), CSS expressions can be used to emulate some features:

    first-child selectors
    border-top: expression(this.parentNode.previousSibling == null ? ‘none’ : ’1px solid #543f3b’);

    opacity
    filter: alpha(opacity=60);

    transparent PNGs
    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’images/bg.png’,sizingMethod=’crop’);

    hover switch emulation
    #navbar {
    h: expression(
    onmouseover = new Function(“this.className += ‘ ieover’;”),
    onmouseout =new Function(“this.className = this.className.replace(‘ ieover’, ”);”)
    );
    }

    Of course, it is not very good, standard compliant code, but sometimes it can be usefull.

  • Clinton Montague

    Great article! I am a huge believer in staying away from CSS hacks and IE specific stylesheets, it’s great to a see an article explaining the every day tricks that I use in an easy to understand and descriptive manner.

  • Chris Paul

    Supporting ie6 should depend on your website’s demographics. Sure 1 in 5 internet users use ie6. But for some of my sites, it’s like 1 in 100. So I don’t bother with ie6 support there.

  • http://www.pmob.co.uk Paul O’B

    Hi,

    Without wishing to sound negative I have a few reservations about some of the tips :)

    re 7) Never use !important as a hack because it is ugly and unnecessary. Why bother all good browsers with code that is specifically meant for IE6. Separate your hacks from your clean styles by using the star html hack for IE6 (or CCs).

    It is also actually less code to specify this code for minimum height.


    .el {min-height:200px}
    * html .el {height:200px}

    For succinct code it’s a “nno-brainer” from the start.

    Then there is also the added issue (that Dan mentioned) where IE7 fails when the !important hack is used for minimum height in a 100% height situation. It is a small problem but revolves around the fact that when the browsers bottom edge is moved up and down again that IE7 will forget the height setting and the height is stuck at the smaller window size.

    All in all there is never a need to use !important as a hack and is still one of the main reason why 90% of people think that !important doesn’t actually work at all in IE6 when in fact it works very well. The only time it doesn’t work is when a duplicate property follows in the same rule block and then IE6 ignores the first one as it assumes you have over-ridden it with the latter rule.


    re 2
    Only use position:relative when needed as it has an affect on performance and may indeed induce more bugs than it cures. MS has admitted that their position:relative algorithms in IE6 are shaky at best.

    Apart from its normal usage only apply it when necessary which will be in cases where negative margins are used or when inline elements have padding and borders. Don’t apply it willy nilly to elements as it may cause considerable problems.

    Many times the “haslayout” fix will actually be the real cure.


    re 4)
    Again only apply haslayout when needed otherwise there are issue with performance.

    However you should ensure that any main containers that hold more than simple content should have a “layout”. Don’t apply it to every element or you will cause many issues as inline elements with haslayout act like inline-block elements and behave differently.

    re 6) That’s not quite correct as IE6 only applies hover to a elements when there is an href (i.e. they must be anchors).


    re 8)
    Why avoid percentage dimensions?

    Percentage dimensions are fine 99% of the time as long as the element “haslayout”. Granted there are a few bugs bug there is no reason to avoid them forever.

    If you avoid rounding errors where 50% + 500% = 101% and the odd obscure bug then percentages will be fine in normal use.

    Of course these are my personal thoughts and you are free to disagree but thanks for the article anyway :)

  • http://www.lunadesign.org awasson

    The suggestions in this article can help you keep your HTML and CSS code valid, clean, and maintainable whilst supporting IE6. Whether you consider display:inline to be a hack or not doesn’t really matter – it’s often essential to make IE6 floats work as they should. All the browsers and validators understand the property even though it’s not required. You could put it into an IE6-specific CSS file, but how will that make maintenance easier?

    Of course it is easier to maintain a website’s CSS if you seperate the nasty IE6 stuff out into its own file. When your client decides a couple of years later that he/she wants their website to fill 21″ monitors the way it filled 19″ monitors (true story), it’s much easier to change the standards compliant CSS in th main stylesheet and then go to the IE6 specific stylesheet and fine tune it. Everything is in one spot and probably consists of 5 or 10 lines of css statements.

  • http://www.simplewebgears.com Darren884

    Great article it solves a lot of issues I have to deal with day to day.

  • Chiseler

    “Absolutely not. IE6 still accounts for 1 in 5 internet users and you cannot ignore it.”

    It’s not about ignoring IE6, it is about the priority at which you address IE6. If you set IE6 as the baseline (which you do, through your recommendation not to use :hover on anything but ), you are missing out on a plethora of important and useful css techniques.

    I think you’re misunderstanding what web standards are, and in fact, what you’re advocating isn’t web standards at all. You’re saying, let’s cater to old browsers within our main stylesheet. If those old browsers can’t handle things like li:hover, don’t use those techniques.

    That is wrongheaded and backwards-facing.

    We’re in an era of much better CSS 2.1 support now, and while this article may have been relevant 3-5 years ago, it’s bad advice now. Yes, some of the specific techniques work, but they should not be in the main stylesheet. They should be cordoned off into the bad land of IE6, where they belong. That is far easier to maintain, rather than putting hacks into the main stylesheet.

    I find it a little condescending for you to assume that those who disagree with you just don’t know what the issues are related to IE6 and the IE5s. We know what they are: we just disagree with your method of fixing those issues. In my opinion, it makes a lot more sense to develop to the standards first, and then find the fixes necessary to deal with the bad browsers later.

    Supporting IE is a hidden tax on web development and easily adds 20-30% to CSS development time, even when developers are knowledgeable about IE’s mistakes. The fact that developers are trapped into supporting IE users enables them to continue to use their older browsers. While I do my very best to ensure compatibility for those older browsers, I do often wonder if this coddling is counter-productive for web development at large. Particularly once IE8 is in the wild, and there is a stable platform of CSS 2.1 that is established across the board, I’d like to see a movement to eventually cut off support for IE6 and below. The amount of time spent accommodating the mistakes of Microsoft adds time and thus money to the budgets of sites.

    Anyhow, I’m ranting now.

    The main point is that a number of your fixes will work, but they would work far better if you segmented them off into conditional comments land.

  • http://www.optimalworks.net/ Craig Buckler

    The main point is that a number of your fixes will work, but they would work far better if you segmented them off into conditional comments land.

    Well, if that what works for you, then that’s absolutely fine. Personally, I like to see the applied styles in one place, rather than a separate file. The fact is that all these fixes (or hacks if you prefer) do not affect better browsers and can remain in the code for years to come. Of course, they should only be used when absolutely necessary – don’t apply postition:relative to everything for the sake of it.

    It sounds as though you may have dropped support for IE6, but you are one of the fortunate ones. However, IE6 will not add 20-30% if you understand the issues and make it work from the start. And when I say make it work – make it work enough: if you need to apply hover effects to a LI, then go for it – but ensure it doesn’t affect functionality for browsers that don’t support that or apply some JavaScript fixes.

    Whether you think IE6 coding is counter-productive or not, a great many people are still using the browser. It’s not ideal, it makes life harder, but ignoring the fact does not make it go away.

  • Chiseler

    Just for the record, I do provide support for IE6. On the main site I work on, I provide support all the way back to IE4 and IE5, and I do provide li:hover support for older browsers.

  • semibad

    The big problem for me with this article is that it places IE6 on a pedestal that it hasn’t deserved to be on for the best part of the decade. Like everyone here, I look forward to the day that I no longer have to support IE6. But I don’t think we should be designing with IE6 as a starting point – which it really sounds like you’re advocating here, whether you intended it or not.

    I also think conditional comments are a very practical and reasonable method for separating any CSS you need to get IE6 to play along. Yes, it adds one (perfectly valid) line of markup to your document. But to be honest, isn’t this the best place for it?

    When I code up a layout, I start in a standards-capable browser (Safari, Firefox, whatever) and get everything sorted. If it works in IE6, that’s brilliant – and if it’s not completely mashed, then it’s worth trying to fix in the main stylesheet. But if it needs big changes, then that’s an IE6 specific problem, and the best place for it is in a well documented IE6 stylesheet. As far as I’m concerned, this is totally different from using the CSS hacks you describe. Hacks like * html mix bad content in with good – which is basically what I use conditional comments to avoid!

    Obviously, everyone uses their own processes – if there was an ideal way to deal with these things, then we’d (hopefully) all be using it. Designers and developers with a bit of experience will be able to weigh up the pros and cons for a given situation and make an informed decision. Those just starting out may not, though, and articles like this should bear this in mind.

    Take care,

    Andi

  • http://www.optimalworks.net/ Craig Buckler

    this article is that it places IE6 on a pedestal that it hasn’t deserved to be on for the best part of the decade

    Well, I apologise if that’s the way it sounds: it is certainly not the intention.

    IE6 deserves to die, but it’s still one of the most ‘popular’ browsers out there. Put it this way, if you are a client receiving two identical web quotes, but one supported IE6 and one didn’t, which would you go for?

    We have a duty to support all browsers where possible: the web should be device-independent. IE6 is tougher than most, but it’s not impossible and the quirks are well documented. Blaming the browser is too easy and often used as an excuse for bad testing practices.

  • Enry

    This article severely disappoints me and lowers my opinion and expectations of the quality of Sitepoint in general.

    You are telling us that we should pursue validation as a holy grail above and beyond every other concern, even going so far as to hack and clutter up our own code, decrease maintainability and make our css into a repulsive mishmash of !important tags and browser-specific lines mixed up with real code, but don’t worry it’s fine because “it still validates”?!

    Please tell me you’re kidding and this whole thing is an early April fools or something, because wow.

    The only consolation I have is that by looking at sitepoint.com’s source code I can see that the actual Sitepoint designers recognize this advice for what it is.

  • Joe Botha

    I’m pretty sure the IE6 numbers are not that high because people view it as a great browser. Many times those numbers are coming from people who have no clue that they even have any alternatives (yes they exist). Other times it comes down to corporate sources where IT wont allow anything else to be used on their network (yes they exist also). It is certainly not because people love IE6.

    Either way, with a 25% market share you had better make sure your site allows IE6 users to get the information they are looking for.

  • Kari Pätilä

    One thing missing from the list is that you shouldn’t put an absolutely positioned element next to a float, or it’ll disappear in IE6. The solution is to wrap the absolutely positioned element inside a regular div.

  • http://www.semibad.com semibad

    I see what you mean, and please don’t think for a second I’m suggesting dropping site features for a particular browser. Taking a look at the Mint stats on my personal site, IE6 still accounts for a full 10% of my traffic (even though combined IE traffic is under 30%). Even if it were 10 times less than this I would still serve content to these users, because as you say, the web should be device independent. But I genuinely believe that we should no longer be covering up IE6′s flaws for its users, designing sites from the start with so much emphasis on accommodating its ‘little’ quirks.

    Should an IE6 user be able to access all the content on your site? Absolutely. But as far as I’m concerned, we shouldn’t be going out of our way to provide any more than a minimum of functionality. As far as I’m concerned, the best way to handle this is to design your site as if IE6 never existed. If it works after that (even if it takes a little editing) then that’s great – and this is often the case. If not, then beat it into a functional shape with a conditional stylesheet. The users of real browsers must be our priority now.

    Take care,

    Andi

  • TheBuzzSaw

    The pro-IE6 responses are absurd. I don’t care that 25% of users still use IE6. You know why 25% of users still use IE6? BECAUSE YOU PEOPLE CONTINUE TO SUPPORT IT! I find it ironic that when I wanted to continue using DOS and Windows 3.1, everyone told me off and refused to support me because Windows 95 was the wave of the future. Now, I am expected to support a browser that is almost 10 years old even though rectifying the situation is a simple matter of downloading and installing an updated browser?

    Sorry, but I won’t stand for it. It is very reasonable to upgrade to a browser that came out in the last 5 years. Heck, I even assist my users in making the transition. Seriously, it’d be on thing if I had the audacity to demand: “This site only works in Browser X version 3.385845648.” However, I am asking users to upgrade to one of any of the modern browsers of their choice.

    People, stop supporting IE6. Educate these users. Take a stand.

  • http://www.optimalworks.net/ Craig Buckler

    People, stop supporting IE6. Educate these users. Take a stand.

    I wish it were as easy as that. Many users in corporate environments can not upgrade IE6 or use alternative browsers. Those with older (or illegal) copies of Windows also can not upgrade.

    Basic support for IE6 is a fact of life, but there is nothing to stop you using progressive enhancement techniques to make your sites better for those using more modern browsers.

  • Alex

    11. Abandon IE6 support. I think the time has come to do this.

  • http://xslt2processor.sourceforge.net boen_robot

    @Craig Buckler,
    What you say about illegal Windows copies is plain wrong. IE7 doesn’t come with WGA check for a long time now. It only held a few months after its release. I do see your point in that some users don’t know this and won’t upgrade because of it though.

    Personally, like some others here, I also feel the things you’re presenting are indeed hacks. I mean, the definition of a hack for me is to use one browser bug (like matching a certain property which it shouldn’t or vise versa) in order to fix another bug. The !important example is the clearest one on this.

    The only kind of “hacks” I consider safe are those by which you specify a value that would otherwise be set anyway. For example, IE7 (and I guess IE6) shift an element slightly from the top and left, when it shouldn’t. Specifying “top:0;left:0″ fixes this, and since it’s the default, it works in other browsers as well. If you want a shift, specifying those values works everywhere as expected.

    For other fixes, I’d use conditional comments, or simply avoid using the style altogether. Conditional comments are more easily maintainable because if a bug occurs only in a certain browser (read: IE6), you know where to look first and/or where to add a fix (IE6′s stylesheet). The thing about needing a stylesheet for IE8 is also not true… not yet at least. Current tests show IE8 to handle CSS2.1 really well (and not just mine, but those of other people too, some of which have commented here). JavaScript is another thing. Most compatability issues so far seem to arise from it, along with developers using conditional comments for all IE’s when they meant “lte IE7″.

  • http://www.optimalworks.net/ Craig Buckler

    What you say about illegal Windows copies is plain wrong

    You need SP2 for IE7.

    Whether you consider some of the solutions to be hacks or not, they are still perfectly valid CSS and understood by all browsers. You will only be exploiting the fact that IE6 will/won’t understand certain properties. If !important isn’t appropriate, then use an advanced selector.

    Again, use conditional comments if you prefer them. However, in my experience, some developers become reliant on them rather than understanding the issues and using easy fixes. Ultimately, they end up with large and complex separate CSS files targeting for several different browsers. Web development shouldn’t be that way.

    It is possible to make a site work in IE6 with clean HTML and CSS without resorting to (direct) browser detection. Ultimately, all of these fixes solve edge cases to get IE6 working with the minimum of code.

  • http://blog.afterlight.net.au AussieJohn

    Those with older (or illegal) copies of Windows also can not upgrade.

    They can since MS removed the Windows Genuine Advantage requirement to download IE7.

    I do see your point in that some users don’t know this and won’t upgrade because of it though.

    Only users that don’t have Automatic Updates turned on.

    As for my own personal coding methodology:
    I too have to deal with the list of bugs and of course many more for IE6. Most of the time I will start a website with a set of stylesheets, including 2 for both IE6 and IE7. The IE6 stylesheet by default already has a few things in it (such as the PNG hack).

    Throughout the build of the website I will often use the star-html hack – this makes it easy for me to build the site quickly whilst having all the styles in the same stylesheet. Then once the templates have come to a near completion, it’s time for code clean-up and the IE6 styles get moved to their own stylesheet.

    As for the support of IE6:
    Many people have a very different set of (passionate) opinions about this, trust me, I am no fan of IE6 at all, I hate its guts. I do know however, that for most sites I work on, there is an appreciable percentage of users that still use it (esp. corporate users, other users unable to upgrade), so IE6 support is of the essence.

    One thing to note is that at my company, the IE6 functional rating isn’t as high as IE7 and Firefox, this gives me a bit of flexibility, as sometimes supporting something 100% in IE6 just isn’t feasible, and it’s function will be (gracefully) degraded.

  • TheBuzzSaw

    I feel sorry for those of who are somehow locked into clients who require IE6 support, but I really have no problem telling visitors to my sites (through a floaty Javascript toy or something) that the site is broken as a result of them using IE6. Is the best response they can come up with really that? “I like IE6 more than other browsers.” Well, I guess you like being unable to browse the Internet comfortably. Not much I can do about that…

    As for the Windows 2000 people (and older systems), just dual boot Linux. Linux runs great on older hardware, and it comes with the latest Firefox. :)

  • TheBuzzSaw

    Forgot one thing: it also bothers me a great deal that so many developers are interested in serving the 25% with so much special attention. Why are we not interested in optimizing for the other 75%???

  • http://www.optimalworks.net/ Craig Buckler

    it also bothers me a great deal that so many developers are interested in serving the 25% with so much special attention

    If that’s the case, why don’t we forget screen readers: they account for a fraction of minority users. Opera, Safari and Chrome have less than 10% of users – forget testing them.

    Are you really saying you’re prepared to lose 1 in 4 visitors to an online shop? Ask your clients if they’re happy about that.

    It’s not about giving IE special attention: it’s about serving all internet users no matter what device they use. That’s the underlying concept of the web. You can still concentrate on building a beautiful modern site that remains usable (but perhaps not as good) in IE6 and every other browser that’s ever been released.

  • http://www.optimalworks.net/ Craig Buckler

    just dual boot Linux. Linux runs great on older hardware, and it comes with the latest Firefox

    It’s tough enough getting users and large corporations to upgrade their browsers! I think most system administrators have enough trouble already!

  • Jason

    Just dump IE! Why always this frickle just to serve IE users?

  • The Watchman

    I got so excited when I saw this >avoid hacks and conditional CSS< but then as I read on I shook my head. Almost half of what is being suggested is in fact a hack to get round Internet Explo(d)er throwing a wobbly. Hey ho! I suppose everything I know about CSS is wrong!

  • http://www.optimalworks.net/ Craig Buckler

    Most of them are simply additional CSS elements. They may not be required by other browsers, but they’re still valid CSS. Personally, I don’t consider that to be a ‘traditional’ hack.

  • Dan

    Much of the gov’t still uses 6. I know, I work there.

  • Graham B

    My advice is – only bother with IE6 if your client demands it. Otherwise, forget it. Until recently I was determined to make all my sites IE6 compliant, but for a personal redesign I made a conscious decision not to do so. Once the site was done, I tried IE6 out of interest, and the only thing that was needed was a slight adjustment to the padding. But I’m not going to bother :)

  • BaZz

    11) use conditional comments in your html to keep the css clean, and the load on other browsers minimized:

    separate stylesheet for ie6 / behaviours/ special scripts

    12) add a notifier in html (to help people to better browsers):

    {some style / maybe some links / high z-index}
    Your browser is outdated and does not follow all modern web-standards
    please upgrade your browser, download a free alternative:
    Firefox, Opera, Safari, Chrome or a newer Internet Explorer

  • http://www.wplancer.com banago

    Perhaps the best post I have ever read about IE6 web massacre. Thanks very much!

  • http://www.clearwind.nl peach

    Never use the important selector to target browsers! Just maintain a separate internet explorer stylesheet with conditional comments.

    Besides the accessibility issues already mentioned, using !important is horrible stylesheet architecture.

    First you put height:20%!important on a box selected as .block…. and then days later you’ve forgotten about it and you’re wondering why your code doesn’t work on #footer .block and .sidebar .block. In the end you’d realize you will have to add more !important statements on the more deeply targetted .block element which will also “break” the hack of using !important to target a browser. It’s just a bad idea overall, use conditional comments instead:
    http://www.quirksmode.org/css/condcom.html

    http://msdn.microsoft.com/en-us/library/ms537512.aspx

    Adding !important statements to your stylesheets for every browser targetting makes it an unmanageable mess!

  • sirCamelot

    btw those users with illegal copies of Windows don’t deserve to use IE and browse the web anyway…

  • Dave

    Having read a huge amount of the comments on this I can say that I understand that some people are unable to upgrade from IE6.

    The person I am most inclined to agree with is buzzsaw’s comment

    “it also bothers me a great deal that so many developers are interested in serving the 25% with so much special attention. Why are we not interested in optimizing for the other 75%???”

    I am not saying that the users of IE6 do not deserve to get the information available to other users of the internet, but surely as buzzsaw states, if we continue to pander to this older browser the remaining IE6 populous will never have a “good” reason to upgrade ?

    If for example a financials company has a provider who writes code to provide info to other companies and decides to pull thier support for IE6 then surely that is a “good” reason to “upgrade” to a newer browser ?

    Just one other thought that springs to mind and I am playing devils advocate a little here by writing this, if the majority of internet users browse the internet using IE in one form or another, doesnt that make ie the standard ?

    Just something a thought I had to make you smile or scream ! Not sure which !

    Don’t flame me for that I was kinda kidding, but it is one to think about !

  • Jay

    Sooner or later, IE6 users have to be made aware that they are using a broken browser. I know everyone wants to accommodate IE6 – and the majority of browsers – but is it really doing anyone any good to coddle IE users? I don’t think so. Ignorance is only bliss for as long as developers go out of their way to make it so.

  • http://www.brothercake.com/ brothercake

    #2 is not great advice – definitely don’t go around adding position:relative to things withut thinking it through. Firstly because you may run into issues with contextual z-ordering (described here – http://www.udm4.com/manual/depth/positioning/#depth-positioning-zordering), and secondly because you may inadvertently trigger IE’s additional z-index context bug (described here – http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html)

  • Anonymous

    We all know that we need to support IE6 because some corporate policies about browser upgrade and people still using IE6, but it’s interesting to see that in other sectors for example “analog” tv, govt has decided to drop analog signals, so now who hasn’t yet got the decoder, they have to upgrade even though their number constitutes a large number of users, few months back in a news article I saw that the Indian govt decided to drop support for mobile phones which do not have some “IMEI” number and they also acknowledged that some 25 million handsets will become unusable, so that’s quite a large number of users, those users have no other choice but to upgrade. In web this is different story because normal users(who shops and spends money using internet) don’t like to upgrade.

    So I just want to say that if we provide pretty good experience for IE6 users then they will never feel the need to upgrade their browser, thus we’ll end up supporting IE6 forever, so there has to be some sort of indication that for getting better and safer experience they should upgrade their browser and it’s of interest to all the users, the developers and for the Web as a viable platform. The amount of cost and the working hours which is required to support IE6 should also be taken into account, so there should be a sort of roadmap that we can use to educate users about upgrading their browsers which will eventually reduce the usage of IE6 to some negligible number.

    Few months back I read one article which
    mentioned how a heavy traffic website has spent a lot of extra bandwidth by delivering additional CSS files to support IE6 users, so this is for interest to users also as they too are exhausting their bandwidth by using IE6 which actually requires more files to download because developers tend to use “IE6 specific” stylesheet to fix the bugs.

    Finally it’s upto to site owner to decide what is the IE6 usage on their site and how they can educate users to upgrade, it’s definitely not an instant solution but if it’s planned carefully for a period of time then this can be achieved I believe.

  • Steve Norris

    I think sitepoint should be applauded for at least tackling what has become a real issue for most professional developers.
    The institution where I work has IE6 as the corporate desktop browser, so for us there is no choice in the matter. We have managed so far by using conditionals which has complicated matters slightly but does work.
    One of the issues I am facing though is how to test for cross browser compatibility during development work. Other than using something such as VMware there does not seem to be a reliable way of doing this, or for that matter a decent online reference for CSS support. I think this is a reason why IE6 is sometimes overlooked, as developers will aim for the most commonly used browsers and forget the others. This is not a good approach, since we should always cater for the widest possible group of users as a matter of course to make all web content more universally accessible, which surely is our ultimate goal?

  • Anonymous

    Refusing to make your commercial sites ie6 compatible because “everyone should upgrade” is like driving around screaming at the other drivers – it serves no purpose other than to hear yourself screaming. The sad fact is that many potential site visitors are stuck in a rut with ie6 for one reason or another – but the clients (you know, the people who pay us?) still want us to reach every possible potential customer in spite of the level of their technical prowess. Therefore, we have to continue to test in ie6 an make sites comply. Thanks for the tips.

  • http://www.lunadesign.org awasson

    Anonymous Says:
    April 11th, 2009 at 1:29 am

    Refusing to make your commercial sites ie6 compatible because “everyone should upgrade” is like driving around screaming at the other drivers – it serves no purpose other than to hear yourself screaming. The sad fact is that many potential site visitors are stuck in a rut with ie6 for one reason or another – but the clients (you know, the people who pay us?) still want us to reach every possible potential customer in spite of the level of their technical prowess. Therefore, we have to continue to test in ie6 an make sites comply.

    Thank you… That’s exactly what I’ve been thinking and I couldn’t have said it better.

  • http://www.indezoo.com/ Indezoo

    thanks for sharing this fixes…

  • http://idsolutions.net.au Shop Fitters Brisbane

    IE has always been a headache to me..i hope your tweaks will solve my problems..