Valid Method for Multi Stylesheets?

[Sergio965]

Hi,

As you all know, designing for compatiblity with multiple browsers can be a pain in the neck, and most of the time will lead to having two or more stylesheets, depending on the browser.

My question is: What is a W3C valid method for making this happen? I've been able to use two stylesheets, one for any browsers, and the other for IE6, but, I haven't been able to make the code valid with the W3C validator. This is the code I tried:

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

<![if !(IE 6)]>
<link rel="stylesheet" type="text/css" href="not-ie.css" />
<![endif]>

And the errors I receive from the validator:

Line 10, Column 3: "if" is not a reserved name.
<![if !(IE 6)]>

Line 10, Column 6: character data is not allowed here.
<![if !(IE 6)]>

Line 12, Column 3: "endif" is not a reserved name.
<![endif]>

Line 10, Column 1: XML Parsing Error: StartTag: invalid element name.
<![if !(IE 6)]>

Line 12, Column 1: XML Parsing Error: StartTag: invalid element name.
<![endif]>

Any help would really be apreciated.

Thanks in advanced,
Sergio965

 

[Albino]

as far as I know, any conditional formatting/ie only css lines are not valid. the only way is to find a method that works in all browsers, or find hacks for the problem that do not require conditions.

however, thinking about it, could you not use javascript/php to load the stylesheet in, depending on the browser?

 

[Kate]

I use this markup and my code is XHTML strict compliant
Maybe the error comes from markup code before your conditional CSS ?

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

 

[Sergio965]

I use this markup and my code is XHTML strict compliant
Maybe the error comes from markup code before your conditional CSS ?

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

Well, see, the problem is that when I use that code alone, IE 6 still picks up the other style sheet, therefore still making the page look wrong. So, I had to use the 'If not IE6" for IE6 to completely ignore the other stylesheet.

 

[Kate]

Perhaps you could check the browser info using the user agent string and serve the right style sheet in PHP ?
It may be more reliable than css hacks.

 

[DylanButler]

If you are going to use multiple stylesheets to correct IE's mischief (I don't personally do this method), you just need to fix the order in which you are calling to your stylesheet files.

Conditional comments are ignored by the validator. The problem is that second comment you supplied is not a valid comment. It sounds like you want to write one main stylesheet for all browsers, and then overwrite IE's misgivings with a second sheet:

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

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