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:

• 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

• 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

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.

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.

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.

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.

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.

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

• 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.

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! :)

• TAGS:
• Browser
• IE
• Tips