1.11M Members

css ie6 ie7 if statements?

 
0
 

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" />

 
0
 

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]-->
 
0
 

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?

 
0
 

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

 
0
 

I have pm'd ou the link. thanks for having a look

 
0
 

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]-->
 
0
 

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.....

 
0
 

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

 
0
 

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!

 
0
 

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]-->

 
0
 

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?

 
0
 

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]-->

 
0
 

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

 
0
 

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?

 
0
 

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

You
This article has been dead for over six months: Start a new discussion instead
Post:
Start New Discussion
View similar articles that have also been tagged: