Question

I am having an issue wherein my web application behaves different in (IE5 & IE6) as compared with (IE7 & IE8)

There is some CSS Issue but I do not want to get in a situation where I make some changes in CSS File and web application would work fine in (IE5 & IE6) and not in (IE7 & IE8) and so my question is:

How should I approach problem to resolve CSS incompatibities or differences between different version of IE ?

Any guidance and suggestions would be highly appreciated.

Answer 1

Create a cascade of style sheets like so:

<link id="stylesheet1" rel="stylesheet" href="css/style.css" type="text/css" media="all" /
<!--[if IE]>
  <link id="stylesheet2" rel="stylesheet" href="css/ie.css" type="text/css" media="all" />
<![endif]-->
<!--[if lte IE 6]>
  <link id="stylesheet3" rel="stylesheet" href="css/ie6.css" type="text/css" media="all" />
<![endif]-->
<!--[if lte IE 5]>
  <link id="stylesheet4" rel="stylesheet" href="css/ie5.css" type="text/css" media="all" />
<![endif]-->

style.css:

.myclass{
  width:100px;
}

ie.css:

/* override class from style.css */
.myclass{
  width:105px;
}

ie6.css:

/* override class again from ie.css */
.myclass{
  width:110px;
}

ie5.css:

/* if necessary, override class again from ie6.css */
.myclass{
  width:115px;
}

You only need to over-ride what needs to be over-ridden.

Pekka is right, you need to take each problem/bug/display-difference on a case-by-case basis. So if something isn’t showing up right in IE6, you need to adjust it in ie6.css. If even after that, it’s not showing up right in IE5, you need to adjust it in ie5.css.

If you practice a little, you will understand better.

---

Explanation:

<!--[if IE]>
  only Internet Explorer browsers (all versions) will see HTML between these statements
<![endif]-->
<!--[if lte IE 6]>
  only Internet Explorer 6 or lower browsers will see HTML between these statements
<![endif]-->
<!--[if lte IE 5]>
  only Internet Explorer 5 or lower browsers will see HTML between these statements
<![endif]-->