Grow your CSS skills. Land your dream job.

IE CSS Bugs That’ll Get You Every Time

Published by Chris Coyier

ie-bug

IE 6 actually had the best CSS support of any browser when it first came out... SEVEN YEARS AGO. The little bugs in it's CSS support still haunt us to this day. I still get comments from people who roundly reject any technique that doesn't work in IE 6. While I generally refuse to pander to IE 6's limitations, I still feel it is important to make things look right in it whenever possible. Here are that major bugs in IE that'll get you every time:

The Box Model

This is perhaps the most common and frustrating bug of all in IE 6 and below. Let's say you declare a box like this:

div#box {
   width: 100px;
   border: 2px solid black;
   padding: 10px;
}

IE 6 will calculate the width of the box to be 100px.
Modern browsers will calculate the width of the box to be 124px.

This kind of discrepancy can cause HUGE layout problems. I even think the IE version makes a little bit more sense logically, but that is not how the spec was written. IE 6 can actually get it right if you are in standards-compliant mode, which is rare these days as just using an HTML 4.0 transitional doctype will trigger quirks mode and the box model problem.

I generally work around this issue by just not using padding on boxes I am using for layout. If that box has some text inside it in a <p> element, I'll apply the padding it needs directly to that p element. Just side-steps the issue, but it works.

 

The Double Margin Bug

Using our box example from above, let's say we need that floated to the right:

div#box {
   float: right;
   margin-right: 20px;
}

IE 6 will double the 20px to 40px. Again, causing potentially huge layout borks. The commonly thrown-around "fix" for this is to add "display: inline;" to the div. I'm not sure how this "fix" got so much traction, but its a bit impractical. We can't set static widths on inline elements, now can we?

I also like to side-step this bug whenever possible. If you really need to push that box away from the right side of it's parent element, you can likely do so by adding padding to the parent element, which is more likely to keep your grid consistent anyway. Also don't forget about padding. This bug does not affect padding, so you can often get away with adding padding to the side you need an achieve the same result.

 

No Min Widths / Min Height

Setting min-width and min-height on elements is such a natural and logical thing that it makes me tear up sometimes thinking I can't count on them. IE 6 doesn't just get it wrong, it just completely ignores them. Min-height is incredibly useful for something like a footer. Say your footer needs to be at least 100px tall because you are using a background image down there, but you don't want to set a static height because you want it to grow nicely if, say, the text size is bumped up significantly. Min-height is perfect for this, but using it alone will get you no height whatsoever from IE 6. In a bizarre twist of luck, IE 6 treats the regular height property like modern browsers treat min-height, so you can use a "hack" to fix it. I call it a "hack", because I don't really consider it a hack since it validates just fine.

 

Stepdown

Normally when floating objects you can count on them lining up vertically until they break. That is, you could if you weren't using IE 6. IE 6 appends a line break effect after each floated block element which will cause "stepdown". The fix here is to make sure the line-height in the parent element is set to zero (0), or that the elements being floated are inline elements. More on preventing stepdown here.

 

No Hover States

Most modern browsers support hover states on just about any element, but not IE 6. IE 6 only support the hover pseudo-class on anchor (<a>) elements, and even then you don't get them if your anchor doesn't have a href attribute. The solution here is to use a proprietary fix, or just deal with not having hover states on everything you want.

 

No Alpha Transparent PNG Support

Kind of funny that Microsoft themselves developed the PNG format, but their own browser doesn't natively support it (until IE 7)*. I have a whole roundup of different fixes for this. Do remember that regular non-alpha transparent PNG files work fine without any fix in IE 6, and are often better than their GIF sisters.

*Update: I was totally wrong about the Microsoft thing, no idea how that got in my head. Tom Boutell actually developed the PNG format. Thanks all!

 

So...

All these bugs are either fixable or side-steppable, but they will get ya if you don't do your testing. My general philosophy is: design with the most modern techniques possible, but then just make sure it ain't busted in older ones.

Comments

  1. Permalink to comment#

    Excellent breakdown Chris.
    Thanks for teaching me about the Stepdown issue, I’ve run into the problem myself and didn’t know about line-height fix.
    Thx

  2. Permalink to comment#

    Thanks Chris. I have read about the ie bugs (loved the header LOL), and for the first time I read a nice wrap up approaching those nasty bugs in a simple way. :)

  3. Ivan
    Permalink to comment#

    LOL’d on header :)
    Nice article, nice methods to deal with those bugs.

  4. Good list Chris…IE6 can be such a pain to code for!

    I’ve got one minor correction though…the inline fix works brilliantly. Actually, if you take a look at the CSS specs (the scintillating page turners that they are) they say that if an element is floated, then it should be treated as a block element and all display values other than ‘none’ should be ignored. All the major browsers do seem to ignore it, but apparently it triggers whatever voodoo magic IE6 needed to fix the double margin problem.

  5. David
    Permalink to comment#

    Microsoft had nothing to do with development of PHP. It was mostly the work of Thomas Boutell, the author of libGD.

  6. David
    Permalink to comment#

    oops. big typo. PNG not PHP

  7. I thought Tom Boutell developed the png format http://www.libpng.org/pub/png/pnghist.html

  8. I personally don’t care for IE as i’m a firefox man myself but i still enjoyed the read!…and the picture of “the IE bug” lol

  9. Permalink to comment#

    I didn’t realize MS developed the PNG format. What source gave you that info?

  10. “standards-compliant mode… is rare these days” – If you’re not using a strict doctype, you’re in for a world of trouble. There’s really no need to use transitional anymore, unless you’re looking after a legacy site that can’t be recoded.

  11. IE7 doesn’t fix alpha transparency either – it doesn’t do the stupid ‘pink’ background anymore, but it only supports 1 bit alpha’s in images, not 8 bit true alpha’s. still broken far as i’m concerned.

  12. Permalink to comment#

    float:left; display:inline; makes the element appear as block, the HTML Spec defines that an element in float is all time set to block.

  13. A quality resource for IE-specific issues is Position is Everything:

    http://positioniseverything.net/ie-primer.html

  14. Jan
    Permalink to comment#

    Best Post Ever!

  15. Permalink to comment#

    The IE Box Model “bug” only occurs in quirks mode in IE 6 and above. Wikipedia has an excellent explanation.

    Short answer is: Use the proper document type declaration.

  16. We at my company all decided after a loooonnnng meeting (5 minutes :-) ) to not support anymore this obsolete technology browser. We decided that if a client insist that we make his website to work with IE6, he will have to pay for this.

    We web designers must to push people to stop using that horrible browser and push people to update. My advice: IE6 web designers international boycott (that would make a good website idea, isn’t it?)

  17. Nice post, but for Heaven’s sake, learn the difference between “its” and “it’s”. You’ve got them wrong every single time.

  18. Cheers for the bug info.

    I wish everyone would move to IE7 and getrid of IE6 once and for all. Then I’d only have to worry about one IE browsers bugs :p

  19. Fantastic round up dude. To address the usual: “I wish people would upgrade their browser” … I think it’s a very arrogant attitude to use to believe most users understand downloading and installing… let alone that other browsers exist.

    I would suggest trying to educate users on your site about why IE7/FF is a good alternative. Also I think the real thing that will kill off IE6 is the operating system.

    So in a good 5 years time we’ll be on to only IE7… then 10 years and it’ll be IE8. If we’re lucky, Apple will be more successful with OSX and their machines… and Safari will properly see the light of day.

  20. Mathew
    Permalink to comment#

    The voting results on the right hand side of this page is missing a 1%.

  21. Jan
    Permalink to comment#

    Also not everyone is allowed to upgrade at will. Recently at my company we were company wide downgraded to IE6. go figure. but we’re SOL when it comes to those sites who figure we’re too “ignorant” to upgrade.

  22. Henry
    Permalink to comment#

    CSS is just too hard… thanks to IE6 (and 7…)

  23. “just using an HTML 4.0 transitional doctype will trigger quirks mode and the box model problem.”

    According to PPK[1] – “Note that your page does not have to validate according to the chosen doctype, the mere presence of the doctype tag is enough to trigger strict mode.”

    Note that putting *anything* before the DOCTYPE triggers quirks mode in IE 6. Perhaps this was happening to you?

    @hiro protagonist: “IE7 doesn’t fix alpha transparency either.” – What problems are you having? I use 32-bit PNGs with transparency quite a lot, and so far, so good. FWIW I use PNG-8 for IE 5/6 if I want transparency there. PNG-8 gives binary transparency in IE 5/6, and alpha transparency elsewhere.

    [1] http://www.quirksmode.org/css/quirksmode.html

  24. Abhishek
    Permalink to comment#

    Well said!! The above reasons clearly tell us that we should move on to bigger and better thyings like firefox. IE 6 and php certainly dont love each other. There are quite a few other glitches regarding tables. Abhishek http://www.dibugs.com

  25. Permalink to comment#

    ahh, I so agree – good intelligent article that talks about more than “wahh IE sucks.” :)

  26. Permalink to comment#

    Good roundup. I’ve been looking for these kinds of posts, having coded for all but IE perfectly. It makes me go nuts.

    Another solution to width/margin issues would be to use an IE specific stylesheet and change the widths (say from 100 to 120px in that example).

    I’m not an advanced designer (yet), but I fail to understand why IE-specific hacks (using selectors, html> and *) and IE stylesheets have been ignored in this post.

    Is it because this post is all about coding without hacks for IE? Oh wait, then PNG hacks wouldn’t have been here in the first place.

    So I’m still not sure why the above-mentioned methods aren’t used.

  27. STUMBLED!

    I hates IE, more time is wasted coming up with and adding fixes for it.

    VOTED for this post at:

    http://www.newsdots.com/tutorials/ie-css-bugs-thatrsquoll-get-you-every-time-css-tricks/

  28. Permalink to comment#

    It’s great to use approved CSS in the min-height “hack”. Instead of relying on JavaScripts or the IE-only expression-property to do the calculations, you’d just say “No, IE6/5.5 users, I won’t let my work get harder than it already is because of your old browser.”.

  29. Permalink to comment#

    Ohh, and what’s up with the archive/sitemap-page? (/archives/) Looks like the titles are breaking up the lines and forcing the ads-bar below.

  30. Magenta Placenta
    Permalink to comment#

    You have your box model backwards:

    ———————————————————-
    div#box {
    width: 100px;
    border: 2px solid black;
    padding: 10px;
    }

    IE 6 will calculate the width of the box to be 100px.
    Modern browsers will calculate the width of the box to be 124px.
    ———————————————————-

    IE 6 (in quirks mode) will INCLUDE the padding and border in the width (124px).
    Modern browsers will calculate the width of the box as the CONTENT width ony (100px)

  31. @Magenta Placenta: This isn’t quite right. IE 6 in quirks mode does indeed include the padding and border in the width, but it will apply that padding inside the box and the total width will be 100px — THINNER than modern browsers. I know the photo on the Wikipedia page is misleading that way.

  32. Blaze
    Permalink to comment#

    div#box {
    width: 100px;
    border: 2px solid black;
    padding: 10px;
    }

    what I sometimes do is :

    div#box {
    width: 124px;
    border: 2px solid black;
    padding: 10px;
    max-width:100px;
    }

    it really helps :) IE renders it in a good way :) if it works – it’s ok :)

    and very important are [IF IE] comments too :)

    nice article

  33. Permalink to comment#

    Just out of curiousity, I wonder how long in the future we should anticipate having to write for IE6 quirks like this. For example, most designers I know ignore Netscape 4.0 bugs now, but up until probably 2005 or so, designers were expected to hack their sites to work in N4.0.

  34. “Do remember that regular non-alpha transparent PNG files work fine without any fix in IE 6, and are often better than their GIF sisters.”
    I agree with the last part of the sentence but not the first one: regular non-alpha transparent PNGs are also not displayed correctly by IE6. It shows them a big darker. I’m not talking about a 0,00001% value but something you can clearly see with your eyes and a normal monitor. It can destroy your layout if a JPEG Image lies next to a PNG.
    TweakPNG helps here ;)

  35. Very informative post, thank you. JanB’s point about pesky PNGs is also well worth bearing in mind. Mixing jpgs, gifs and pngs can be problematic. Can’t wait to say bye byes to IE6

  36. try http://browsershots.org/
    when i design a web i always try yo view it in linux mac os and windows, it save a lot of time. I prefer Firefox than IE, My site look worse in IE8, don’t know why…

  37. Ricardo

    display:inline only causes IE6 to not double the margins, the elements are still rendered as blocks – it’s a bug to fix a bug.

  38. I prefer Firefox on IE, coz Firefox always show me a better design,and has support of png transparent backgrounds pictures

  39. Hello!!
    This is definitely very useful and i love it.

    Thanks.

    jitendra

  40. Great Article. There is nothing worse than getting a design perfect and your feeling great, and then check it in ie6, and it looks disgraceful.

  41. seth
    Permalink to comment#

    I find that more times than not, I would like a browser to render a div like IE does, that is, make additional things like padding and margin inset inside the div and margin is outset. That way, as a designer, I can declare a pixel dimension for the width and height, set up a nice padding to inset the content and then I dont have to sit there and manually calculate how big the div will really end up rendering like its 1932. How can I get non-IE browsers to do this?

  42. @seth: I actually agree that that does feel more correct, but it goes against long established standards now. It just takes a slight adjustment in thinking and the real box model is just as easy to work with.

    If you are determined to use the broken IE 6 model, Firefox does actually have a proprietary CSS attribute for making it behave this way. Nothing for Opera or Safari though, so I don’t really suggest using it for anything other than testing.

  43. Great article, and these IE bugs get the best of us sometimes. PNG support is an interesting topic I’d like to go into more. Try an 8bit PNG in IE6 next to the same in FF2. Love the Gamma differences… and there are ways to fix that by deleting chunks from the PNG (I use TweakPNG). Most people don’t even notice though…

  44. An excellent article, that I’ve made use of many times! Great to have all these bugs listed in one place. However, I cant wait to be in a position to abandon IE6 all together. Check out http://www.atomised.coop/blog for my thoughts on the matter.
    And, if you can, join the DeathMarch!

  45. Great artilce. I have been fighting with IE6 and the Double Margin for 2 days. Finally solved my problem. Thanks!

  46. Permalink to comment#

    Nice list, but you forgot the (in)famous Pee-a-boo bug.

    http://www.positioniseverything.net/explorer/peekaboo.html

  47. Permalink to comment#

    I personally don't care for IE as i'm a using firefox.

  48. charan
    Permalink to comment#

    Hi,
    I am new in case of CSS stuff. I need to implement margin property for IE6 only in following statement:

    In above statement margin-left:-17px is used for IE and -moz-margin-start:8px is for Mozilla.. I want to remove Mozilla property from style. and margin-left property should work only for IE6.

    please help me out.

    Thanks in advance…

  49. display:inline only causes IE6 to not double the margins, the elements are still rendered as blocks – it’s a bug to fix a bug.

  50. Permalink to comment#

    short info:

    use * html {} /* for ie6 /
    use *+html {} /
    for ie7 */

    ok its quick and dirty but it validates.. better add dif. stylesheets for dif browsers.
    greetings
    artd

  51. Permalink to comment#

    I’ve found an easy fix for the double margin bug and various other width / display related bugs is to use:

    display: inline-block;

    I’m not sure how this really works, but it basically combines both inline and block displays, meaning the element is still inline, while allowing the block level style of padding, fixed width, and such.

  52. Permalink to comment#

    This is definitely very useful and i love it.

    Thanks. :D great work

  53. Great article thanks.

    I have wasted so much time messing about with CSS for different browsers. When will they just all agree to display everything in the same way. I much preferred tables as at least you knew that your layout would look the same in every browser!

  54. spotted-dog
    Permalink to comment#

    just found this article.

    “display: inline;” works to eliminate the double-margin bug because floated elements, by their nature, are block-level elements. doesn’t matter if “display: inline” is applied to that element. modern browsers simply ignore such non-sense, but ie 6 understands it.

    also, all floated elements should have a declared width.

    great site w/ lots of useful tips.

  55. Permalink to comment#

    Ummm..I’ve tried fixing every issue here in a different stylesheet, yet the main column of my site will still sit underneath the sidebars but it works in firefox. Any idea what might be happening here?

  56. Alpha Centauri
    Permalink to comment#

    As far as I’m concern IE 6 is long time dead…

    Alpha Centauri

This comment thread is closed. If you have important information to share, you can always contact me.

*May or may not contain any actual "CSS" or "Tricks".