Page 1 of 2 12 LastLast
Results 1 to 10 of 12

Thread: If IE/If FF...

  1. #1
    Join Date
    Jan 2009
    Location
    Chattanooga, TN
    Posts
    41
    Thanks
    6
    Thanked 1 Time in 1 Post

    Thumbs up If IE/If FF...

    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">
    Last edited by dillankid; 03-04-2009 at 05:14 PM. Reason: Resolved.

  2. #2
    Join Date
    Oct 2008
    Location
    Sweden
    Posts
    2,023
    Thanks
    17
    Thanked 319 Times in 318 Posts
    Blog Entries
    3

    Default

    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!
    Eddy Proca
    I love Dropbox. Get it through my girlfriend's referral link (I reached my limit) and both you and her get 500 MB extra! Thanks and you're welcome!

  3. The Following User Says Thank You to Snookerman For This Useful Post:

    dillankid (03-04-2009)

  4. #3
    Join Date
    Feb 2009
    Posts
    303
    Thanks
    18
    Thanked 36 Times in 36 Posts

    Default

    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!
    Alex Blackie, X96 Design
    My Website
    I specialize in: HTML5, CSS3, PHP, Ruby on Rails, MySQL, MongoDB, Linux Server Administration

  5. The Following User Says Thank You to X96 Web Design For This Useful Post:

    dillankid (03-04-2009)

  6. #4
    Join Date
    Jan 2009
    Location
    Chattanooga, TN
    Posts
    41
    Thanks
    6
    Thanked 1 Time in 1 Post

    Default

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

  7. #5
    Join Date
    Oct 2008
    Location
    Sweden
    Posts
    2,023
    Thanks
    17
    Thanked 319 Times in 318 Posts
    Blog Entries
    3

    Default

    You're welcome, glad to help!

    Good luck with your site!
    Eddy Proca
    I love Dropbox. Get it through my girlfriend's referral link (I reached my limit) and both you and her get 500 MB extra! Thanks and you're welcome!

  8. #6
    Join Date
    Sep 2008
    Location
    Bristol - UK
    Posts
    842
    Thanks
    32
    Thanked 132 Times in 131 Posts

    Default

    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.

  9. #7
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    Quote Originally Posted by Snookerman View Post
    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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  10. #8
    Join Date
    Oct 2008
    Location
    Sweden
    Posts
    2,023
    Thanks
    17
    Thanked 319 Times in 318 Posts
    Blog Entries
    3

    Default

    Quote Originally Posted by jscheuer1 View Post
    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.
    Eddy Proca
    I love Dropbox. Get it through my girlfriend's referral link (I reached my limit) and both you and her get 500 MB extra! Thanks and you're welcome!

  11. #9
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    Quote Originally Posted by Snookerman View Post
    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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  12. #10
    Join Date
    Oct 2008
    Location
    Sweden
    Posts
    2,023
    Thanks
    17
    Thanked 319 Times in 318 Posts
    Blog Entries
    3

    Default

    That's interesting, I got it straight off Microsoft's website.
    Eddy Proca
    I love Dropbox. Get it through my girlfriend's referral link (I reached my limit) and both you and her get 500 MB extra! Thanks and you're welcome!

Tags for this Thread

Bookmarks

Posting Permissions

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