[Heka1]

I want to design a css script for IE 6 and then a second one for firefox and IE7. what is the coding to do this?

[weldo]

"conditional comments" is what you want ...

code a 'normal' sheet for ie7/firefox/safari etc ... and test accordingly ...

then create another css file - just containing the specific changes needed in order to fix those ie6 errors ...

code like this in the head of yer document:

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

this bit : <!--[if lt IE 7]>
will just force any ie browser (lighter than ie7) into reading yer other one ...

and ...

two fat ladies

(bingo)

[wheedwacker]

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


I think its supposed to be IE6 if you want the other one to stay for ie7

[herkalees]

<link rel="stylesheet" type="text/css" href="/path/to/styles-all.css" />

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

The first line of code uses a stylesheet aimed at EVERY browser (including IE6). The second line of code is one that will be read, a second time, by IE6 only.

The thought is that all browsers read from the first (main) style sheet, then IE6 goes through the second one and applies any styles inside of it, which are expected to be tweaks that differ from the first style sheet.

[wheedwacker]

More info here:
CSS - Conditional comments

[Heka1]

thank you all for your help, this is exactly what I needed. I have seen this in use before but I couldn't find it again. This wil hopefully help me and eliminate the need for all of the div tags I have needed for multiple cross platform browser support.

[pgo]

I wrote a thing on this very subject. This is how I use conditional comments and @import to decide which browsers I will and will not support.

Using CSS to Target Multiple Internet Explorer Versions

[digipaint]

So is it right that you only have to put the code differences in the conditional style sheet, the first stylesheet will be read by all browsers including the one you are concerned with, then the conditional stylesheet is read again by the offending browser and differences are ammended?

[pgo]

Yes.

Also, you can only use conditional comments to target IE. You shouldn't need to target any other browser, anyway.

[herkalees]

Since we're on the topic, I wrote up a quick tutorial on how to target Safari. I'll mention that it uses JavaScript, and that's generally lame, but it's for those rare cases when the client is extremely picky, and you need the money: CSS Filtering for Safari : Marc Amos

[weldo]

since when has any client even heard of Safari ???

[herkalees]

Originally Posted by weldo

since when has any client even heard of Safari ???

Must've not read the article I linked to...

[weldo]

ok ...

my, that was a picky client ....
the exception to the rule, most likely ...

[Bill Posters]

Originally Posted by herkalees

Since we're on the topic, I wrote up a quick tutorial on how to target Safari. I'll mention that it uses JavaScript, and that's generally lame, but it's for those rare cases when the client is extremely picky, and you need the money: CSS Filtering for Safari : Marc Amos

CSS hacks series

?

[herkalees]

Originally Posted by Bill Posters

CSS hacks series

?

Not bad, but I'd much rather maintain a separate style sheet for Safari, than depend on a somewhat mish-mash of weird css selectors, hoping the WebKit team never drops their support in the future. Thanks for the link though.

[Bill Posters]

Originally Posted by herkalees

Not bad, but I'd much rather maintain a separate style sheet for Safari, than depend on a somewhat mish-mash of weird css selectors, hoping the WebKit team never drops their support in the future. Thanks for the link though.

Admittedly, it's not ideal, but imho, it's still preferable to browser sniffing with js.
But then, I've never been a fan of using one technology to patch the holes in another.

Of course, if you're delivering an override stylesheet to all versions of Safari using js, as you do in your technique, you're equally at the mercy of Safari fixing or altering the particular css rendering which led you to implement the targeted stylesheet in the first place.

Horses for courses, I guess.

[herkalees]

Originally Posted by Bill Posters

Admittedly, it's not ideal, but imho, it's still preferable to browser sniffing with js.
But then, I've never been a fan of using one technology to patch the holes in another.

Of course, if you're delivering an override stylesheet to all versions of Safari using js, as you do in your technique, you're equally at the mercy of Safari fixing or altering the particular css rendering which led you to implement the targeted stylesheet in the first place.

Horses for courses, I guess.

Well said. When tweaking on such a small level as this, I'm not sure there is any 'good' way to do it.