Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New Coder
    Join Date
    Jun 2013
    Location
    Serbia
    Posts
    29
    Thanks
    3
    Thanked 0 Times in 0 Posts

    IE specific style sheet

    Hi everyone,

    I'm trying to force my html document to load two different CSS style sheets. One for browsers other than IE, and one just for IE. I checked archived threads relating this issue, nothing helped. So i decided to write my own, hopefully this might help me get things right.

    My html code (testcss.html) looks like this:

    <!DOCTYPE html>
    <head>
    <title>IE CSS</title>
    <link href="style.css" rel="stylesheet" type="text/css" />
    <!--[if IE]>
    <link href="ie.css" rel="stylesheet" type="text/css" />
    <![endif]-->
    </head>
    <body>
    Your text goes here.
    </body>
    </html>

    My document style.css is very simple, and has two selectors only:

    body {
    color:white;
    background:blue;
    }

    Same goes for IE specific stylesheet (ie.css):

    body {
    color:white;
    background:red;
    }

    Thing is, I am using FF22.0 and IE 10 for testing. They keep following one or the other style sheet, instead loading separate ones. If I remove one dash from comment, ie.css is being loaded, if comment remains intact, style.css is being loaded in both browsers. This is kinda driving me nuts, so I'd be grateful for any help with this issue.

    Thanks in advance!

  • #2
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,930
    Thanks
    6
    Thanked 1,041 Times in 1,014 Posts
    Of course style.css is loaded in IE, too, because you didn’t specify any condition. The typical use case is that you have a default stylesheet for all browsers and then override certain styles in the IE stylesheet (which should actually happen in your example – both browsers get blue background with white text while IE overrides the background color so it’s red instead).
    Last edited by VIPStephan; 06-26-2013 at 09:51 PM. Reason: corrected typo

  • Users who have thanked VIPStephan for this post:

    cluster381 (06-26-2013)

  • #3
    Regular Coder stevenmw's Avatar
    Join Date
    Jun 2007
    Location
    OK
    Posts
    497
    Thanks
    27
    Thanked 31 Times in 31 Posts
    You can use what is called conditional comments.

    http://css-tricks.com/how-to-create-...ly-stylesheet/
    Thanks!

  • #4
    New Coder
    Join Date
    Jun 2013
    Location
    Serbia
    Posts
    29
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by VIPStephan View Post
    Of course style.css is loaded in IE, too, because you didn’t specify any condition. The typical use case is that you have a default stylesheet for all browsers and then override certain styles in the IE stylesheet (which should actually happen in your example – both browsers get blue background with white text while IE overrides the background color so it’s read instead).
    You're absolutely right about this. Though, it turned out this paradigm with two different CSS files does work with IE10... BUT only when I mess around with Compatibility Mode (F12). From 9 to 7 also, all simulated versions respond to alternative IE CSS file. Also checked on my laptop, where I still have genuine IE8 installed. Same thing, it works.
    I'd call it a day on this one, thanks guys for responding. I learned something useful today.


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •