Jump to content

Valid Html


somedude
 Share

Recommended Posts

hi I am using these <!--[if IE]><link rel="stylesheet" href="/ie.css" type="text/css" /><![endif]--><![if !IE]><link rel="stylesheet" href="/ff.css" type="text/css" /><![endif]>to make sure the right css file gets used, but it is showing up as invalid html. any pointers?

Link to comment
Share on other sites

the second <![ifIE]> is actually correct, IE and IE only will ignore the contents while other browsers will interpret the contained content.Here's the reference on MSDN:About Conditional CommentsAs far as the valid/invalid is concerned, I'm not sure you can get away with using that syntax and passing validation, you might have to decide between the easy syntax and 100% valid html.Generally when it comes to style sheets at least I try to write my default / standard css files with standards compliant css and then use an IE conditional to add a link or two for IE specific exceptions. The conditional include is at least a comment as far as the rest of the world is concerned.I on occasion need to make some slight exceptions for FireFox 2 in which case I usually do something like this in the header:

<script type="text/javascript"> try{if(navigator.userAgent.toLowerCase().match(/firefox\/(\d)/)[1]==2) document.write ('<link rel="stylesheet" type="text/css" href="FF2.css" />'); }catch(err){}finally{}</script>
---This next comment is to be taken as-is, no warranty implied, and I'm sure that some readers will find this highly dubious, but you can also do something like:
<!--[if IE 7]><div class="lteIE7 ie7"><![endif]--><!--[if IE 6]><div class="lteIE7 ie6"><![endif]-->... markup that needs TLC in IE ...<!--[if (IE 6)|(IE 7)]></div><![endif]-->
wrapping your specific content, or the entire page, in an extraneous div tag that only your target IE versions will interpret.This technique allows you to omit having a seperate IE stylesheet entirely, instead prefacing the volitile styles with a .lteIE7, .ie6, or .ie7 selector. For one it allows you to locate all the styles pertaining to any given segment in the same location, otherwise you've have to flip back and forth between your IE stylesheets and your primary to compare / modify styles.
<style>.foo{float:left; margin-left:1em;}.ie6 .foo{margin-left:0.5em;}</style>
The downside of course is that you're wasting some bandwidth and making your non-IE users download some junk they don't need. Edited by packrat
Link to comment
Share on other sites

To make it valid HTML, though, you'll need to put it within a comment, because there is no kind of node in HTML represented as <![if ]>

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

Link to comment
Share on other sites

Slight syntax correction on the endif part of that:

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

Otherwise that is probably the best solution. Probably a 'failure of imagination' on my part but I hadn't considered tagging up the exclusion in a comment; good one.

Edited by packrat
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...