Internet Explorer - the bane of most web developers' existence. Up to 60% of your development can be wasted just trying to squash out IE specific bugs which isn't really a productive use of your time. In this tutorial, you are going to learn about the most common IE bugs and rendering disparities and how to easily squash them or deal with them. Interested? Let's get started.
1. Centering a Layout
Centering an element is probably something every web developer has to do while creating a layout. The easiest and most versatile way to center an element is to just add margin: auto; to the relevant element. The above method will take care of centering the element irrespective of the resolution and/or browser width. IE 6 in quirks mode however decides to handle this in the most unfortunate way possible: by not handling it at all.
Consider the Following Code:
#container{
border: solid 1px #000;
background: #777;
width: 400px;
height: 160px;
margin: 30px 0 0 30px;
}
#element{
background: #95CFEF;
border: solid 1px #36F;
width: 300px;
height: 100px;
margin: 30px auto;
}
The output you'd expect:
But what IE actually gives you:
This is mainly due to IE6 in quirks mode and below not recognizing the auto value we set to the margin property. Fortunately, this is easily fixed.
The Fix
The easiest and most reliable way to center content for IE6 and below is to apply text-align: center to the parent element and then apply text-align: left to the element to be centered to make sure the text within it is aligned properly.
#container{
border: solid 1px #000;
background: #777;
width: 400px;
height: 160px;
margin: 30px 0 0 30px;
text-align: center;
}
#element{
background: #95CFEF;
border: solid 1px #36F;
width: 300px;
height: 100px;
margin: 30px 0;
text-align: left;
}
2. Staircase Effect
Almost every web developer uses lists to create his navigation. Usually, you create the container element, create some links inside and then float the anchors in the direction he wants and calls it a day. Usually. IE though decides to make it a lot more complicated. Peruse through the following code:
<ul>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
</ul>
ul {
list-style: none;
}
ul li a {
display: block;
width: 130px;
height: 30px;
text-align: center;
color: #fff;
float: left;
background: #95CFEF;
border: solid 1px #36F;
margin: 30px 5px;
}
A standard compliant browser renders it like so:
And the IE screen shot:
Not a particularly pleasing navigation if you ask me. Fortunately, there are 2 fixes you can try.
Fix #1
The easiest way to combat this is to float the li elements themselves instead of the anchor elements. Just add this and you should be done.
ul li {
float: left;
}
Fix #2
The second way is to apply display: inline to the enclosing li element. In addition to fixing this bug, it also fixes the double margin bug mentioned below. Purists may not like placing block elements inside inline elements though.
ul li {
display: inline
}
3. Double Margin on Floated Elements
This bug is probably among the first ones a web developer starting out will run into and is specific to Internet Explorer 6 and below. Triggering it is as simple as floating an element and then applying a margin in the direction it has been floated. And voila! The margin will be doubled in the rendered output. Not really something you'd look forward to while creating a pixel perfect layout.
Consider this code:
#element{
background: #95CFEF;
width: 300px;
height: 100px;
float: left;
margin: 30px 0 0 30px;
border: solid 1px #36F;
}
On standards compliant browsers, this is how it looks:
But here is how IE 6 decides to render it:
The Fix
The fix for this specific bug is to apply display: inline to the floated element and everything works as it is supposed to. Our previous code now changes to:
#element{
background: #95CFEF;
width: 300px;
height: 100px;
float: left;
margin: 30px 0 0 30px;
border: solid 1px #36F;
display: inline;
}
4. Inability to Have Elements with Small Heights
As part of creating a layout, you may need to create elements with very small heights as custom borders for elements. Usually, you'll just have to add height: XXpx to the style's declarations and you should be done. Or so you thought. Check the page in IE and you'll probably do a double take.
As an example, look at the following code:
#element{
background: #95CFEF;
border: solid 1px #36F;
width: 300px;
height: 2px;
margin: 30px 0;
}
And the output is just as expected: A 2 px element with a 1 px border.
And in IE:
Fix #1
The cause of this bug is pretty simple: IE simply refuses to size an element smaller than the set font size. Simply setting the font size to 0 lets you have an element as small and short as you like.
#element{
background: #95CFEF;
border: solid 1px #36F;
width: 300px;
height: 2px;
margin: 30px 0;
font-size: 0;
}
Fix #2
The next best way to deal with this bug is to apply overflow: hidden to the element so it collapses to the intended height.
#element{
background: #95CFEF;
border: solid 1px #36F;
width: 300px;
height: 2px;
margin: 30px 0;
overflow: hidden
}
5. Auto Overflow and Relatively Positioned Items
This bug rears its ugly head when in a layout you set the parent container's overflow property to auto and place a relatively positioned item inside it. The relatively positioned item violates its parent element's boundaries and overflows outside. Let me demonstrate. Look the following code:
<div id="element"><div id="anotherelement"></div></div>
#element{
background: #95CFEF;
border: solid 1px #36F;
width: 300px;
height: 150px;
margin: 30px 0;
overflow: auto;
}
#anotherelement{
background: #555;
width: 150px;
height: 175px;
position: relative;
margin: 30px;
}
And the expected output:
And IE's output:
The Fix
The easiest way to fix this annoying bug is to just position the parent element relatively too.
#element{
background: #95CFEF;
border: solid 1px #36F;
width: 300px;
height: 150px;
margin: 30px 0;
overflow: auto;
position: relative;
}
6. Fixing the Broken Box Model
Internet Explorer's misinterpretation of the box model is perhaps its unforgivable mistake. IE 6 in semi-standards compliant mode sidesteps this but this issue can still be triggered by quirks mode.
Two div elements. One with the fix applied and one without. The difference in the width and height is the sum of the paddings applied on each side.
The Fix
I am sure the quandary with the box model needs neither explanation nor demonstration so I'll just give you the fix.
The trick is to set the width normally for all standards compliant browsers, target IE5/6 alone and then feed it the corrected width. This is how you'd usually go on about:
#element{
width: 400px;
height: 150px;
padding: 50px;
}
This now changes to:
#element {
width: 400px;
height: 150px;
\height: 250px;
\width: 500px
}
Essentially, you add the padding to the original width and feed it to IE 6. The fix targets IE 6 in quirks mode alone so you need not worry about IE 6 in normal mode messing things up.
7. Setting a Minimum Width and Height
Setting an minimum height to an element is absolutely imperative when trying to convert a beautiful design into a pixel perfect design. Unfortunately, IE completely ignores the min-height property instead taking the height declared as the minimum height.
Fix #1
The fix is a hack created by Dustin Diaz. It utilizes the !important declaration to make it work. The snippet looks like so:
#element {
min-height:150px;
height:auto !important;
height:150px;
}
Fix #2
The second way is to take advantage of the fact that IE can't parse child selectors.
#element {
min-height: 150px;
height: 150px;
}
html>body #element {
height: auto;
}
8. Floated Layout Misbehaving
One of the important concepts of building table-less layouts using CSS is floating elements. In most cases, IE6 handles this with aplomb but in certain cases it fumbles. When faced with unbreakable content or elements whose width exceeds its parent's width, it causes havoc with the layouts. Let me show you.
Consider this piece of code:
<div id="container"> <div id="element">http://net.tutsplus.com/</div> <div id="anotherelement"></div> </div>
#element, #anotherelement{
background: #95CFEF;
border: solid 1px #36F;
width: 100px;
height: 150px;
margin: 30px;
padding: 10px;
float: left;
}
#container{
background: #C2DFEF;
border: solid 1px #36F;
width: 365px;
margin: 30px;
padding: 5px;
overflow: auto;
}
The expected output as viewed on a standards compliant browser:
In IE:
As you can see, the first div expands itself to fit the content which ultimately breaks the layout.
The Fix
There is no elegant fix for this bug. The only way to save the layout is to apply overflow: hidden to the element but at the cost of clipping the unbreakable content. The layout will be saved but the extra content won't.
#element{
background: #C2DFEF;
border: solid 1px #36F;
width: 365px;
margin: 30px;
padding: 5px;
overflow: hidden;
}
9. Space Between List Items
IE 6 adds vertical spacing even none is specified in specific cases. Let's look at the code first.
<ul> <li><a href="#">Link 1</a></li> <li><a href="#">Link 2</a></li> <li><a href="#">Link 3</a></li> </ul>
ul {
margin:0;
padding:0;
list-style:none;
}
li a {
background: #95CFEF;
display: block;
}
What it should look like:
What IE gives us:
Fortunately, there are a plethora of fixes you could try.
Fix #1
The easiest way out is to just define a width for the anchor tags and voila! everything renders as it should. Declaring a width triggers the element's IE specific hasLayout property. You could instead define a height if you want to.
li a {
background: #95CFEF;
display: block;
width: 200px;
}
Fix #2
The next method is to just float the anchor left and then clearing it.
li a {
background: #95CFEF;
float: left;
clear: left;
}
Fix #3
The third method is to add display: inline to the enclosing li element. This also fixes the double margin bug as noted above.
li {
display: inline;
}
Conclusion
And there you have it: the nine most common IE rendering bugs, and how to squash them. Hopefully this has saved you some blood, sweat and tears while debugging your next creation. I'll be watching the comments section frequently; so chime in here if you are having difficulties implementing the fixes noted here.
Questions? Nice things to say? Criticisms? Hit the comments section and leave me a comment. Happy coding!
- Follow us on Twitter, or subscribe to the Nettuts+ RSS Feed for the best web development tutorials on the web.
Related Posts
Check out some more great tutorials and articles that you might like
Plus Members
Source Files, Bonus Tutorials and
More for $9 a month for all TUTS+
sites in one subscription.
User Comments
( ADD YOURS )Nilks November 16th
Very usefull indeed – bookmarked!
( )Victor November 16th
Thank you!
( )I really need this info
Alan November 16th
Thanks. Very useful for me
( )FiNeX November 16th
I suggest to add the IE6 fixes on a separate CSS and load them only if needed. Some fixes could make the CSS invalid.
( )Lillan November 16th
Yes, that’s a good idea too.
( )keif November 16th
I was totally thinking the same thing, but in terms of brevity, it’s awesome to have them included in one snippet, and those of us (me, you, others) that say “ew, css hacks” know that we can pull them out and into a conditional CSS file for IE.
( )Siddharth November 16th
Targeted loading of the fix is the way to go. No need to feed the fixes to every browser.
chris November 16th
Thank you,..
( )Dave November 16th
nice round up. Even for more experienced coders, it’s always good to have a reminder of IE6’s hacks.
( )Jitendra vyas November 16th
Yes . u r right
( )Ela November 16th
nice post ,man,thanks
Omar November 16th
Thanks for the article. IE6 is probably the browser I always find myself having to code CSS work-arounds for.
IE in general is not probably my least-liked browser. I’d rather use Firefox or Safari and I’m on a Windows.
( )Jonathan Hedrén November 16th
As mentioned, some of these problems will only occur if using quirks mode, so the easiest way to avoid them is using a strict doctype (or the HTML5 doctype).
( )Ken November 16th
If you use strict doctype I think you’ll get into another problems. I go with transitional, it’s more flexible even that it’s not that “correct” as is the strict.
( )Arvii November 17th
100% agree with the strict doctype.
( )Lillan November 16th
Good article
( )Phil Sturgeon November 16th
Don’t forget the magical fix that is zoom:1;. The number of IE issues I have fixed using that one property alone is insane.
Good tutorial, some of us still have to support IE6 at the 9-5 even if we do ignore it on our personal projects.
( )NinjaCrunch November 16th
Nice post. Thanks for this.
( )Joe November 16th
Very useful indeed. Thanks.
( )trs21219 November 16th
Very Nice! Forwarded to our design team
( )Leighton Price November 16th
I know that everyone probably has a favourite (!) IE6 bug, but mine has to be the way that text characters from the last of the floated elements are sometimes duplicated below the last float.
More details about the bug and the fix are found here…
http://www.positioniseverything.net/explorer/dup-characters.html
( )קורס בניית אתרים November 16th
HATE IE. I hope Microsoft will die for this !
How damn this company makes worses products in the world and still make bilions ….
They are piece of SH*T
( )Sid November 16th
Calm down
( )Robert November 16th
Stop being ignorant. I’m no fanboy of Microsoft – I’m a fanboy of UNIX systems, mostly FreeBSD, but that statement was pretty damn ignorant. There is nothing wrong at all with Microsoft, they are trying to bring technology forward, though Apple (I’ve just ordered a 27″ iMac so I’m not bashing) is locking their technologies down and trying to patent everything they develop. Their intentions with IE was good, they wanted to bring new technologies to the web. But they failed, but the only way to success is to fail and learn from that isn’t it? Look at Vista, then came Windows 7 with a lot of fixes, performance mainly.
I just wish that people could stop being as ignorant as they are when it comes to browsers. How hard is it really to apply the work arounds needed? Take pride in your work and just do it.
Microsoft has some truly amazing products, and if it wasn’t for Microsoft the technology would probably have been way slower, and ESPECIALLY programming, you wouldn’t have seen the computer games you see today as an example.
( )iPad November 16th
+1
Eff MSoft November 16th
Being the massive company Microsoft is, I would expect much higher quality out of the gate…
But we are their beta testers of course…shame of Microsoft for continually releasing poorly tested products.
Anthony November 16th
Yes, Microsoft has done a lot for computers and technology on the whole, but IE (and I don’t think anyone is going to disagree when I include not just 6 but 7 in this statement as well) is an utter failure.
They keep ‘fixing’ bugs that allow us to hack around their inability to understand certain instructions while not fixing a lot in terms of their standards compliance on the way. Yes, they took a big step towards it with IE8, but they did it years too late, and left out things everyone wants to use from the CSS 3 spec just because it’s wasn’t finalized – things like rounded corners.
Now, because they refuse to give developers what they want we have to continue hacking away with images, or just take the approach many have chosen and claim graceful degradation. Sorry, IE users, but you get sharp corners because Microsoft is doing the bare minimum years too late.
Alexander Freiria November 16th
#Robert, you’re completely RIGHT!! I prefer browser incompatibilities!!! Makes the people who know them and can work around them that much more valuable… Competition is always good and no one standard is 100% fool-proof.
Learn the rendering engines and you will be better for it, else hire a Web Developer/Programmer and stop your whining.
siberia November 18th
Well, yes, Microsoft’s done a lot for computer technologies but it doesn’t excuse its utter inability to adhere to standards everyone else does. That a company as big as Microsoft prefers to push software with glaringly obvious flaws is mystifying.
Methinks they’ve fallen into the comfort zone of “people will buy it even if it has as many holes as a swiss cheese because we utterly dominate the market anyway”.
And you know what? Kudos for them; they were truly innovative enough to dominate the market, now they’re reaping the benefits.
Siddharth November 16th
IE may suck but MS as a company has really brought out a ton of products I love and adore. Plus game development wouldn’t have took off like it has without DX.
( )Jaime November 16th
I don’t really like most of Microsoft products, but calling the products a piece of sh*t it really uncalled for. Right because Exchange, Windows7 and Office all suck right?
( )Jeremy McPeak November 16th
Be sure not to use XMLHttpRequest or innerHTML. Those are Microsoft inventions and are evil because of it.
( )PandaMaster November 16th
Without Microsoft, there wouldn’t be Halo! or the xbox! aaaaaaahhhhh. I agree that IE sucks and should be boycotted, but to say that about Microsoft is completely uncalled for.
( )BILL November 16th
FIREFOX SUCK
( )Siddharth November 16th
Well, that was truly unexpected.
( )Arti November 16th
Lol with a name as bill, i would almost presume your surname is gates?
.
Sad that IE6 is still alive.. would almost wish that the news would simply announce that you must delete it or u’ll get a ticket, lol.
( )Deoxys November 16th
U 2…
( )Nykeri November 16th
OMG y d hate man?!
( )Jarryd November 16th
Lol troll
I have my beef with Firefox, it’s slow as hell. Most probably because I have a shitload of extensions on it. But what would I do without it? I have no idea.
( )Marc Friederich November 16th
Really nice list … Let’s twit to spread those trics
I’ll save time
( )Deniz November 16th
very usefull. thanks
( )Mark November 16th
For # 8
Why not have #anotherelement first in your code and float it right and then float #element left? Normally, floating #element to the left isn’t even really necessary among most browsers but our friend IE likes to to simply move the left column over without wrapping it so adding “float:left;” will make the left column do what we want while not effecting the other browsers.
( )kl November 16th
Don’t use Quirks Mode and half of these go away.
Remember that Tansitional DOCTYPEs are deprecated. Use Strict DOCTYPE!
( )Leon November 16th
Or just use !doctype html
( )Craig November 16th
You beat me to it.
Craig November 16th
Just use . It’s the shortest way to trigger all browsers in to standards mode (XHTML or HTML). Plus you can validate your page as HTML5.
( )Craig November 16th
<!doctype html>
André Faria Gomes November 16th
Very Nice… Dealing with IE 6 is the worse nightmare of a designer…. Great Tips.
( )Marcelo Kanzaki November 16th
Great! There is one missing though. How to get IE6 to render fixed positioned elements properly?
( )yussi ariefiyono November 16th
Thank you! very useful indeed
( )Siddharth November 16th
Glad you found it useful.
( )Mark Dijkstra November 16th
Why use IE6 people, it’s time to stop the support of IE6
IE6 is a pain in the ass!
( )Robert November 16th
It’s not time to stop support IE6, take pride in your work damn it. If a doctor has a patient that requires some extra work to work with, would he neglect him and say get out of here? No, he takes pride in his work and does what he has to do… Everything can’t be fun, so just do your god damn work. Damn it.
( )Siddharth November 16th
I agree it’s a pain to work with but I can’t just ignore that sector. The statistics on my site says that 14% of the visitors use IE 6.
bill November 16th
What does pride in your work have to do with stopping support for IE6, a browser that debuted EIGHT years ago! This is ridiculous. Any developer that continues to create hack or workarounds for this abysmal browser should lose their job. IE6 won’t go away until we all stop compensating for it. If you work for a company that still has IE6 on their computers then find a new job. If you run IE6 at home, turn off your computer and then throw it out the window. Does the music industry still produce 8 tracks? No! Why? Because better products have come out and replaced inferior ones. You don’t see an 8 track player in your car for ‘compatibility’ reasons for the simple fact that it had it’s time and that time has passed. Give it up.
prodev November 16th
It’s not about taking pride in your work. Damn it. You’re happy to spend hours fixing things that shouldn’t be broken, but MANY PEOPLE ARE NOT.
I take a huge pride in my work as a pro webdev and I still hate IE6 with a passion. Yes I fix the IE6 problems, but it adds HOURS extra work, which pushes up the build costs, and ultimately restricts the design. Damn it.
Why don’t printer maunfacturers make printers that work with windows 98 anymore? Because windows 98 is BLOODY OLD! Sure for a couple of years after win 98 they may have offered a few cheap low-end solutions, but not for long. So they basically say ’screw you’ to anyone that wants to use win98 and print stuff. Why can’t people that build websites say the same?
IE6 isn’t quite as old as win 98 sure, but it’s still pretty damn ancient in browser years. And it’s not as if all the bugs were even fixed in IE7, or indeed IE8. Any browser from M$ is basically crap because unlike nearly every other browser vendor THEY IGNORE THE STANDARDS and they release APPS THAT DON’T EVEN WORK PROPERLY!
DataMouse November 16th
I agree with Bill.
Using your analogy, a doctor would be a fool to turn away a difficult patient.
However, he would not treat that same patient with outdated, clumsy and inefficient solutions.
He would encourage the patient to try newer, better medicines.
As we are the doctors, we should be encouraging our clients to do away with the old and support the new.
http://www.stopie6.com/
DM
Siddharth November 16th
I’ll be dropping IE6 support once the percentage of people using IE6 to view my sites drops below 5%. Until that, they are a demographic I can’t afford to lose.
craig November 16th
“’ll be dropping IE6 support once the percentage of people using IE6 to view my sites drops below 5%. Until that, they are a demographic I can’t afford to lose.”
Fair point, but that doesn’t mean you have to give those 14%(current from above) the EXACT same experience as all those you use more modern browsers.
Support doesn’t have to mean hacks or work arounds, and anyway your page SHOULD be fully read and usable with out any css partially sighted and google-robots are one visitor demographic that i know i care about…
Jaime November 16th
Bill do you actually make money being a web developer? There’s still a big amount of people using IE6, and that’s something you can’t ignore. If you get paid to be compatible, you better be compatible and get of your high horse. Besides, most of this issues are fixed with the correct doctype and a well planed progressive enhancement plan.
bill November 16th
@jaime
Yes, I make a boat load of money actually. And none of it goes towards developing for IE6. Stop wasting your time folks.
Nick Brown November 16th
A more appropriate analogy would be, should a doctor keep prescribing medication to a patient who could cure their own ailment with 45 seconds of effort.
The answer is no, he shouldn’t.
Treat the ailment, not the symptoms.
keif November 16th
While I agree IE6 is a bitch, I disagree it’s time to stop support (this is a matter of metrics, analytics, ecommerce sites, percentage of sales that belong to IE6 users…)
At the same time, it’s time for people to adopt the ideas of putting banners on their pages for IE6 users recommending they upgrade to anything else – IE8, Chrome, Safari, Firefox, Opera, whatever.
( )David November 16th
Even youtube and facebook are stopping their support of IE6.
( )Matt Vickers November 16th
Stopping support of ie6 isn’t a bad thing, you just have to educate your clients as to why you’re stopping support as well as give the user an option to upgrade.
On most of the sites I develop now, I’ll redirect the user to a page informing them that they’re using an outdated browser and provide them with links to download new browsers.
Also, tell them that if they choose not to upgrade, the site may not look/perform like it’s designed too.
It’s along the same lines of people not having JavaScript enabled. You can’t really be innovative and expect to impress/cater to everyone. At some point it begins to hinder forward movement.
( )Robert November 16th
This is to all of you saying that “they shouldn’t have the same experience as someone with an updated browser!”. Ignorant.
For a big company to invest in software upgrade’s it costs millions of dollars/euro/crowns.. This is also one of the problems, the market share of IE6 isn’t due to lazy people it’s has to do with investment. Just to state that for those of you whom seem to think that it has to do with being lazy.
goldendog November 16th
Be a professional…
The Nov numbers are that IE6 is still 23.3% of the browser market. To create a web site that does not support that percentage of people is doing a disservice to your clients. The numbers on my site just dropped to 6% using IE6. Today I added a warning for IE6 that it is no longer supported and gave them the link to upgrade to IE8.
When IE6 drops to 5% then I can do the same for my clients sites.
I try to write clean, validated, strict code that works in the popular browsers.
( )Nice post to remind me of all the little pieces that work. Will bookmark this as a reminder.
Mark Dijkstra November 16th
Euhmmm 23,3 % lol please take a look here
http://www.w3schools.com/browsers/browsers_stats.asp
and see the real stats
Andrew Burgess November 16th
@Mark Dijkstra : If I’m not mistaken, those stats are specific to the W3Schools site, which isn’t really a good representation of the web-at-large.
Mark Dijkstra November 16th
Ow ow ow, no wonder that IE6 is still alive, come on guys IE6 is almost 10 years old
Be smart. dont be a fool that lives in the past
( )Mark November 16th
Here’s the deal though. If you write standard compliant html and css then IE6 is a breeze I very very rarely have to deal with extra css conditional statements. Most of the things that go wrong for IE6 tends to go wrong in IE7 for me as well. The only issue IE6 really has is the lack of png transparency support. So IE in general is a pain but these things are easy enough to get around.
Fynn November 16th
Nice and useful list!
For centering layouts with a fixed width however, I use this solution:
Position: relative;
( )left: 50%;
width: 900px;
margin: 0 0 0 -450px;
David Rojas November 16th
I’m sorry but I think this article is weak, as already pointed out half of these bugs go away just by using a right doctype that doesn’t trigger quirks mode. In quirks mode you’ll have those bugs and a lot more.
( )John November 16th
I Agree. Here is a good article about the right doctype:
http://www.alistapart.com/articles/doctype/
( )Stefan Frank November 16th
Bookmarked! Thanks for this. It is awfull with IE.
( )John November 16th
This is quite helpful. Thank you
( )Andrew Burgess November 16th
Great tips and a fun article to read!
( )Siddharth November 16th
Glad you found it fun to read.
( )Deoxys November 16th
Very nice tutorial. One of the best here I think!!
( )BEBEN November 16th
i dont understand…but i think its a tutorial for web designer…hohohoho great great
( )chetan November 16th
good information for inexperienced people like me. thanks.
( )Robbert November 16th
Thanks for the tips Siddharth
One thing about the “Staircase Effect”: I always use float: left on list items and not on the hyperlinks that are in them, because that wouldn’t make much sense. So I do not think that IE6’s output is wrong or such. It is expectable really (I was surprised to see that the modern browsers do it right)
When creating a horizontal list (for navigation purposes) I always use overflow: hidden on the ul-element, float: left on the li-elements (and of course a specific width). the “ul li a”-elements will have display: block to have the full width of the li-parent. I think that’s the way to go. I was surprised to see this as a problem in the list. (I never test my websites anymore in IE6 though – I always hope my clients do not use it)
Regards.
Robbert
( )Siddharth November 16th
I generally float the li elements but I have a bunch of colleagues and friends who do it the other way. That tip was specially for them.
Thanks for reading.
( )Dave November 16th
Very nice job! I know and use many of these, but there are a couple that I didn’t know or forgot about.
Thanks for helping us with IE, that failure of epic proportions!
( )digikzes November 16th
awesomeness… grt work !!!!
( )Siddharth November 16th
Oooh. Kartik?
( )Leandro November 16th
Thanks, but it’s just one more article that helps us to improve the use of IE6…
But wait. We’re close to 2010, people!
How about simply avoid use IE6 and let our clients enjoy really stunning websites, made in really good time by professionals, designers and developers, that really care about the good use of information and technology?
WE DON’T have to support IE hacks, because WE DON’T have to spend time e brain using IE. It’s always the same. “Here comes another Microsoft’s browser problem. Oh, wait! Here comes another IE bug fix, hack solution.”
Again, thanks for the post, but, we should think about the forest not only the tree. We’re talking about a web browser almost 10 years-old! We have Firefox 3.5, Safari 4, Chrome, Opera and so on.. Even IE 7 is, well, acceptable.
Everybody talk about kill IE6, but it will only be possible when WE STOP SUPPORT IT. No more tests, no more bug solution, nothing.. Absolutely nothing. It’s the first step and also our mission.
Thank you.
( )DaveK November 16th
Microsofts official line is that IE6 will be around until 2014 they are begining the climb down now, but what you have to appreciate is ie6 is commonplace for corporate use, and is ingrained in some very large companies who wont be spending millions of £/$ to replace their systems, to ignore ie6 is to ignore 10% of the worlds web users.
sorry to disappoint you but trying to get everyone to stop support for ie6 wont do anything to bring it to an end. Money talks and when Microsoft and big Business say IE6 is dead, thats when its dead, not a minute before, until that time we as professionals will have to cater for people who use it, some of whom have no choice in the matter.
( )chrisberthe November 16th
Awesome, but the picture of the bug scares me
( )Mohamed Zahran November 16th
Pretty post
I was really looking for such a good post.
Thanks.
( )Erik November 16th
Great tutorial, bookmarkworthy!
( )Cory Mathews November 16th
#2 you should use the display:inline Thats what it was created for. Using float:left feels like a dirty hack to me. I would not consider that the fault of IE.
#4. Again this appears to be correct. How could you add text to the area if it has a height of 2px? You should be setting the font size lower.
#9 another fix is to remove all space between li tags. IE Reads the extra tabs/spaces/new lines and actually places the space. If you remove all the extra space this will disappear.
( )mohsen November 16th
Great article man! thanks a lot. Some of them are rarely used but some are very practical
( )Siddharth November 16th
Glad you found it useful.
Thanks for reading!
( )DemoGeek November 16th
Nicely explained…was looking for a list like this for a while now…bookmarked to the top of the list. Thank you Siddharth!
( )Siddharth November 16th
Thank *you* for reading.
( )Jimb0 November 16th
I’m noticing a lot of companies will be dropping support for IE6 when 2010 starts. I think that is a good date, and I will be charging extra for IE6 compatibility as well in 2010.
( )Evan November 16th
A nice start for people confused by what they’re seeing IE do.
You can learn more IE6 fixes and more depth about the rationale behind them at http://www.positioniseverything.net
( )Evan November 16th
Oh, you did forget a big IE problem for me, and wish you made this a top ten (or eliminated one of the quirks-mode problems).
Getting IE6 to support PNG transparency. There are differing options on how to resolve it.
( )Siddharth November 16th
I was assuming people already had a proper fix that. There are tons of widely publicized fixes for the transparency issue and it seemed rather redundant.
For the record, I use DD_belatedPNG.
( )Ed November 17th
One way is to use Fireworks and save as PNG 8 with transparency. Photoshop doesn’t do PNG 8s with transparency very well. Plus the great thing about PNG 8 is that they are supported natively in IE6. WOO! Save’s the trouble with PNG fixes.
Of course this won’t be good for PNGs with a lot of colours since PNG 8 only supports 256 colours just like a GIF. However for most things it works a treat. Also unlike a GIF (which only allows a pixel to be fully opaque or fully transparent), PNG 8 supports full alpha transparency so you can have a pixel that has an alpha value of 50%
( )Yogi - CMSThemes.NET November 16th
Awesome post. Bookmarked for future reference.
( )Darshana Gunawardana November 16th
This is a great article….. Thanks
( )Captain Betty November 16th
I support IE 6 to a point so the page doesn’t absolutly break, but I’m no longer bending over backwards to make it work 100%. I’m throwing up a “bad browser” notice using jQuery encuraging the user to upgrade to FireFox, latest IE, or whatever.
( )Nykeri November 16th
ohhhhhhhhh ie6 + 7 and their dreaded step of doom MS needs to build IE from the ground up and stop trying to expand on the inferiority that is ie6. Dammit MS support the new age technology instead of holding back production. It’ll make life of a web dev much easier
( )Warren November 16th
Good stuff… I await the day that I.E. stops haunting us – if it ever comes
( )Lex Beelen November 16th
Forget IE 6!!!
( )Luke D November 16th
Some excellent tips here. Definitely saved.
( )Akino November 16th
amazing…
( )gabriela November 16th
good!! Will save me some time for sure! thanks a lot….
( )vsr November 16th
I’ve got a single line of *magical* code that fixes all these bugs:
( )Siddharth November 17th
And that would be?
( )Thantos November 16th
Great review of fixes, thanks, Shiddharth. As usual, your posts are always helpful and a pleasure to read.
As for IE 6 support…As with a lot of you, I wish I could completely write it off. Unfortunately, in my quasi-corporate environment, we have a lot of dinosaurs that refuse to upgrade (or update locally-grown software so IE7+ browsers are supports…I Know, a sad, sad, world). So, we can’t disregard all support for IE6 in our web pages/applications. However, we CAN remind the user to upgrade ASAP, and we do so with nested IE rules:
Some portions of our website cannot be viewed properly with Internet Explorer 6. For security purposes, pllease upgrade to Firefox of IE7-8 …Blah blah
We have had good results with this method, as our users get tired of the annoying message and usually upgrade as soon as they can (we provide the upgrade paths).
I do admit that IE6-related problems get the back seat to other, more pressing problems. This also helps to “gently force” users to upgrade.
Regards,
( )Thantos
Siddharth November 17th
Thank you. Glad you found it useful.
( )Ant November 16th
To fox «wrong» model (which I like more, by the way). You need to use standart or almost standart doctype.
I don′t recommend to use display:inline for navigation buttons, because button only will be clickable on text.
I prefer to use conditional comments and separate css file for ie.
10th common bug: if list bullets set with background image, they sometimes disappear. Solution:
( )zoom:1
someone November 16th
very good tutorial… thank you so much you saved me
( )Abhijit November 16th
Most of the CSS problems related to IE are due to the IE specific hasLayout property. If you are using an IE specific style-sheet then you can use the IE specific display:inline-block and zoom:value properties to solve problems that arise due to hasLayout.
( )Tanish November 16th
Nice job and thanks for pointing out those Bugs with IE, as most of us work with the latest versions; most probably FF , Safari or Google Chrome (It’s also good).
It’s just toooooooooo easy to overlook these bugs as we might just forget to do that once in a while. Hopefully reading tutorials like these can remind some of us of the old IE6.
Try IEtester (http://tanish.trixsolution.com/ietester.html)
( )Aaron November 16th
If you code properly a lot of the IE bugs can be avoided. One thing that certainly helps is if you use a global reset on everything within your stylesheet. You would set the border, padding, and margins all to 0. You would also want to set up the proper doctype in your HTML.
…also one thing that bugged me was the centering issue with IE. To center all you have to do is use “margin: 0 auto”. I’m not sure why there was so much code in the example above.
( )Siddharth November 16th
Not with IE6 in quirks mode. In standards mode, it renders everything as it should.
( )Juan C Rois November 16th
I read the entire thread of comments and I’d like to add my 2 cents to the discussion:
First: Thanks Siddharth for the article, as always your contribution is appreciated.
Second: Many people here were complaining about IE6 and I admit that I hate it too, it is a really bad browser and I wish it would go away sooner rather than later.
HOWEVER, I believe everybody here is missing the big picture. I HATE Internet Explorer 6 (7 and 8 are not so bad), but because of the fact that I had to always find a solution or hack for its many flaws, in the long run it has made me a better developer/designer.
I believe I’ve learned a whole lot more about HTML and CSS by getting obstacles thrown at me by IE6 and try to find a way of fixing them, than if everything would have worked perfectly with every line of code I write.
On the other hand, It bothers me a great deal that I’ve had been ignored by my clients when I tell them that they should upgrade their browsers, not only because it saves everybody a lot of headaches, but it’s mostly because they need to realize that a website designed to comply with the latest standards will have a longer life span, than a website designed to comply with a browser that’s 8 years old.
It is basically going backwards and my clients just don’t seem to care.
Interestingly enough, I’ve been very specific telling my clients that I don’t support IE6, but honestly I always end up fixing the display issues in IE6 because it’s my responsibility as a developer to offer a product 100% functional.
In the end, sorry guys but we’ll have to deal with it for as long as it is around.
( )Benjamin Reid November 16th
I thought I knew of all the IE fixes but alas I came across the ‘5. Auto Overflow and Relatively Positioned Items’ bug today, thanks for posting, sorted it out!
( )Siddharth November 16th
Happy I could be of help.
( )BloggerThemes November 16th
Great post.Thanks a lot
( )Tom November 16th
7. Setting a Minimum Width and Height
( )where is min-width?
accessoire November 16th
This article is SO overdue on this site! Thanks a lot
!
( )Design Informer November 16th
Cool! I hate IE. A lot of times, I don’t even bother, but with this list, it should be a lot easier to deal with the IE problems.
( )cardeo November 16th
great post, glad someone put these all together in one place
( )Ismail November 16th
Idea: Just don’t support IE 6!
( )Siddharth November 16th
Bad idea. May work for small blogs and so but for stores and such, you wouldn’t want to ignore a big segment of the market.
( )Niklas November 16th
Really superb post. Thanks a lot!
( )Marko November 16th
This is just unbelievable that someone even consider support IE6 these days! That browser is over eight yrs old + it might be worst browser ever.. So WHY? Why even bother? It would be understandable if year would be 2004!
Stop supporting IE6, quide IE6 users to upgrade theyr browsers.
The end..
( )amega November 16th
thank you, underlined something on your own
( )ShadowAssassin November 16th
Seriously…Who uses IE 6…
…I love this article however, I would not waste my time on fixing a problem in which is may only affect about %5 of all my website users…I mean, what’s so hard about upgrading to IE 7, or 8, or even Mozilla Firefox?
If they have a bad experience using the site…They can look at the browser..
P.S: I know that some schools or workplaces may have to use IE 6 for whatever reason, but I am saying, you can’t really moan at people who don’t fix these IE 6 bugs, because its really a waste of time, I mean, even Youtube is not going to support IE 6 soon, so that does show you something
( )Leandro November 16th
Agreed.
( )Fynn November 16th
@ShadowAssassin,
But what if your client pays a lot of money for a website, say 10k, and during the presentation of the new site to him/her the company uses a computer with IE6 on it..
That is not professional, and I’m pretty sure the client will demand IE6 compatibility for his money. Even though only 5% still uses IE6.
On the other hand, when talking about personal sites on small scale (as you seem to mention), I would not bother fixing IE6 bugs either.
( )Siddharth November 16th
Fynn has a point. You don’t want to tell your high paying client that the site will look icky to 10%+ of the visitors.
Robert November 20th
You do know that Youtube is owned by Google? Google has their own browser I’m pretty sure you know that. It’s called marketing and they are pretty smart. I’m almost certain they will have a prompt asking to download Google Chrome if they have IE6.
( )erkasoft web tasarim November 16th
IE6 still exist. because many people use windows xp. IE6 is default browser in windows xp.
( )Frank November 17th
Really crazy: “IE6 still exist. because many people use windows xp.“. Upgrading? No problem…
( )You could give your users the hint to upgrade to a decend modern browser, which is also more secure as IE6.
Kelly November 16th
Excellent post. Thanks so much for sharing!
( )Matt B November 16th
It is finally nice to have an article like this one. I have to look hard to find a good article on IE6 bugs and fixes, and this one covers all of the issues I have ever had!
Well done, Siddharth!
( )Jarrid November 16th
For 1. Centering a Layout
Setting “margin: 0 auto 0 auto;” on the centered element will work and save you from have to use text-align: center; on it’s container element.
( )Connor Crosby November 16th
Curse you EI6!!!!!!!
( )Pavol November 16th
Most of the users using IE6 are doing so from work, where they have IE6 as part of their network. In a way, these people probably should not be browsing the Internet in the first place
( )But seriously, there is no need to support IE6 in many cases. But you have to look into what the project is about. If I sell office supplies, I will make damn sure that my site works on IE6, as many companies using IE6 will be ordering from me. If I have a blog about how to become and affiliate reseller of office supplies, I probably would not care about IE6 too much.
Still, you need to remember that you are responsible for the results. If your (in)action makes your client lose money, you are in trouble and excuses that IE6 is an old browser will not work. So if you chose not to support IE6, make sure your clients know about it and it is written in the contract. If you don’t, make sure your web site works in IE6.
Max November 16th
I wish I’d had such a well arranged IE6-CHEAT-SHEET ages ago!
( )Jarosław Dobrzański November 16th
I personally had problems with almost all of the cases described there. Nice collection
( )Andrew-David November 16th
This is great! Thanks a lot~
( )Jeremy McPeak November 16th
Great list! =)
( )Nicolas November 16th
I think its better to use IE Stylesheets rather than hacks
( )Belinda November 16th
Fabulous post – thanks for all of these. I design using Firefox and/or Chrome (work computer vs home computer!) and then once I’m happy with it all, I spend another few hours IE-fying my work. It sucks, but it’s necessary. I agree with those above who’ve said that once their visitor stats drop below 5% of IE users, they’ll move on.
( )Tim November 16th
Honestly, IE6 is a breeze and like someone said above, if you write proper HTML/CSS then IE6 isn’t that painful. All you have to do is remember either height: 1%, display: inline or position: relative will fix the issue. If not, then you need to rethink the way you have coded.
This in no way implies that all browsers should be equal, we know that the common browsers render completely differently in some situations.
If you know an app or a feature will be difficult to code for IE6, don’t make it for IE6. It doesn’t mean your shouldn’t deliver your content to the user in a well formatted website.
( )Aaron Isaac November 16th
I spend so much time at work trying to code my way around IE6’s bugs. Our graphic designer and I are working on my boss to convince him we can begin to move away from supporting IE6, but until then this article will save me some hassle I’m sure.
( )chris November 16th
Im using a .gif background on my website, background: transparent (url/images/wrapbg.gif) repeat-y center; the background/image is properly display in Firefox but when i open it in IE7 the background image didn’t repeat.
( )You can check it out at my site try to use firefox and IE7.. hope you can help me guyz.. thank you
Peter November 17th
Your coding seems all wrong, hopefully this will help.
use:
background: url(”/images/wrapbg.gif”) transparent center top repeat-y;
If you are adding a background onto the body you shouldn’t really use transparent as it will default white – maybe put the colour that matches your “filled” colour in the .gif. When your site loads, if the background image “pops” in or doesn’t load straight away there won’t be a big difference when the image loads.
hope that helps.
( )IgnacioRV November 16th
Thanks Siddharth! This post goes directly to bookmarks, I was needing a glosary of solutions for common IE Bugs ^^
( )Siddharth November 17th
Glad you found it useful.
( )PandaMaster November 16th
The only reason IE is still around is because everyone keeps making these hacks and special techniques to get rid of completely ridiculous bugs. BOYCOTT IE. I found this site pretty amusing http://crashie.com/ and useful if u want to mess with IE users
( )joe November 16th
Well, I’m with you 100% but the stats are a bit disappointing.
http://www.w3schools.com/browsers/browsers_stats.asp
A decent piece of the pie is being chowed by ie.
( )tutorial blog November 16th
good tutorial
thank
( )Mike November 16th
Ha, I was designing websites in 1997 – you think you have problems now!
( )Siddharth November 17th
We’d love to hear those stories.
( )Irene November 16th
Wow
( )Useful tut!
Mike November 16th
Ticketing / Fining users for using software that’s not compliant with the current standards.
Especially when the software doesn’t cost you any extra $ to upgrade….
Now that’s an idea!!
( )Vishal November 16th
good……….
I face a problem for double padding like it take double margin, I haven’t got solution for same. Have you face this problem?
( )Indrek November 16th
Excellent article! It’s always been a waste of time messing around with IE. Especially when every version of it renders the code differently.
( )Zoran November 16th
Thank you for this, as much as i hate IE6, i must test all of my sites in it, cause here in Macedonia a good percent of the customers are using it, so this was really helpful indeed. Your tutorials here are among the best ones, i like your creativity a lot. Keep up the good work.
( )Geza November 17th
Thank you! Really useful!
( )Canada Web Solutions Company November 17th
hey,
Thanks for this nice article…
I’ll always has to fix ie6 problems in all designs i develop… but i think, it will be easy to incorporate your tips at the time of developing xhtml/css… It will save my lot of time..
thanks for it. Bookmarked.
Quick Link Now
( )Xcellence-IT November 17th
good tips.. fixing for IE6 is always time consuming.. but I’ll be saving it from now.
Thanks
( )tehkemo November 17th
Thanks, great article, bookmarked!
( )Stephen Webb November 17th
This is a very useful article and one I will be bookmarking for future usage. We all know the hassle of Internet Explorers bugs, and how much time it takes to fix them, so having a good reference like this on hand can save a lot of time.
As for the ongoing usage of IE6 and it’s endless bugs, I’d have to say that it’s simply a case of technology being superseded and whilst support for it should continue for possibly a few more years, there really needs to be a point when this is stopped, simply because as long as support is continued people will continue to use the software.
IE 6 is now 8 years old, in technology terms this is ancient and from a previous era of the net. Simply put it was not built for the net of 2009, and along with the various security scares which regularly pop up, this is a good enough reason to begin fasing out support.
( )Matthijn Dijkstra November 17th
Geez, only read the first and imho its useless… you know why? You talk about ‘quirks-mode’ and that just should never happen, it only happens when there is no good doctype… so what would be the error in that case?
You guessed it, the ‘no-doctype’ is the error. So to fix it, you should add the correct doctype, and then margin: 0 auto; works just like expected.
IE behaves much better if a valid doctype is present.
( )Siddharth November 19th
There are plenty of ways to trigger IE 6 into going into quirks mode even when a doctype is specified.
( )Waheed Akhtar November 17th
Thanks for this post. Most of the hacks are simple and very well known to everyone.
( )Gabor Lippert November 17th
Hey that bug below the IE logo is really a disgusting one!
( )Thanks for the article, it’s just that I needed for my actual work.
Banago November 17th
Cooool collection – thanks very much!
( )Stephen November 17th
This site is great, and there is a great mix of hardcore developers, and those who are aspiring to make their first website from scratch.
Given that, in any online community there are also some huge egos that run around (mainly because it is easy to be 10 feet tall on the Internet)
My advise to any beginning developer is simple…write CLEAN code. Understand what a doctype does, the difference between block and inline elements, and for gods sake use something other than !
If your code validates – chances are you will not encounter many of these issues. I can’t tell you how many times something as silly as an unmatched tag went unnoticed – only to be caught by the validator.
Now…regarding IE6 support…
It’s hard for us to understand, but end users are not developers. End users are however who pays my bills, so regardless of your opinion on legacy browser support – I would highly advise expressing it with a client. 15%(ish) of the world still uses IE6. An almost equal amount still use IE7. It is not time yet to slap them with warning messages as if they were using netscape 2.0.
To the person who said…
“Exchange, Windows7 and Office all suck right?”
My answer would be yes. The fact that open source solutions offer not only a more stable environment, better features and are FREE is a bit mindblowing. Given the popularity of open source, I would expect microsoft to pick up the pace.
Anyway – happy coding!
( )-Steve
aryan November 17th
I highly recommend using separate stylesheet for IE 6. Link it using IF IE6 condition(you can Google for it). I don’t think using these trick in the same stylesheet would be easy to manage.
For example- To fix double margin issue on floated element, I put floated side margin to 1/2.
You’ll have more flexibility and only IE will read those style rules.
( )RaDe November 17th
Great article
Thanks
( )Roy Ho November 17th
Nice refresher!!
( )desi November 17th
Thanks
( )very useful
meyvetabagi November 17th
Nice collection. Thanx
( )barat November 17th
Well … IE6 is fr users who doesn’t know how to use PC and have old Windows XP or older.
I do this … and I’m happier 
( )One benefit is that … IE6 users almost always have JavaScript ON.
Thanx to this fact .. we can just use ie7.js fix (or ie8.js) and doesn’t even care IE6 users
Ignacio November 17th
Good tutorial layout, straightforward
( )dj November 17th
A complete rehash of tired old info, most of which already appeared in these pages. Surprised net tuts paid for this, yet again.
Additionally, you rarely differentiated which IE you were talking about generating much confusion and foolish comments. IE6 is NOT the same as IE7 and/or IE8. Currently, I have as much difficulty remembering and navigating through Mozilla quirks as I do IE8 – neither of which are complete.
IE6 is phasing out – while many of us can pontificate in our ivory towers, there, none-the-less are many people (through no REAL intend of their own) are not able to switch. I think most of us should be able to get off our high-horses long enough to have some sensitivity to the souls who are stuck with IE6 and not completely destroy their internet capabilities.
( )aryan November 18th
I agree.
( )Siddharth November 19th
I can’t make you change your opinion but I thought a quick list of IE bugs and fixes would be a useful addition to Net Tuts and from what other people have said, I think I am right.
Thanks for reading.
( )Alon November 18th
main point: DONT USE IE6.
instead of fixing bugs in this browser, just ignore him and let him rest in peace.
IE6 R.I.P
( )Matt Litherland November 18th
LoL couldn’t of seen this article at a better time. I’m about to debug this IE Monstrosity!
http://www.vatic.co.uk See it in Chrome perfect, See it in IE7 LoLs
( )Jayaprakash November 18th
You’ve missed vertical alignment bottom position bug of IE (<=IE7)
( )Sam Logan November 18th
Bookmarked and recommended, one of the most useful web design article I have ever read. I have used the majority of these fixes in the past but other have saved hours of testing. Thank you Net Tuts, keep up the good work.
( )Kiran November 18th
great Thanks alot.. Im new to web design i want to become master can u suggest me hoe to practice…
( )Andris November 18th
Even though I knew all of the hacks I didn’t think of them in my last project. IE 6 is so outdated to me, but there’s still a lot of people using it. So I guess I have to check the site once again.
( )aravind November 18th
Really….!!! Nice…….Thanks…..
( )sam November 18th
thanks very useful and I hate ie
( )Ken November 18th
for centering the layout in IE I’m using:
#element {background: #95CFEF; text-align:center; width:300px; height:100px; position:absolute; top:50%; left:50%; margin:-80px auto auto -125px; padding:50px}
For the margin and padding you will have to calculate the values by yourself. I’m too lazy for doing math today
text-align: left; it doesn’t make any difference, for me at least.
( )underpk November 19th
great post! always have a lot problem with IE6 :S
( )Aravind November 19th
This is very useful…..Thank you so much
( )Phil Gapp (Kneeskrap3r) November 19th
Thanks! This is a good (if fairly basic) explanation of some quick fixes. I like the overflow: hidden for the small height portion of the tut… works a charm
( )Edison Leon November 19th
That’s one scary bug
( )p-ter November 19th
It’s a ggooodd article….
so thankfull
( )chovy November 20th
I would love to see a Javascript version of the 9 most common IE javascript bugs
( )