Question

I’ve just done a new html build of a website which is working and displaying nicely in Firefox, IE9, Safari, Chrome. Now comes the hard part of getting it to work in IE8 and IE7.

I have put in some conditional CSS stylesheets for these two browsers:

<link rel="stylesheet" type="text/css" href="css/reset.css" />
<link rel="stylesheet" type="text/css" href="css/layout.css" />
<!--[if IE 7]><link rel="stylesheet" type="text/css" href="css/ie7.css"><![endif]-->
<!--[if IE 8]><link rel="stylesheet" type="text/css" href="css/ie8.css"><![endif]-->

Then I use IE9, the debug tool (F12), set Browser mode to IE7 and Document Mode to IE7 standards. So I put in some css classes into the conditional stylesheet (which should override the ones in the main layout.css file (right?) and refresh the page. However IE doesn’t apply or override any styles from the conditional stylesheet at all. I’m just getting the ones in layout.css still being applied and hence nothing is changing.

What gives? How do I debug for these browsers?

Answer 1

Just check that the path of the IE css file once. And also clear IE browser cache then check out. It should reflect.
Finally try dis

            <!--[if gte IE 7]>
            <link rel="stylesheet" href="CSS/filename.css" type="text/css" />
        <![endif]-->

Then you no need to add two files for IE7 and IE8