Anonymous 0

i am trying to have one stylesheet targeted to IE 8 and another one targeted to all those less than 8 ... but let's just say 7 for now.

none of my statements work at all.

for example:

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

<!--[if IE 8]>
<link href="address here/stylesheet2" rel="stylesheet" type="text/css" />
<![endif]--> 

what happens is that one invariably ends up canceling the other one.

Or this one:

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

<!--[if  lt IE 8]>
<link href="address here/stylesheet2" rel="stylesheet" type="text/css" />
<![endif]--> 

which should mean that the first one targets to those greater than 7, and the second one targets to those less than 8, right?

either way, no matter how i write out my conditionals ... one always invariably ends up canceling the other one out ... and it's frustrating me to no end.

it's important for the targeting to work due to the fact that a very specific css code works perfectly in one version, but gets messed up in the other versions, hence this workaround.

TIA for all advice.


hm ...

a few additional facts:

this is done in joomla, if that makes any difference, which i don't think so, but just putting it out there.

so, the conditional statements are placed in the index file.

there are two main css files, one for all browsers, and one for IE.

now, am trying to make it three css files -- one for all browsers, and two for IE, albeit different versions

to answer the answers and comments in random order:

to grevers:

IE 8 is tested on my computer and IE 7 is tested on my vmware player

but that is an interesting comment because i was planning to download IE 6, assuming i can find a copy and figure out how to download it in its own directory ... guess that seems to be a moot point.


to manian:

i was going to mention this earlier but thought it was not necessary ...

the site works fine in all versions actually ...

the problem lies in zooming out once which apparently destroys the css layout in one tiny way.

so, i have rendered the site in content="IE=7"

hence the additional workout in the css files ... for IE only


to o.k.w:

yes, they've been tested in both versions, and yes, the files are loaded.


to 2426:

as noted just now ... the css files are pointed to in the index file ...

i'm not really sure how to answer your question actually ... even though i think i get what you're saying because this is in joomla ...

basically, you place the location of the css files in the index file ... and viola ..

so ... trying to have three files now ... the main broad one ...

and two IE's versions now ...

basically i have a photo slideshow and a menu next to each other ...

when the site is zoomed out ... they get pushed to the left outside of the layout ...

hence the workout is the comment out the code which makes it work for versions less than 8 ... and version 8 needs that specific margin comment which pushes it back in to the layout ...

and the IE conditionals are in the index file ... so ... there's no specificity to worry about, yes?


ok ... apologies for responding to this way ...

this is my first time in trying out this site ... and wanted to keep to the anonymity even though i feel it's silly now ... and wasn't sure how to keep it -- hence the further edition of my question ...

to simplify it for future ... if i anonymize the question again (unlikely that seems now) ... how do i answer to the responders while retaining the anonymity besides editing my question?

and apologies again if my answers sort of changes the situation as previously explained ... it's not a matter of being inaccurate but not thinking through in explaining the situation i guess ... or it is me being inaccurate i guess ... either way, sorry!

anyway, TIA again for all your responses!

  • Your conditional comments looks ok to me, I assume you've tested them on IE7 and IE8 and both css files are loaded? o.k.w almost 7 years ago
  • specificity is important, your main CSS applies to all browsers, including IE7 and IE8 - conditional comments allow you to add over-rides to your existing CSS and if your override is less specific than your main css, then even though IE will see it, it won't act on it. try the rule you're applying at the bottom of the main CSS, if it works, then transfer it to the IE only CSS Tony Crockford almost 7 years ago
  • comment below the answers you get. It's hard to read through your question when referencing replies elsewhere on the page. da almost 7 years ago

4 answers

2
points

which should mean that the first one targets to those greater than 7, and the second one targets to those less than 8, right?

The first one will target 8 and the second one should target 7 and 6 as you say, although sometimes whitespace is crucial.

I've found that this:

    <!--[if lte IE 7]>
        <link rel="stylesheet" href="styles/ie.css" type="text/css" media="all" />
    <![endif]-->

works best - targets everything 7 and below and then use hacks in the ie.css file where needed.

Order is important and (you are putting the comments in the html ?) CC's should come after all your other CSS and before the print CSS, or you'll override the conditional css with your standard stylesheets.

Conditional CSS should also be of the same Specificity or higher than the CSS you're over-riding.

Show us a cutdown example of what's not working and it will be easier to see why.

Answered almost 7 years ago by Tony Crockford
2
points

Is your site rendering in IE 7 mode in IE 8? Use:

<meta http-equiv="X-UA-Compatible" content="IE=8" />

to make sure your site renders using IE 8 and not the compatibility mode.

Answered almost 7 years ago by Divya Manian
1
point

Also, if you are testing IE6 or IE7 as the standalone packages on a machine with IE8, you cannot test Conditional comments properly because the CC vector always reports as IE8 no matter which you are running. You need a proper virtual machine setup to do this.

Answered almost 7 years ago by Richard Grevers
0
points

Just to trigger the email that lets you know you have a new answer and to say that you appear to believe that Conditional Comments serve Stylesheets to IE and that using them means IE will only see the styles in the CC loaded CSS. This isn't true. the styles in the CC loaded CSS are in addition to your existing stylesheets, so in your example here:

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

<!--[if  lt IE 8]>
<link href="address here/stylesheet2" rel="stylesheet" type="text/css" />
<![endif]-->

IE6 and IE7 gets all your standard CSS PLUS stylesheet2 and IE8 gets all your standard CSS plus stylesheet1

Answered almost 7 years ago by Tony Crockford