Different Stylesheets for different Browsers

  gplatt2000 20:08 02 Nov 2006

Hi all

After trouble trying to get one stylesheet to work for more than just IE, I;ve decided to have two different stylesheets - one for IE, one for anything else.

Putting the code below into head> work fine when I use Dreamweaver to preview (i.e. when I choose 'preview in browser', it has the desired effect - one stylesheet in IE, the other for anything else)

However, when I actually upload the page and test it on my host, it no longer works! The page seems to load the stylesheet 'styleytl' regardless.

Any ideas what could be causing this and hot to solve it?

![if !IE]>
link rel="stylesheet" type="text/css" href="style.css" />
![if IE]>
link rel="stylesheet" type="text/css" href="styleytl.css" />

Thanks a lot


  PurplePenny 21:56 02 Nov 2006

They are both IE conditionals: which one is supposed to be for IE?

  PurplePenny 22:04 02 Nov 2006

Are you testing your stylesheet in IE6 or 7? It might make a difference and IE7 will be pushed via automatic update any day now.

  acsmanhtml12 10:31 03 Nov 2006

Well then I think it something like If Ite IE 6 = 6 and below etc.

  gplatt2000 12:53 03 Nov 2006

Thanks a lot for your replies everyone.

Purplepenny - I'm testing in 6, and for once it's IE I'm not having the problems with!

IE loads the styelsheet 'styleytl' fine. The problem is with other browsers (Im just using FireFox to test at the minute as I understand most non-IE browsers, other than NEtscape, are pretty much similar?)

i.e. In Firefox, the stylesheet loaded is still 'styleytl', despite the !IE statement telling anything other than IE to load the sheet 'style'

This is my first time using a system like this, and I'm struggling to find any clear guides, so not even certain if I'm actually writing the code right. From what I understand, the:

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

part tells IE to load 'styleytl', and the:

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

part tells anything that isn't IE to load 'style'

I could be completely wrong, so please feel free to tell me!

Also - as far as I'm aware, 'if IE' applies to all versions of IE? Again I could be wrong, please let me know if so.

Thanks again for your help


  beynac 13:58 03 Nov 2006

AFIK, only IE can read the ![if IE] tags. You therefore need to tell ALL browsers to use one stylesheet and then override this for IE using the ![if IE] tag.

  gplatt2000 19:00 03 Nov 2006

Ah that makes sense to me. So would I need to have an IF stetment for every single browser, or could I do it as below:

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

Now, whaat's REALLY confusing me, is that when I tested the page with the code above, IE recognised 'styleytl' and used that as planned instead of 'style'.
HOWEVER, Firefox for some reason is still finding & loading 'styleytl'!?

This seems very bizarre if only IE can actually understand the 'if IE' statement??

Any ideas?

(Also this still doesn;t seem to explain why when, using my original code, testing in Dreamweaver had the exact results desired - i.e. I chose 'preview in browser > IE' and tha laoded the correct IE sheet, then I chose 'Preview in Browser > Firefox', and that loaded the correct Firefox sheet)

All very bizarre to me!

Cheers for your help everyone

  beynac 23:13 03 Nov 2006

Try this:

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

  beynac 23:15 03 Nov 2006

Got those the wrong way round!
'other' should be the first one and 'ieonly' is the one in the [if IE] tag

  beynac 23:41 03 Nov 2006

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

  gplatt2000 00:24 04 Nov 2006

Hi beynac

Thanks for your help once again, much appreciated, I really hope we get this sorted!

Tried the code above, but again no luck :( For some weird reason, Firefox is still loading 'styleytl' (ieonly) rather than 'style' (other). I can;t understand how it's doing this, as surely it shouldn;t be able to see any reference whatsoever to 'styleytl'?? Even if I delete the stylesheet 'style' (other), the page is displayed 'OK', so it's definitely using the wrong sheet somehow!

Really starting to irritate me now, as I just can;t understand how this is hapenning!

Keep any ideas coming in people

Thanks a lot

This thread is now locked and can not be replied to.

Elsewhere on IDG sites

Xiaomi Mi Mix 2 review

What went wrong at the Designs of the Year 2017

iPhone X news: Release date, price, new features & specs

Comment utiliser Live Photos ?