10 Awful IE Bugs and Fixes

10 Awful IE Bugs and Fixes


10 Awful IE Bugs and Fixes

Introduction

Everyone has a story to tell when dealing with Internet Explorer. As a developer I have faced numerous bizzare problems with IE and sometimes you just want to bang your head against the wall! However, as time goes by, we slowly learn from mistakes (well, sometimes it's not our fault, it's IE!!!) and start to adapt and understand IE's weird behaviors. We have to because there is still a considerable number of IE6 users. The best practise is to continuously test your website from the start across different browsers. It's easier to fix the layout problems from the start rather than testing and fixing it in the end after thousands of lines of html and css code.

There are a lot of campaigns out there to protest against IE6. People who support it are mostly web specialists and normal users just don't seem to care. So, what we can do now? We have to continue to digging around to fix IE6 issues. But, wait for it, there is a Good and Exciting News. Based on the monthly stat from w3cschool, IE6 users have been steadily decline over a few years. Since 2006 Jan 60.3% until now 2009 Aug 13.6%. At this rate, we should able to get rid of IE6 around end of next year 2010. YES!!!

Right, Back to reality, I have listed all the problems that I have encountered before into a list for future reference. I believe this will help you shorten the times spent on debugging the layout inconsistensies in Internet explore.

1. IE6 Ghost Text Bug

Just before I wrote this article, I encountered this bug. It's so bizzare and hilarious. A piece of duplicated text came from nowhere and IE6 display it somewhere in the bottom near to the original text. I couldn't solve it, so I search for it, and BINGO, it's just another IE6 Bug.

There are quite a lot of solutions for it, but none of them work to me (I can't use some of the methods because of the complexity of the website.), so I used a really hacky method. Adding spaces next to the original text seems to solve the problem.

However, from a website called Hippy Tech Blog I found online. The reason behind it is due to the html comment tag. IE6 can't render it properly. The following is a list of solutions he suggested:

Solution
  • using <!—[IF !IE]> tags around the comment.
  • remove the comment
  • in the preceding float add a style {display:inline;}
  • Use –ve margins on appropriate floating divs.
  • adding extra &nbsp; (like 10 spaces) to the orginal text (the hacky way)

2. Position Relative and Overflow Hidden

I faced this problem a lot of times when preparing a jQuery tutorial, because I used overflow hidden a lot to make the desired layout.

It happens when the parent element overflow set to hidden and the child element is set to position:relative.

CSS-Trick has a good example to demonstrate this bug. position:relative and overflow in internet explorer

Solution
  • Add position relative to the parent element.

3. Min-Height for IE

It's simple, IE ignores min-height properties and you can use the following hack to fix it. Credit to Dustin Diaz

This solution works like a charm in IE6, Mozilla/Firefox/Gecko, Opera 7.x+, Safari1.2

Solution
selector {
  min-height:500px;
  height:auto !important;
  height:500px;
}

4. Bicubic Image Scaling

You'll love this one. Does the bad image scaling in IE bothering you? If you compared other browsers and IE, IE's rescaled image doesn't look as good as other.

IE versus firefox

Solution
img { -ms-interpolation-mode: bicubic; }

img {
	filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(...);
}

/* in the iframe element */
<iframe src="content.html" allowTransparency="true">
</iframe>


/* in the iframe docuement, in this case content.html */
body {
	background-color:transparent;	
}

html {
	overflow: auto;
}
/* jQuery Script */
$('#list li').hover(

	function () {
		$(this).addClass('color');
	},
	
	function() {
		$(this).removeClass('color');
	}
);


/* CSS Style */
.color {
	background-color:#f00;	
}

/* HTML */
<ul id="list">
	<li>Item 1</li>
	<li>Item 2</li>
	<li>Item 3</li>
</ul>

5. PNG Transparency

I guess everyone knows this, but I'm going to put it here anyway just for future reference :)

So if you want to use transparent image and GIF doesn't give you the quality you want, you will need this hack for PNG. You have to be aware, if you use a PNG as background, you will not able to set the background position.

Solution
img { -ms-interpolation-mode: bicubic; }

img {
	filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(...);
}

/* in the iframe element */
<iframe src="content.html" allowTransparency="true">
</iframe>


/* in the iframe docuement, in this case content.html */
body {
	background-color:transparent;	
}

html {
	overflow: auto;
}
/* jQuery Script */
$('#list li').hover(

	function () {
		$(this).addClass('color');
	},
	
	function() {
		$(this).removeClass('color');
	}
);


/* CSS Style */
.color {
	background-color:#f00;	
}

/* HTML */
<ul id="list">
	<li>Item 1</li>
	<li>Item 2</li>
	<li>Item 3</li>
</ul>

6. IFrame Transparent Background

In firefox and safari you shouldn't encounter this problem because by default, the iframe background is set to transparent, but in IE, it doesn't. You need to use allowTransparency attribute and put the following CSS code to achieve that.

Solution
img { -ms-interpolation-mode: bicubic; }

img {
	filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(...);
}

/* in the iframe element */
<iframe src="content.html" allowTransparency="true">
</iframe>


/* in the iframe docuement, in this case content.html */
body {
	background-color:transparent;	
}

html {
	overflow: auto;
}
/* jQuery Script */
$('#list li').hover(

	function () {
		$(this).addClass('color');
	},
	
	function() {
		$(this).removeClass('color');
	}
);


/* CSS Style */
.color {
	background-color:#f00;	
}

/* HTML */
<ul id="list">
	<li>Item 1</li>
	<li>Item 2</li>
	<li>Item 3</li>
</ul>

7. Disabled IE default Vertical Scroll bar

By default, IE displays vertical scrollbar even though the content fit nicely in the window. You can use overflow:auto to show it only when you need it.

Solution
img { -ms-interpolation-mode: bicubic; }

img {
	filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(...);
}

/* in the iframe element */
<iframe src="content.html" allowTransparency="true">
</iframe>


/* in the iframe docuement, in this case content.html */
body {
	background-color:transparent;	
}

html {
	overflow: auto;
}
/* jQuery Script */
$('#list li').hover(

	function () {
		$(this).addClass('color');
	},
	
	function() {
		$(this).removeClass('color');
	}
);


/* CSS Style */
.color {
	background-color:#f00;	
}

/* HTML */
<ul id="list">
	<li>Item 1</li>
	<li>Item 2</li>
	<li>Item 3</li>
</ul>

8. :hover Pseudo Class

IE only supports :hover pseudo class for anchor element. You can achieve the same effect using jQuery hover event.

Solution
img { -ms-interpolation-mode: bicubic; }

img {
	filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(...);
}

/* in the iframe element */
<iframe src="content.html" allowTransparency="true">
</iframe>


/* in the iframe docuement, in this case content.html */
body {
	background-color:transparent;	
}

html {
	overflow: auto;
}
/* jQuery Script */
$('#list li').hover(

	function () {
		$(this).addClass('color');
	},
	
	function() {
		$(this).removeClass('color');
	}
);


/* CSS Style */
.color {
	background-color:#f00;	
}

/* HTML */
<ul id="list">
	<li>Item 1</li>
	<li>Item 2</li>
	<li>Item 3</li>
</ul>

9. Box Hack Model

This is the hottest bug in IE. The basic understanding is that IE calculates width differently. Based on w3c standard, total width of an element should be

  • total width = margin-left + border-left + padding-left + width + padding-right + border-right + margin-right

However, Internet Explorer calculates it without adding paddings and borders:

  • total width = margin-left + width + margin-right
For more details, please check out this link: Internet Explorer and the CSS box model Detailed Explanation Solution
  • Use the w3c use standards compliant mode. IE6 or later will calculate the width based on w3c standard, however, you will still having problem for IE5

Or, you can use CSS Hack to solve this problem. All standard compliant browsers will able to read w\\dth:180px except IE5.

#content {
	padding:10px;
	border:1px solid;
	width:200px;
	w\\idth:180px;
}

10. Double Margin Bug Fix

If you have floated elements with margin left and/or right assigned, IE6 will double up the margin. Forexample, margin-left:5px will become 10px. You can solve that by adding display:inline to the floated element.

Solution
div#content {
	float:left;
	width:200px;
	margin-left:10px;

	/* fix the double margin error */
	display:inline;
}

Final words

I hope this article will help you all. Please bookmark it, share it and spread it to the rest of the web designers and developers! :)

Author: Kevin Liew

Kevin Liew is a web designer and developer and keen on contributing to the web development industry. He loves frontend development and absolutely amazed by jQuery. Feel free to say hi to me, or follow @quenesswebblog on twitter.

Share the love

54 comments

Han Spen
Tue, 15th September 2009
Excellent compilation. But the word "awful" is not spelled "aweful". Reply
kevin Admin
Tue, 15th September 2009
oops, thanks for the spelling correction! :p Reply
Amber Weinberg
Tue, 15th September 2009
Won't we all rejoice when IE6 is finally dead? Reply
Nykeri
Thu, 17th September 2009
wow i didnt know about the fitler property for png transparency i always used hacks for ie thanks man Reply
Tyler Herman
Fri, 18th September 2009
Nice compilation. Have run into most of those but some seem pretty bizarre (ghost text).

Also:

http://ie6update.com/ Reply
Michael Wilson
Mon, 21st September 2009
Ah the beauty of IE bug fixing.

Always makes me smile when I see web designers praying for IE6 to die. I would think that is still a long way off yet so just make sure your code is clean and that your clients are educated about progressive enhancement Reply
elshafei
Tue, 22nd September 2009
Eric
Wed, 23rd September 2009
that IMG fix for scaling just made my day!!!!. btw the tab order in your form is incorrect. i should be able to tab from the comment box to the captcha box. Reply
amit
Wed, 23rd September 2009
asdfasdf Reply
JustASurfer
Wed, 23rd September 2009
I stopped supporting IE6 this year and told people "Upgrade, or get lost."

Yes, literally. Why? Because trying to fix these issues is too time consuming, not guaranteed (browser settings vary), and pointless when a (somewhat) better version is out there.

Coders, instead of covering these issues, take a stand and tell these people to upgrade.

Otherwise, you're just enabling these people to keep their browser.

Don't wait until the end of 2010. Make it happen by the end of *this* year. Reply
Ryan Coughlin
Thu, 24th September 2009
Great tips and fixes for stubborn IE. Those are extremely common and a great reference.

Quick and easy fixes. Reply
Check Spelling
Sun, 27th September 2009
I don\'t care much about IE 6 or 7 anymore. According to my analytics it\'s only few % and it get only smaller. But I must say this list is very impressing. Reply
ghprod
Fri, 2nd October 2009
Wow , u have tell all bugs in IE :D

great! nice information!

Thnx and regards Reply
Aria Ariamanesh
Tue, 6th October 2009
Very helpful ;) Reply
Tai Travis
Tue, 13th October 2009
You hit on some IE bugs I have not encountered but destined to lose sleep over in the future. Thanks.
I am always a little wary if putting hacks directly into my main CSS stylesheet. For conditional stylesheet for IE7 and earlier I think hacks are expected.
It is our responsibility as web designers to educate the public about IE6. One way is to use IE6 no more. http://www.ie6nomore.com/ Reply
Online Betting Casino
Sat, 21st November 2009

Betting casino online via the Internet is different in many ways from betting to a game table in a <a href=\"http://bestbettingcasino.blogspot.com \" rel=\"follow\">Best Betting Casino</a>. Most games offered in a real casino can be played online at any time of day or night. Two things you are wanting to crowd around a hot table, and drinks available. There is no constant background noise of the bells
of slot machines or the excited cries of a winner at the craps table. Reply
Kartlos Tchavelachvili
Tue, 22nd December 2009
Thanks for this killer tips! especially #7 and #6

Reply
denbagus
Mon, 28th December 2009
nice information about find bug & fixes Reply
ecommerce website
Wed, 20th January 2010
Thanks for the information..
Please enter here more common IE bugs... Reply
Vipul Mathur
Thu, 21st January 2010
Very helpful article. Reply
freaknboy
Tue, 26th January 2010
Great great great, my favorite IE bug fix tips,
go on ! thks Reply
kaddechi
Wed, 27th January 2010
good website Reply
Web seo specialist
Wed, 3rd February 2010
Thanks for the sharing of such information. we will pass it on to our readers. This is a great reading. Thanking you. <a href="http://www.seochampion.com ">Web seo specialist</a> Reply
Webdesigner
Fri, 26th February 2010
Thanks, good article. It works! Reply
search engine optimization
Tue, 2nd March 2010
Just wanted to say thanks for sharing such useful information. I'll pass it on to the readers of my blog :) <a href="http://www.mediaonepro.com ">Web SEO Expert</a>.
Reply
SEO directory
Fri, 5th March 2010
Great article! Very helpful. Reply
web design yorkshire
Mon, 15th March 2010
Nice fix, thanks for sharing, will deffo use that fix well done. Reply
外汇交易
Tue, 23rd March 2010
Very helpful article. Reply
acne clearing
Mon, 12th April 2010
i like firsfox more.but thanks for share it Reply
Color Business Card
Fri, 21st May 2010
Thanks! your tips are indeed very helpful in fixing IE bugs! This going to be useful for online marketers like me. Reply
UK bingo games
Sat, 22nd May 2010
how if you put posting at one of the my article. i will send to my articles. thank you for your kind attention. Reply
scriptbazaar
Sun, 6th June 2010
thanks for sharig these 10 tips some of them were never known to me. :) Reply
Large Format Prints Expert
Fri, 18th June 2010
Thank you for the info, I actually didnt know anything about this bugs, and actually I think I still dont know anything Reply
ankara WEB TASARIM
Sun, 25th July 2010
thank you.but i cant see your demo page Reply
metin2 yang
Mon, 26th July 2010
nice . the words are useful Reply
khr2003
Tue, 3rd August 2010
"Everyone has a story to tell when dealing with Internet Explorer."

So true.

thanks for sharing Reply
hurda
Thu, 12th August 2010
wery good mozilla Reply
Hali Yikama
Fri, 20th August 2010
First of this type of site we provide users the opportunity because of this beautiful and quality we give our respect. Site concept and sharing are quality thank you. Reply
Buz
Mon, 23rd August 2010
possibility of sharing and social solidarity at a level just fine thank you Reply
Webestools
Sun, 29th August 2010
It a great article, but I don't want to waste my time with IE! I hope IE9 will be better!
Thank you! Reply
Dell Destek
Wed, 1st September 2010
I wish you continued success sharing, thank you Reply
perde
Sat, 4th September 2010
thank you for sharing your site I found useful.
Reply
Perde
Wed, 29th September 2010
All information is exciting and eye-catching.
Excellent. Thanks. Reply
lahmacun firini
Wed, 6th October 2010
Fine was a work and full-time. Thank you. Reply
Gambling Advertising
Fri, 15th October 2010
I am really pleased to post my comment on this blog .I love your blog by the way, I am gonna have to add you to my list of watched blogs Reply
kutu menfez
Wed, 27th April 2011
Thank you for the information. issues very successful
Reply
billur halı yıkama
Thu, 28th April 2011
Shares is very beautiful. Thank you for good information preparers.
Reply
raghibsuleman
Fri, 29th April 2011
Thanks for big help
http://www.raghibsuleman.com/ Reply
EvansCANDICE24
Sat, 21st May 2011
That's understandable that money can make people disembarrass. But how to act when somebody does not have money? The one way only is to try to get the <a href="http://bestfinance-blog.com/topics/mortgage-loans">mortgage loans</a> and just financial loan. Reply
konteyenr
Wed, 20th July 2011
The subject is too interesting, thanks for sharing Reply
hurdaci
Mon, 23rd January 2012
Thank you for your outstanding services and are in the very beautiful work wish you continued success
Reply
Artemisia Moltabocca
Fri, 28th September 2012
I'm having a problem where the background of my blog flashes to black for a few seconds before it loads correctly. Do you have a fix for that? Thanks! Reply
Ch Simhachalam
Wed, 19th December 2012
Very helpful. It gave me confidence to write cross browser. Thank you. Reply
sameena
Thu, 5th September 2013
I need some codes Reply

Leave a Comment

Please keep in mind that comments are moderated and rel="nofollow" is in use. You can use [code][/code] if you want to write codes. Don't spam us :) Thanks!

Advertisement