1,105,214 Community Members

css ie6 ie7 if statements?

Member Avatar
_mike_
Newbie Poster
17 posts since May 2010
Reputation Points: 0 [?]
Q&As Helped to Solve: 0 [?]
Skill Endorsements: 0 [?]
 
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" />

Member Avatar
macneato
Posting Pro in Training
415 posts since Jun 2007
Reputation Points: 29 [?]
Q&As Helped to Solve: 48 [?]
Skill Endorsements: 0 [?]
 
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]-->
Member Avatar
_mike_
Newbie Poster
17 posts since May 2010
Reputation Points: 0 [?]
Q&As Helped to Solve: 0 [?]
Skill Endorsements: 0 [?]
 
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?

Member Avatar
macneato
Posting Pro in Training
415 posts since Jun 2007
Reputation Points: 29 [?]
Q&As Helped to Solve: 48 [?]
Skill Endorsements: 0 [?]
 
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?

Member Avatar
_mike_
Newbie Poster
17 posts since May 2010
Reputation Points: 0 [?]
Q&As Helped to Solve: 0 [?]
Skill Endorsements: 0 [?]
 
0
 

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

Member Avatar
macneato
Posting Pro in Training
415 posts since Jun 2007
Reputation Points: 29 [?]
Q&As Helped to Solve: 48 [?]
Skill Endorsements: 0 [?]
 
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]-->
Member Avatar
_mike_
Newbie Poster
17 posts since May 2010
Reputation Points: 0 [?]
Q&As Helped to Solve: 0 [?]
Skill Endorsements: 0 [?]
 
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.....

Member Avatar
macneato
Posting Pro in Training
415 posts since Jun 2007
Reputation Points: 29 [?]
Q&As Helped to Solve: 48 [?]
Skill Endorsements: 0 [?]
 
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

Member Avatar
_mike_
Newbie Poster
17 posts since May 2010
Reputation Points: 0 [?]
Q&As Helped to Solve: 0 [?]
Skill Endorsements: 0 [?]
 
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!

Member Avatar
_mike_
Newbie Poster
17 posts since May 2010
Reputation Points: 0 [?]
Q&As Helped to Solve: 0 [?]
Skill Endorsements: 0 [?]
 
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]-->

Member Avatar
_mike_
Newbie Poster
17 posts since May 2010
Reputation Points: 0 [?]
Q&As Helped to Solve: 0 [?]
Skill Endorsements: 0 [?]
 
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?

Member Avatar
_mike_
Newbie Poster
17 posts since May 2010
Reputation Points: 0 [?]
Q&As Helped to Solve: 0 [?]
Skill Endorsements: 0 [?]
 
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]-->

Member Avatar
macneato
Posting Pro in Training
415 posts since Jun 2007
Reputation Points: 29 [?]
Q&As Helped to Solve: 48 [?]
Skill Endorsements: 0 [?]
 
0
 

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

Member Avatar
jrock2004
Light Poster
34 posts since Jul 2010
Reputation Points: 0 [?]
Q&As Helped to Solve: 2 [?]
Skill Endorsements: 0 [?]
 
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?

Member Avatar
_mike_
Newbie Poster
17 posts since May 2010
Reputation Points: 0 [?]
Q&As Helped to Solve: 0 [?]
Skill Endorsements: 0 [?]
 
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 three months: Start a new discussion instead
Post:
Start New Discussion
View similar articles that have also been tagged: