How do I have two different CSS files for FF3 and IE7?

Discussion in 'Programming' started by mberman84, May 19, 2008.

0
  1. #1
    basically..my site works for FF3...but looks screwy with IE7...

    how do i make 2 separate css files for each browser?
     
    mberman84, May 19, 2008 IP
  2. whirlybird20

    whirlybird20 Guest

    Messages:
    462
    Likes Received:
    11
    Best Answers:
    0
    Trophy Points:
    0
    #2
    Just add the following script to where you would usually link to the css file, then customize it to work with your files.

    <script type="text/javascript">
    //Written by 1st Class Websites www.1stclasswebsites.com
    var browser=navigator.appName;
    var b_version=navigator.appVersion;
    var version=parseFloat(b_version);
    if (browser=="Microsoft Internet Explorer")
    {
    //change where it says "ie.css" to your internet explorer css file
    document.write("<link rel=\"StyleSheet\" type=\"text/css\" href=\"ie.css\">");
    }
    else
    {
    //then change where it says "style.css" to your normal css file
    document.write("<link rel=\"StyleSheet\" type=\"text/css\" href=\"style.css\">");
    }
    </script>


    Hope this helps

    Joel
     
    whirlybird20, May 19, 2008 IP
    Bagi Zoltán likes this.
  3. mberman84

    mberman84 Peon

    Messages:
    511
    Likes Received:
    6
    Best Answers:
    0
    Trophy Points:
    0
    #3
    ill try this, thanks a lot...great first post!

     
    mberman84, May 19, 2008 IP
  4. mberman84

    mberman84 Peon

    Messages:
    511
    Likes Received:
    6
    Best Answers:
    0
    Trophy Points:
    0
    #4
    hey hoel,

    this didnt work. when i went into the source code, it didnt print the <link rel=bla bla> properly...all i see is the javascript code in the source. any idea what could be the problem?
     
    mberman84, May 20, 2008 IP
  5. ryan_uk

    ryan_uk Illustrious Member

    Messages:
    3,983
    Likes Received:
    1,022
    Best Answers:
    33
    Trophy Points:
    465
    #5
    Is it to go within static html or PHP? You can do a test (preg_match, for example) on user agent strings and serve a particular css file depending upon the browser... this also avoids unnecessary javascript. 
    <?php
if(preg_match(/blah/i, "ie7 ua")) {
  print("blah.css");
} else {
  print("blah2.css");
}
?>
    PHP:
    It's not exact, but with research and effort of the two above links you should figure it out.
     
    ryan_uk, May 20, 2008 IP
  6. mberman84

    mberman84 Peon

    Messages:
    511
    Likes Received:
    6
    Best Answers:
    0
    Trophy Points:
    0
    #6
    hey, thanks for that.

    i actually found a decent way of doing this:

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


    basically i load the first CSS file...and if its IE...i replace that with another CSS file...IE reads the comments.
     
    mberman84, May 20, 2008 IP
  7. ryan_uk

    ryan_uk Illustrious Member

    Messages:
    3,983
    Likes Received:
    1,022
    Best Answers:
    33
    Trophy Points:
    465
    #7
    That's one way, but it's not going to account for specific browser version. The CSS can look different between IE6 and IE7 even (might depend on IE's mode though?). Good luck!
     
    ryan_uk, May 20, 2008 IP
  8. mberman84

    mberman84 Peon

    Messages:
    511
    Likes Received:
    6
    Best Answers:
    0
    Trophy Points:
    0
    #8
    right. There is a way to use this method and account for specific browser versions, so I will have to test out my site on those versions. Thanks for your help
     
    mberman84, May 20, 2008 IP
  9. ryan_uk

    ryan_uk Illustrious Member

    Messages:
    3,983
    Likes Received:
    1,022
    Best Answers:
    33
    Trophy Points:
    465
    #9
    Of course, I forgot that it's possible to specify the version of IE.
     
    ryan_uk, May 20, 2008 IP
  10. whirlybird20

    whirlybird20 Guest

    Messages:
    462
    Likes Received:
    11
    Best Answers:
    0
    Trophy Points:
    0
    #10
    Can I just make sure that you did it right?

    This is what I did.

    I have one file named ie.css, and another named style.css

    I want the ie.css to only be used if the visitor is using internet explorer, and style.css to be used if they are using any other browser.

    So I open the page that I want this to work on, and enter the following
    -------------------------------------------------------
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
    <head>
    <title>Testing the css thing</title>
    <script type="text/javascript">
    //Written by 1st Class Websites www.1stclasswebsites.com
    var browser=navigator.appName;
    var b_version=navigator.appVersion;
    var version=parseFloat(b_version);
    if (browser=="Microsoft Internet Explorer")
    {
    //change where it says "ie.css" to your internet explorer css file
    document.write("<link rel=\"StyleSheet\" type=\"text/css\" href=\"ie.css\">");
    }
    else
    {
    //then change where it says "style.css" to your normal css file
    document.write("<link rel=\"StyleSheet\" type=\"text/css\" href=\"style.css\">");
    }
    </script>
    </head>
    <body>
    <h1>Just testing</h1>
    </body>
    </html>
    ---------------------------------------------------------


    Then I open ie.css and add the following code.
    ----------------------
    h1
    {
    color:red;
    }
    ---------------------

    then I open style.css and add the following code.

    ---------------------------------------
    h1
    {
    color:blue;
    }
    ---------------------------------------

    It works!

    You can see here. http://1stclasswebsites.com/iecss/

    [​IMG]

    When you look at the source it will display the script, but it still works as you can see.

    I hope that this solves all of your problems.
    Joel
     
    whirlybird20, May 20, 2008 IP