By browsing this site you agree to our use of cookies. Ok. Close

Internet Explorer 6 bugs and fixes

Internet Explorer 6 is a real pain for all web designers and developers. And as far as such big amount of users still use it for whatever reasons, we have two choices: deal with it or ban it.

The perfect scenario is that all web designers and developers around the world stop supporting IE6 so that users will finally upgrade to recent browsers  if all the sites on the web look awful on their screens. This is however difficult to achieve, and even when we have 2009 now and IE8 is released, we can only dream that IE6 is dead.
For those who still need to spend hours on fixing IE6 bugs, in this tutorial I prepared a list of some of the common issues.

Double margin in IE6

If you have floated element with a margin property, IE6 will double the margin and destroy your design

Solution: add { display:inline } to your element

PNG issue

As IE6 doesn’t support transparency in PNG files, you will see that your images look beautiful in IE7+ and in FF, but in IE6 they are in complete mess. There are two choices: use imperfect .gif instead or fix transparency bug in IE6. There are many ways of fixing transparency in this buggy browser, from adding filter rules into css files, to add javasript codes. And not all of them work on every website.

Solution: The fixes I found useful and working on most of the sites are:

Unit PNG Fix

IE PNG Fix – TwinHelix

But definitely the best one is DD_belated PNG fix, it covers most of the common issues, like background image position and more:

DD_belatedPNG

Fixing other differences

There is quick way of fixing small differences between browsers, however this method doesn’t validate:

add to your style sheet:

*property: value; (for IE7 mainly)
_property: value; (for IE6 only)

example: { *margin: 10px; } or { _margin: 10px; }

To avoid using properties that are not valid, you can create seperate style sheet just for IE7 or IE6 fixes instead by adding conditional statement to the head (this line will be read only by IE6):

<!–[if IE 6]>
<link rel=”stylesheet” type=”text/css” href=”/css/ie_fix.css” />
<![endif]–>

Comments are closed.