9 Most Common IE Bugs and How to Fix Them
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.
Enjoyed this Post?
Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!
By Siddharth
Getting Good with JavaScript
Learn how to liven up your webpages, from start to finish. Veteran Nettuts+ author Andrew Burgess helps you Get Good with JavaScript.
Join our newsletter!
UberMenu - WordPress Mega Me ... only $16.00 
RoyalSlider - Touch Content ... only $20.00 
STUDIOVS - More
Web Basix
Just getting started? Start with our basix tutorials on the fundamentals. View All Basix Tutorials
Create a Tutorial, Get Paid!
Have something to teach the world? Want to earn money doing it? Tutorials, screencasts, and articles published here on Nettuts+ are largely contributed by readers just like you! We'll pay you great money for good content. Find Out More
good good too good!
Thanks for the tips,you was very clear and helpfull!
Thanks for the tips,helpful a lot my friend!
very good
Hello,
I’ve some javascript problem with IE7.
I’m using javacsript time intervals, but I get bad results when browser is minimized.
I’ve some iframe which needs to update, but I cannot see any iframe update while browser minimized.
Does someone familiar with this issue?
Any suggestions?
This is helpful, although wouldn’t it be easier to just discontinue IE? Maybe that would be too easy ;)
I guess it’s kinda like the phone carriers, Instead of claiming who has the best coverage or fastest 3g speed, why don’t you fix all problems and have the best and fastest of everything, then you’ll be the number one carrier! Hmmm…
I hope one day we will have a world free from IE6, until articles like this make life so much easier. Many thanks!!!!
really useful
thank you very much for this absolutely useful and detailed tips.
shared.
if IE6 is evil you are my Hero Thank for this tutorial ^^
another ie6 hater. thanks for the share!
#element,#anotherelement {
background: #95CFEF;
border: 1px solid #36F;
width: 100px;
height: 150px;
margin: 30px;
padding: 10px;
float: left;
}
#element span {
position: absolute;
}
#container {
background: 1px solid #36F;
border: 1px solid #36F;
width: 605px;
margin: 30px;
padding: 5px;
overflow: hidden;
}
______
http://www.purityland.net
i add to text and set position to absolute is work for me ^_^
[div id="container"]
[div id="element"][span]www.purityland.net[span][/div]
[div id="anotherelement"][/div]
[/div]
Something seems to be up. I can’t see the images. No matter what browser I use. Please fix this. This is the best illustrated tutorial I’ve been able to find.
Great article. I actually came here to find out how to fix the fact that IE6 and IE7 indent lists differently. That might make a good addition to the article. However I had an immediate application of the solution for the list-gap problem, and for that I’m extremely grateful.
Thank you so much for this article! Saved me so much headache and time!
I need help with an IE bug urgently. i am creating a website for a client. In the sidebar there should be the contact details but in IE and also Opera it has got a bug… in google chrome it works fine… Please help;
URL: http://swenflea.com/north-recruitment/
Please please help
Thank you so much for this article!!!
too good! thanks!
just thanks!
hi thanks to this post………. very good collections and info. Really useful for me…….
Thanks,
Mani…
this will save me a lot of time in my next projects. thanks!
I wish I read it before I had implemented my last web-page :-) Thanks a lot !!!
Thanks a lot. This really is a great info and easy to follow. I have virtual PC on a mac. It takes forever to load. This guide saved me so much time already.
So, thanks again.
S
Very well written, but I missed one really nasty bug.
Problem: div’s with background set to transparent.
Solution: setting a transparent gif as a background url.
Thanks for the great tutorial !
Thanks for all your help guys. I couldn’t work out for the life of me what I was doing wrong which a lot of you were saying you had got it to work.
1. text align: center the div with width defined and margin: 0 auto
2. text align: left the containing div
3. Make sure you are using the correct doctype
THIS IS TO BE SAID REALLY A GOOD AND VERY USEFUL ARTICLE…
*****************************************excellent******************************
Thank you very much for a very informative article. IE is the bain of my life, I waste hours trying to rectify IE 7 errors. Hopefully this article will help me sort through some of them.
Cheers
Thanks. It’s helpful. = )
Also.. my problem with iPhone…
In browser all perfect but in iphone going down… for
Thank you.
Excellent article. Thanks for your insight!
I will apply these fixes on my site. Hopefully, it will work for me.
Great job! I want to add that most of my problems were worked out when adding the DOCTYPE declaration that I sometimes forget.
Hi, did you know why IE9 can´t render some CSS styles, things that I can see on chrome or FF in the layout do not appear in the IE9, but in the IE8 they do apper.
When the site start to load the item like type appear and suddlenly it just desappear. it only happens on IE9…
thank you.
DID NOT WORK FOR ME!!!! I DO NOT KNOW WHY
I’ve been looking for an answer to a problem that has occurred since updating to IE9 regarding a menu. It worked fine in 7 & 8 and still works great in FF and Chrome. But IE9 displays what should be the hidden sub-menu items and I can’t determine what the cause is.
To demonstrate, use IE9 at http://www.integrityautorepair.com and you’ll see that 3 of the five sub-menus display when they shouldn’t (check in FF or Chrome to see they do, indeed, hide until hover). The last one is hidden but the code is identical to the other 3 so I don’t know why. In Chrome and FF it works just peachy. I’ve experimented with a few test solutions but nothing makes those disappear until the hover. I’m hoping that one of your solutions posted here would apply as they are similar in nature.
Any ideas?
Anyone help me with this. I have amended the theme layout – works fine in FF Safari and Chrome but falls apart in IE and looks very different depending on which version of IE is used. I think its the css box problem but cant see where I ve gone wrong.
Thanks
I am new at this so any suggestions gratefully received.
Fixed it guys – hadnt closed off the button tag in my form. Thanks anyway.
I think Microsoft will get the message if all web developers set their sites to show an incompatible page for an IE user and direct the user to upgrade to a standards based browser like Safari, Chrome or Firefox.
We’re in control you know!
What version of IE is this based on? Now that IE9 is “standards-compliant”, have all of these issues been solved?
If only it were so easy. That would require every user to update their Internet Explorer browser to version 9, and that would require all XP and Vista users to update to Windows 7. Meanwhile we are stuck with these bugs for IE6 and IE7.
Actually, you can center a layout easier by using margin:0 auto. Or margin-right and margin-left:auto.
Thanks, this article was really helpful! I was struggling with IE, but added some css magic to divs and now it works. I presume these two lines did the thing:
float:right;
text-align:right;
display:inline;
Thanks for your quick easy steps for resolving IE based issues.
God bless you !!!
:)
and happi new year 2012
Gr8 work!!! IE9 sucks big time…
#container {
width:75%;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
background-color: #FFFFFF;
}
#header {
width:100%;
height:110px;
position:relative;
background-color: #e6e7e8;
margin-top: 10px;
padding-bottom:1px;
}
#header {
width:100%;
height:110px;
position:relative;
background-color: #e6e7e8;
margin-top: 10px;
padding-bottom:1px;
}
#divider {
background-color:#FFCC99;
height: 6px;
width: 100%;
}
#container {
width:75%;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
background-color: #FFFFFF;
}
I have a problem with the above page, the code snippet shown is part of a bigger page. I am suppose to host it on an IIS server and view through I.E9, when i view on the local machine, and through a path to the server directory, the page appears fine. But when its viewed through http on the IIS server, the header appears with a white background even though i set a color. The background shows through only on the margin as i have an image covering the rest of the header div.
Please anyone with an idea of whats wrong should help as soon as possible.
Thanks alot guys but i’ve figured out my question before it was moderated :-)
It was a problem with the rendering engine to be used by the browser.
This line tells the browser to render with the IE8 engine. Which solves my problem.
Thx so much for your article. As an extra bug to add, is the background flicker on IE 9, having a div styled with a big background img (it doesn’t matter the size of it) makes the page flicker every time you enter it. I’ve tried all sorts of workarounds, like setting the far future expires on the htaccess, removing the etags, using php flush(), and all sort of codes like this one: (not necessary all of them at a time)
try
{
document.execCommand(“BackgroundImageCache”, false, true);
}
catch(err) {}
Etc, none of this appears to work :/ Do you know of any workaround for this kind of issue?
Here is a site that i found with the exact same problem: http://www.isourcedigital.com/en/index.html
Seems that this site flickers even on chrome but not on ffx, though on IE is worst.
I have given table width: 100% , which works fine in Firefox and other browsers, but in IE6 table width is just not following any css rule and expanded as the text in it.
Can anyone tell me how do i fixed that?
regards,
Hi every body,
Can somebody help me with the following site.
Http://myremodelusa.com
It looks perfect in both Chrome and Firefox. But it sucks in IE. Seems like it has some style issues. I did this site on wordpress. It will be great help if some body can help me with it. Thanks indeed.