Start New Discussion within our UI / UX Design Community

Hi, I am having issues attaching the following if statements in the head of my page to show the correct CSS for older versions of IE. I am using :

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

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

Try removing the leading slash, as these are used to define absolute paths

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

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

Hi thanks for fast response, I actually put that slash in to try, but its not working either way. It's wierd because if i replace the main .css with one of the IE stylesheets they work fine, so it must be something in the above code. I'm placing it in the <HEAD> of the page which i believe is correct?

Yes, that is correct. Very stange to say the least. Are you working on the site locally, if not, could you post a link?

This should do the trick. Switch the order.

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

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

hhmmm just uploaded that new order, still not working in IE6 or 7 ... very odd.. I thought at first I had named the .css files incorrectly, but they work indepenently if i put them as the main css.... its really strange! I have a seperate pc to test IE6 and also using software called IETester to test ie7, but theyrte not picking up the style sheets at all.....

I've tested both on IEtester. It should work. To do a simple test try

<title>...meeting rooms -</title>
<meta http-equiv="content-type" content="text/html;charset=UTF-8" />
<link href="css/main.css" rel="stylesheet" type="text/css" />
<!--[if lte IE 6]>
    <link rel="stylesheet" type="text/css" href="css/mainiesix.css" />
    <style>
    body {
    background:#000;
    font-size:40px
    }
    </style>
<![endif]-->
<!--[if IE 7]>
    <link rel="stylesheet" type="text/css" href="css/mainieseven.css"  />
    <style>
    body {
    background:red;
    font-size:40px
    }
    </style>
<![endif]-->

Test in ie6, bg will be black, in ie7 bg will be red and in ff, it will display as default

Thats very interesting, thanks, yeah that does change the backgroung correctly, but the actual css in the attached stylesheet doesnt kick in. Maybe i should just put the entire css where you have placed the background color css. Seems strange though. I'll have a look and see if that works!

I have tried the above, its works but then what about any browser outside of IE. If i add the default style sheet it over rules everything else... Nightmare, still can't see why just the follwoing code won't settle this

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

I have now replaced with this


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

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

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

and taken out the main css :

<link rel="stylesheet" type="text/css" href="css/main.css" />


This now works in IE8 , 7 and 6, but obviously not in any other browser as i have taken that last main.css link out... So now i need to tell the browser to load the main.css if its not Internet explorer? any ideas?

Finally it now works... I used the following:


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

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

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

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

So you are saying is if you put your main stylesheet above that code and you open your site in firefox that it is all messed up? How? Do you have a link we can view this?

Its ok, this

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

is the answer!

Thanks macneato for helping me with this... First post on here so will be back :)

Cheers jrock2004

This article has been dead for over six months. Start a new discussion instead.