Ultimate Collection Of IE Fixes

By Julia Khusainova • December 11, 2009 • Posted in Development, Tutorials3 Comments »
Ultimate Collection Of IE Fixes

IE is a headache for web developers all over the years. You never know what this browser will come up with next time. I remember those days when IE 6 was nearly 90 % of all web navigators. There was a lot of fixes annd tricks to overcome IE challenges. There was no way to avoid this if you wanted to fetch the web audience as much as possible.

Nowadays we have the following:
Julia Khusainova - Ultimate Collection Of IE Fixes


Statistics provided by W3Schools

So it’s obvious that there is still a necessity of IE to be supported. I this post I’m going to present a list of known and unknown IE bug fixes all the time. I will constantly update the list so stay updated!

Conditional comments

This is usual way to apply styles to Interner Explorer only (or any other particular browsers). Using conditional comments you are able to avoid unnessesary file loading if the user agent is not the one in the comments.

Consider the following code:

<!--[if lte IE 6]>
	<link rel="stylesheet" type="text/css" href="png_fix.css" mce_href="png_fix.css" /><![endif]-->

<!--[if IE]>
	<link href="ie_only.css" mce_href="ie_only.css" rel="stylesheet" type="text/css"><![endif]-->
<!--[if lt IE 7]>
	<link href="ie_only.css" mce_href="ie_only.css" rel="stylesheet" type="text/css"><![endif]-->
<!--[if !lt IE 7]>
	<link href="ie_only.css" mce_href="ie_only.css" rel="stylesheet" type="text/css"><! <![endif]-->
<!--[if !IE]>--> <!--<![endif]-->
<!--[if gt IE 6]>-->  <!--<![endif]-->

Conditional comments are known to be safe-to-use mean to fix IE bugs. Comparing to all those tricks shown below they are considered to be the more standard-compatible way.

General CSS hack for IE

“*” can be used as the inline hack for IE 6+

* html {
padding:0;
}

p.header{
*margin:10px;
}

“_” can be used for IE 6

p.header{
_margin:10px;
}

html>body can be used for IE 7

html>body p{
margin:5px 0;
}

IE 6 and below

* html {}

IE 7 and below

*:first-child+html {} * html {}

IE 7 only

*:first-child+html {}

IE 6 PNG Fix

In case you forgot that “nice IE behavior”, I should remind you that IE6 does not show up transparent regions of PNG images. This is why IE6 cannot recogonise the alpha filter option. And in the image area where we should have transparency we will see that ugly grey color.

So you have to come up with AlphaImageLoader analog.

* html img,
* html .png{
position:relative;
behavior: expression((this.runtimeStyle.behavior="none")
(this.pngSet?this.pngSet=true:(this.nodeName == "IMG"this.src.toLowerCase().indexOf('.png')>-1?(this.runtimeStyle.backgroundImage = "none",
this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.src + "', sizingMethod='image')",
this.src = "transparent.gif"):(this.origBg = this.origBg? this.origBg :this.currentStyle.backgroundImage.toString().replace('url("','').replace('")',''),
this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.origBg + "', sizingMethod='crop')",
this.runtimeStyle.backgroundImage = "none")),this.pngSet=true)
);
}

The code initially provided by KomodoMedia

!Important identifier

The problem with the !important identifier that wasn’t fixed in IE 7 is the treatment of non-alphanumeric characters after the identifier. So the !important! should be used instead.

p {
margin: 10px !important!;
}

IE 6 min-height hack

Assume you all know what is the “min-height problem” of IE 6. The real headache begin when the user tries to resize the page. Should be avoided like that:

div.box {
min-height: 300px;
height: auto !important;
height: 300px;
}

You should take into account that all those steps are extremely hacky, and strongly unrecommended. My duty is to warn you.

Further Digging

Share and Enjoy:
  • Digg
  • del.icio.us
  • Facebook
  • Design Float
  • LinkedIn
  • Mixx
  • NewsVine
  • RSS
  • StumbleUpon
  • Technorati
  • Yahoo! Buzz
  • Google Bookmarks

RSS Enjoy this Post? Subscribe to Julia Khusainova's Blog.
RSS Feed   RSS Feed     Email Feed  Email Feed

3 Responses So Far

December 14, 2009

Nice collection Julia ! got most of them covered , problem is, sometimes the best fix for IE is uninstall :))

[Reply]


April 12, 2010

Julia,

I need to fix a problem with my own website (under contructio).

I mostly use photoshop, then take it into dreamweaver for linking and ftp upload.

I’ve tried to place fill in forms as anothe layer in dreamweaver/html but these layers are in different places depending on what browser is being used.

I have designed these fill in forms/pages using photoshop, but I don’t know how to enable these function (fill in, validate and submit) within the orignal page. ergo, new layer using dw/html.

Can you help me, please?
Thanks
Val

[Reply]

Julia Reply:

Hi, Val,

to enable functions such as fill in, validate and submit you need basic knowledge of HTML forms, javascript, maybe php (depends on are going to fetch the data when form is submitted). I would recommend to use such resources as:
http://www.w3schools.com/html/default.asp
http://www.w3schools.com/js/default.asp
http://www.w3schools.com/php/default.asp

This will be enough to get familiar with the topic and cover the basics you need. Good luck with your site!

[Reply]


  • CommentLuv Enabled