Load different style sheet based on browser

Discussion in 'JavaScript' started by ziffa27, Nov 10, 2008.

  1. #1
    Hi everyone,

    I have created 2 style sheets, one for IE version 6 and previous (called oldstyle_ie.css) and one for IE 7 and Firefox (called style.css)

    I have used JavaScript (see below) to load the CSS file but I am having a problem with oldstyle_ie.css as it's not being loaded :(

    Also please find a link for a testing webpage http://test.amaze.com.mt/

    Any help please

    Thanks in advance


    ziffa27

    <SCRIPT LANGUAGE = "JavaScript">
    <!--
    var browser = '';
    var version = '';
    var entrance = '';
    var cond = '';
    // BROWSER?
    if (browser == ''){
    if (navigator.appName.indexOf('Microsoft') != -1)
    browser = 'IE'
    else if (navigator.appName.indexOf('Netscape') != -1)
    browser = 'Netscape'
    else browser = 'IE';
    }
    if (version == ''){
    version= navigator.appVersion;
    paren = version.indexOf('(');
    whole_version = navigator.appVersion.substring(0,paren-1);
    version = parseInt(whole_version);
    }
    if (browser == 'IE' && version <= 6) document.write('<'+'link rel="stylesheet" href="oldstyle_ie.css" />');
    if (browser == 'IE' && version > 6) document.write('<'+'link rel="stylesheet" href="style.css" />');
    if (browser == 'Netscape' && version >= 2.02) document.write('<'+'link rel="stylesheet" href=" style.css" />');
    // -->
    </SCRIPT>
     
    ziffa27, Nov 10, 2008 IP
  2. rene7705

    rene7705 Peon

    Messages:
    233
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    0
    #2
    do it from PHP instead dude, that will decrease your load-times too.
     
    rene7705, Nov 10, 2008 IP
  3. live-cms_com

    live-cms_com Notable Member

    Messages:
    3,128
    Likes Received:
    112
    Best Answers:
    0
    Trophy Points:
    205
    Digital Goods:
    1
    #3
    <!--[if lte IE 6]>IE6 stylesheet<![endif]-->
    <!--[if !lte IE 6]>IE7 / FF stylesheet<![endif]-->
     
    live-cms_com, Nov 10, 2008 IP
  4. ziffa27

    ziffa27 Greenhorn

    Messages:
    27
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    11
    #4
    any help how to do it?
     
    ziffa27, Nov 10, 2008 IP
  5. wayfarer07

    wayfarer07 Peon

    Messages:
    34
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    0
    #5
    You were already given an answer. You don't need JavaScript for this, just a conditional comment.
    except that the logic of:
    
    <!--[if !lte IE 6]>IE7 / FF stylesheet<![endif]-->
    
    HTML:
    is incorrect. FF doesn't read conditional comments. The best way to do what you want is to have one general stylesheet, then send a separate one to browsers as needed, to overrule the master sheet.
     
    wayfarer07, Nov 10, 2008 IP
  6. live-cms_com

    live-cms_com Notable Member

    Messages:
    3,128
    Likes Received:
    112
    Best Answers:
    0
    Trophy Points:
    205
    Digital Goods:
    1
    #6
    Ahh right, I have only ever used the comments for IE fixes with FF styles in the main stylesheet.
     
    live-cms_com, Nov 10, 2008 IP
  7. ziffa27

    ziffa27 Greenhorn

    Messages:
    27
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    11
    #7
    Thanks man i did it
     
    ziffa27, Nov 11, 2008 IP