IE CSS Bugs That’ll Get You Every Time
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 offen 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.
Loading ...
1
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
Comment by Eric — April 23, 2008 @ 6:57 am
2
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.
Comment by mao — April 23, 2008 @ 6:59 am
3
LOL’d on header
Nice article, nice methods to deal with those bugs.
Comment by Ivan — April 23, 2008 @ 7:27 am
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.
Comment by Tim Kadlec — April 23, 2008 @ 7:28 am
5
Microsoft had nothing to do with development of PHP. It was mostly the work of Thomas Boutell, the author of libGD.
Comment by David — April 23, 2008 @ 8:58 am
6
oops. big typo. PNG not PHP
Comment by David — April 23, 2008 @ 8:58 am
7
I thought Tom Boutell developed the png format http://www.libpng.org/pub/png/pnghist.html
Comment by Mike Finch — April 23, 2008 @ 9:00 am
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
Comment by BeyondRandom — April 23, 2008 @ 9:19 am
9
I didn’t realize MS developed the PNG format. What source gave you that info?
Comment by smick — April 23, 2008 @ 9:35 am
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.
Comment by Peter Gasston — April 23, 2008 @ 10:43 am
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.
Comment by hiro protagonist — April 23, 2008 @ 11:14 am
12
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.
Comment by Yves — April 23, 2008 @ 1:36 pm
13
A quality resource for IE-specific issues is Position is Everything:
http://positioniseverything.net/ie-primer.html
Comment by Jonathan Snook — April 23, 2008 @ 1:44 pm
14
Best Post Ever!
Comment by Jan — April 23, 2008 @ 2:33 pm
15
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.
Comment by Jake — April 23, 2008 @ 3:45 pm
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?)
Comment by Christophe — April 23, 2008 @ 4:05 pm
17
Nice post, but for Heaven’s sake, learn the difference between “its” and “it’s”. You’ve got them wrong every single time.
Comment by RegDwight — April 24, 2008 @ 3:28 am
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
Comment by Matthew Adams — April 24, 2008 @ 4:48 am
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.
Comment by Kai Chan Vong — April 25, 2008 @ 1:53 am
20
The voting results on the right hand side of this page is missing a 1%.
Comment by Mathew — April 25, 2008 @ 3:59 am
21
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.
Comment by Jan — April 25, 2008 @ 8:15 am
22
CSS is just too hard… thanks to IE6 (and 7…)
Comment by Henry — April 25, 2008 @ 8:47 am
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
Comment by David Hucklesby — April 25, 2008 @ 9:18 am
24
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
Comment by Abhishek — April 26, 2008 @ 10:15 am
25
ahh, I so agree - good intelligent article that talks about more than “wahh IE sucks.”
Comment by Sasha — April 26, 2008 @ 7:44 pm
26
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.
Comment by Sumesh — April 27, 2008 @ 1:26 pm
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/
Comment by Geoserv — April 28, 2008 @ 10:02 am
28
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.”.Comment by koew — April 29, 2008 @ 4:00 am
29
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.
Comment by koew — April 29, 2008 @ 4:02 am
30
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)
Comment by Magenta Placenta — April 29, 2008 @ 10:16 pm
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.
Comment by Chris Coyier — April 30, 2008 @ 5:57 am
32
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
Comment by Blaze — April 30, 2008 @ 1:59 pm
33
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.
Comment by Chad — April 30, 2008 @ 4:47 pm
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
Comment by JanB — May 2, 2008 @ 2:27 pm