browser detection and css

Discussion in 'Javascript' started by jnc3196@googlemail.com, Oct 1, 2006.

  1. Guest

    Help needed, the script below detects the correct browser but doesn't
    select the correct CSS file. Also how to call it from an external js
    file so as not to repeat it in every page.

    <html>
    <head>

    <script language="JavaScript"><!--
    browser_version= parseInt(navigator.appVersion);
    browser_type = navigator.appName;

    if (browser_type == "Microsoft Internet Explorer" && (browser_version
    >= 4)) {

    document.write("<I>You appear to be using Microsoft Internet
    Explorer</I>");
    }
    else if (browser_type == "Netscape" && (browser_version >= 4)) {
    document.write("<I>You appear to be using Netscape</I>");
    }
    // --></script>

    <script language="JavaScript"><!--
    browser_version= parseInt(navigator.appVersion);
    browser_type = navigator.appName;

    if (browser_type == "Microsoft Internet Explorer" && (browser_version
    >= 4)) {

    document.write("<link REL='iexplorer.css' TYPE='text/css'>");
    }

    else if (browser_type == "Netscape" && (browser_version >= 4)) {
    document.write("<link REL='netscape.css' TYPE='text/css'>");
    }

    // --></script>

    </head>
    <body>
     
    , Oct 1, 2006
    #1
    1. Advertising

  2. VK Guest

    wrote:
    > Help needed, the script below detects the correct browser but doesn't
    > select the correct CSS file. Also how to call it from an external js
    > file so as not to repeat it in every page.
    >
    > <html>
    > <head>
    >
    > <script language="JavaScript"><!--
    > browser_version= parseInt(navigator.appVersion);
    > browser_type = navigator.appName;
    >
    > if (browser_type == "Microsoft Internet Explorer" && (browser_version
    > >= 4)) {

    > document.write("<I>You appear to be using Microsoft Internet
    > Explorer</I>");
    > }
    > else if (browser_type == "Netscape" && (browser_version >= 4)) {


    That's an unexploded ammo from the Browser Wars Where did you dig it
    out? Put it back into soil immediately!

    There is not Netscape 4 anymore, a bounch of browsers has "Internet
    Explorer" added in the userAgent string and any workarounds of that
    time has no relevance to this time anyway. If you tell what kind of
    particular discrepancies you want to deal with, we'll find a working
    modern solution.
     
    VK, Oct 1, 2006
    #2
    1. Advertising

  3. Ian Collins Guest

    wrote:
    > Help needed, the script below detects the correct browser but doesn't
    > select the correct CSS file. Also how to call it from an external js
    > file so as not to repeat it in every page.
    >

    Why don't you just use IE specific conditional includes?

    <!--[if IE ]>
    <link ..... />
    <![endif]-->


    --
    Ian Collins.
     
    Ian Collins, Oct 1, 2006
    #3
  4. On or about 10/1/2006 3:37 PM, it came to pass that Ian Collins wrote:
    > wrote:
    >> Help needed, the script below detects the correct browser but doesn't
    >> select the correct CSS file. Also how to call it from an external js
    >> file so as not to repeat it in every page.
    >>

    > Why don't you just use IE specific conditional includes?
    >
    > <!--[if IE ]>
    > <link ..... />
    > <![endif]-->
    >
    >

    The following works for me and allows IE7 and all other browser to use
    my default css. However, it does not pass the W3C HTML validation.

    <!--[if lte IE 6]>
    <LINK REL="stylesheet" TYPE="text/css" HREF="CSS/IE5.css">
    <![endif]-->
    <![if gte IE 7]>
    <LINK REL="stylesheet" TYPE="text/css" HREF="CSS/Default.css">
    <![endif]>
     
    totalstranger, Oct 2, 2006
    #4
  5. Guest

    on Oct 2 2006 2:01 am totalstranger wrote:

    > The following works for me and allows IE7 and all other browser to use
    > my default css. However, it does not pass the W3C HTML validation.


    Thanks for the responces, I'll try this out.

    "If you tell what kind of particular discrepancies you want to deal
    with, we'll find a working modern solution.", VK

    Problem: The web site looks different under Firefox and Iexplorer 6.
    The solution is to load a different CSS file depending on the browser.
    I would like to link each page to a javascript browser detection script
    so I don't need to paste the script into every html file.
     
    , Oct 2, 2006
    #5
  6. Matt Kruse Guest

    wrote:
    > Problem: The web site looks different under Firefox and Iexplorer 6.


    This is not necessarily a problem. Why must it look identical?

    > The solution is to load a different CSS file depending on the browser.


    A better solution might be to write more portable, bullet-proof css.

    --
    Matt Kruse
    http://www.JavascriptToolbox.com
    http://www.AjaxToolbox.com
     
    Matt Kruse, Oct 2, 2006
    #6
  7. Guest

    Mon, Oct 2 2006 4:31 pm Matt Kruse wrote:

    > This is not necessarily a problem. Why must it look identical?


    I use Firefox, most of the viewers will be using Iexplorer. The fonts
    are different sizes and images don't position correctly.

    > > The solution is to load a different CSS file depending on the browser.


    > A better solution might be to write more portable, bullet-proof css.


    I've tried such portable CSS files. They don't word as advertised and I
    don't understand enough of the syntax to write one. How difficult is it
    of the browser developers to get them displaying the same.

    Here's one that shows promise ..
    http://www.digiways.com/articles/php/dyncss/jscssmethod.html
     
    , Oct 2, 2006
    #7
  8. Matt Kruse Guest

    wrote:
    > I use Firefox, most of the viewers will be using Iexplorer. The fonts
    > are different sizes and images don't position correctly.


    Do you have an example url?
    If images position incorrectly just because of font size, you are probably
    misusing css or need to reconsider your design.

    > Here's one that shows promise ..
    > http://www.digiways.com/articles/php/dyncss/jscssmethod.html


    Yuck. Don't look at the user agent to serve up different css! This is always
    bad.

    --
    Matt Kruse
    http://www.JavascriptToolbox.com
    http://www.AjaxToolbox.com
     
    Matt Kruse, Oct 2, 2006
    #8
  9. Guest

    > Do you have an example url?

    Not yet, at the rate I'm going at maybe in a few weeks

    > Yuck. Don't look at the user agent to serve
    > up different css! This is always bad.


    Ok, so its back to a single css with conditionals for Iexplorer. By the
    way this script does work except it won't load opera.css under Opera
    9.02

    document.write('<link rel="stylesheet" href="http://somesite.com/');
    var agt=navigator.userAgent.toLowerCase();
    if (agt.indexOf('opera') != -1) document.write('opera.css');
    else if (agt.indexOf('gecko') != -1) document.write('mozilla.css');
    else if (agt.indexOf('msie') != -1) document.write('iexplorer.css');
    else document.write('default.css');
    document.write('" type="text/css">');
     
    , Oct 2, 2006
    #9
  10. Ian Collins Guest

    Matt Kruse wrote:
    > wrote:
    >
    >>Problem: The web site looks different under Firefox and Iexplorer 6.

    >
    >
    > This is not necessarily a problem. Why must it look identical?
    >
    >
    >>The solution is to load a different CSS file depending on the browser.

    >
    >
    > A better solution might be to write more portable, bullet-proof css.
    >

    I normally end up with a few entries in an IE specific css file to cope
    with the things IE doesn't implement, like :hover.

    I don't think it's possible to get table borders consistent without IE
    specific entries.

    --
    Ian Collins.
     
    Ian Collins, Oct 2, 2006
    #10
  11. Matt Kruse Guest

    wrote:
    > Ok, so its back to a single css with conditionals for Iexplorer.


    Or not. Just design css that works in both. If there are compatability
    problems, use different features or change your design to not rely on
    unimplemented features.

    There is going to be a lot of pain in the world when IE7 is released,
    because people have used hacks and browser-detection to serve up different
    css to different browsers. IE7 will support css much better than IE6, and
    detection/hack scripts that previously tried to make sites look good in IE6
    will start making sites look _bad_ in IE7.

    BTW, if you aren't using a strict doctype, start with that. Using
    cross-browser css becomes much easier once you are in strict mode.

    --
    Matt Kruse
    http://www.JavascriptToolbox.com
    http://www.AjaxToolbox.com
     
    Matt Kruse, Oct 2, 2006
    #11
  12. VK Guest

    wrote:
    > Problem: The web site looks different under Firefox and Iexplorer 6.


    That is way too much of philosophy to be practical IMHO. Unless you are
    doing some cutting edge stuff like behaviors/bindings/SVG/VML: you are
    just dealing with simple box model discrepancies (x is lefter than
    should, y is righter than I expect). Just read the "must have" article
    <http://msdn.microsoft.com/library/default.asp?url=/library/en-us/dnie60/html/cssenhancements.asp>
    (a lot of good guys went out of business before this was forced to be
    implemented, so at least read it). Then place one of suggested
    DOCTYPE's to unify the fox model and try it over. Ask at ciwas for more
    help.
     
    VK, Oct 2, 2006
    #12
  13. On or about 10/2/2006 3:37 PM, it came to pass that Matt Kruse wrote:
    > wrote:
    >> Ok, so its back to a single css with conditionals for Iexplorer.

    >
    > Or not. Just design css that works in both. If there are compatability
    > problems, use different features or change your design to not rely on
    > unimplemented features.
    >
    > There is going to be a lot of pain in the world when IE7 is released,
    > because people have used hacks and browser-detection to serve up different
    > css to different browsers. IE7 will support css much better than IE6, and
    > detection/hack scripts that previously tried to make sites look good in IE6
    > will start making sites look _bad_ in IE7.
    >
    > BTW, if you aren't using a strict doctype, start with that. Using
    > cross-browser css becomes much easier once you are in strict mode.
    >

    Yep I forgot to mention that little issue--to get IE7 to use standard
    CSS it MUST be in strict mode versus quirks mode, otherwise your back in
    IE5/6 territory.
     
    totalstranger, Oct 3, 2006
    #13
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Carlos
    Replies:
    4
    Views:
    21,963
    amimpat
    Aug 11, 2009
  2. jaydev

    browser detection and redirection

    jaydev, Oct 23, 2006, in forum: ASP .Net
    Replies:
    1
    Views:
    467
    Mark Rae
    Oct 23, 2006
  3. jaydev
    Replies:
    41
    Views:
    1,651
    Chaddy2222
    Oct 27, 2006
  4. G. Garrett Campbell

    java version detection and browser notification

    G. Garrett Campbell, Jan 30, 2008, in forum: Java
    Replies:
    5
    Views:
    757
    Roedy Green
    Jan 31, 2008
  5. jaydev

    browser detection and redirection

    jaydev, Oct 23, 2006, in forum: ASP .Net Web Services
    Replies:
    0
    Views:
    132
    jaydev
    Oct 23, 2006
Loading...

Share This Page