If IE/If FF...

**dillankid** · 03-04-2009, 06:15 AM

Do I have to use a specific doctype to get this to work?

I'm using

Code:

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

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

to link to separate stylesheets, and it works in IE but not FF. Do the "if's" not work in FF, do I need a different doctype, or am I just completely off?

I'm using

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

**Snookerman** · 03-04-2009, 06:21 AM

Conditional comments can only be used to target IE. What you could do is to target all other browsers like so:

Code:

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

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

Or just use the fact that the styles are cascading and change the order. In this way, all browsers will use the first one, but only IE will be able to use the second one, which will replace the first one, assuming that the same elements are targeted:

Code:

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

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

Good luck!

**X96 Web Design** · 03-04-2009, 06:25 AM

EDIT: Snookerman posted while I was writing... Didn't mean to copy what was already posted!
The IF statement only works with IE.

Firefox renders mostly the same as all the other browsers (exculding IE), so it doesn't need an IF at all.

Just remember to put the IE stylesheet AFTER the main stylesheet tag.

In simple terms, make it look like this:

Code:

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

Hope that helps!

**dillankid** · 03-04-2009, 05:13 PM

Thanks guys, I did the one that you both suggested and it works perfectly.

**Snookerman** · 03-04-2009, 05:17 PM

You're welcome, glad to help!

Good luck with your site!

**Schmoopy** · 03-04-2009, 05:36 PM

If you did want to use specific stylesheets according to the browser the user is using you can do it with JavaScript but it's generally not advised as browsers can pretend to be others. You should first look at your code and make sure it is all valid, but IE always brings up bug so it's fine to make conditional comments for this.

**jscheuer1** · 03-04-2009, 06:57 PM

Originally Posted by Snookerman

What you could do is to target all other browsers like so:

Code:

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

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

That one will not work, all browsers will ignore the !IE block - Non-IE browsers because it's a comment, IE browsers because they are being told not to execute it.

You can do:

Code:

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

to target non - IE. But for styles, it is best to use the other method mentioned in this thread. In fact, then the IE only stylesheet need only contain styles that differ from the main stylesheet.

**Snookerman** · 03-04-2009, 08:19 PM

Originally Posted by jscheuer1

That one will not work

Sorry, I guess my hands were too quick there and just added an exclamation mark without letting me think, thanks for pointing that out. What I meant was of course:

Code:

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

However, in this case the other method is more suitable.

**jscheuer1** · 03-04-2009, 08:39 PM

Originally Posted by Snookerman

Sorry, I guess my hands were too quick there and just added an exclamation mark without letting me think, thanks for pointing that out. What I meant was of course:

Code:

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

However, in this case the other method is more suitable.

Now that's invalid (won't pass validation), hence the more convoluted way of doing it that I mentioned. There are times when it is desirable to do this sort of thing, not for styles, but with presentational markup, so may as well do it in a valid manner if you are going to bother.

BTW, you can use that sort of syntax within an already opened IE conditional to further filter which versions get what.