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 13 of 13
  1. #1
    New Coder
    Join Date
    Oct 2002
    Posts
    24
    Thanks
    0
    Thanked 0 Times in 0 Posts

    how can i use a differ CSS for IE and NS?

    man!!

    i spent alot of time reading and stuff and create my site..its looks cool and all..using CSS ..

    but when i launch NS 4.7 to test.. my page and site is whack!!!

    especially the form!! cus i use the input style and select style for colors..

    anyone know how to code so that i can use a differ CSS for NS?

    maybe like .. IF IE use this IF NS use crap..

  • #2
    Regular Coder
    Join Date
    Jun 2002
    Location
    The Netherlands
    Posts
    217
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Make that:
    IF IE then you are already using crap

  • #3
    Regular Coder
    Join Date
    Jun 2002
    Location
    NL
    Posts
    421
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Make a simple stylesheet for NN and call it like this:

    <link rel="stylesheet" href="simple.css" type="text/css">

    Then make another stylesheet with additional styles and/or overriding simple.css and call it with the @import rule which NN doesn't understand:

    <style type="text/css" media="all">@import "style.css";</style>

  • #4
    Regular Coder
    Join Date
    Sep 2002
    Location
    self.location
    Posts
    181
    Thanks
    0
    Thanked 0 Times in 0 Posts
    do ALL other browsers understand @ import? I'm not sure about that...

    At any rate, you can also use the <nolayer> tag to exclude NS4.


    <link rel="stylesheet" href="simpleNS4.css" type="text/css">

    <nolayer>
    <link rel="stylesheet" href="simple.css" type="text/css">
    </nolayer>

    In this case all browsers will see the content of the first external style (which is intended for NS4), but any declarations inside will be "corrected" when they download the second style. Whereas NS4 will see only the first style.

    The same technique works if using local styles. See this little example re: the legendary NS4 "font-pixel" bug.

    <STYLE>
    <!--
    body { font: 400 14px verdana; }
    -->
    </STYLE><nolayer>
    <STYLE>
    <!--
    body { font-size: 13px; }
    -->
    </STYLE></nolayer>

    (edit: just added a missing tag...)
    Last edited by realisis; 10-03-2002 at 09:35 AM.

  • #5
    New Coder
    Join Date
    Oct 2002
    Posts
    24
    Thanks
    0
    Thanked 0 Times in 0 Posts
    nice! guys.. i didnt know about the nolayer tag... must keep on reading.hehe...

  • #6
    Regular Coder
    Join Date
    Jul 2002
    Location
    Raleigh, NC
    Posts
    484
    Thanks
    0
    Thanked 0 Times in 0 Posts
    If you know a server side language like asp, you can determine the browser and link to the appropriate css. This requires you to maintain two separate css but it works.
    -WebMark Art
    Programming is 80% thinking and 20% spelling

  • #7
    New Coder
    Join Date
    Oct 2002
    Posts
    24
    Thanks
    0
    Thanked 0 Times in 0 Posts
    lol.. u read my mind webmarkart... yup doin that now..

    i search around and found this tutorial and sample..

    hope this help other noobs like me..:

    ===== ( JavaScript solution ) =====

    This example shows one method of detecting a user's browser and link
    the current document to a corresponding style sheet. This is
    implemented in two parts: the main script which is written as a
    separate .js file, and a calling script written within the HEAD of each
    page that will link to the style sheets.

    STEP 1: Copy this code and save it as a separate file, for example, as
    css.js

    <!--
    if ((navigator.appName == "Microsoft Internet Explorer") && (parseInt
    (navigator.appVersion)>= 4 )) {
    document.write('<link rel="stylesheet" type="text/css"
    href="ie45.css">')}
    else {
    if (navigator.appName == "Netscape"){
    if (parseInt(navigator.appVersion)>= 5 ){
    document.write('<link rel="stylesheet" type="text/css"
    href="ns6.css">')}
    else {
    document.write('<link rel="stylesheet" type="text/css"
    href="ns4.css">')}
    }
    else {
    document.write('<link rel="stylesheet" type="text/css"
    href="default.css">')}
    }

    //-->

    Note that the above example assumes that you have four style sheets:
    one for IE 4.0 and later, one for Netscape 5.0 and later, one for
    Netsc
    ape versions less than 5, and one for the rest. Make sure that
    each <LINK href= ... > in the script points to the proper path and
    filename of your style sheets.

    STEP 2: Copy this code into the HEAD of each HTML document that you
    intend to link to the stylesheets.

    <script language="JavaScript" src="css.js"></script>

    If you change the name and/or location of the main .js file in Step 1,
    make sure that the <script src= ... > in Step 2 above references the
    correct path and filename of the .js file, or the script will not be
    called and thus not function as intended.

    with IE4+: another option as below;
    gLNGflag is a global variable to be set "language code" in other
    function.
    --------------< source code sample >------------
    <script LANGUAGE="JavaScript">
    <!--

    if (IECheck( 5, "../index.htm" )){
    LNGCheck( "zz", "", "", "" );
    }
    var lang;
    switch(gLNGflag){
    case "ja":
    lang = "jp";
    break;
    case "zt":
    lang = "ct";
    break;
    default:
    lang = "us";
    }
    var css = "<link REL='stylesheet' TYPE='text/css' HREF='doc/vb7" + lang
    +".css'>";
    var sc1 = "<scr" + "ipt LANGUAGE='JavaScript' SRC='doc/vb7whd" + lang
    + ".js'></scr" + "ipt>";
    var sc2 = "<scr" + "ipt LANGUAGE='JavaScript' SRC='doc/vb7chd" + lang
    + ".js'></scr" + "ipt>";
    var sc3 = "<scr" + "ipt LANGUAGE='JavaScript' SRC='doc/vb7ihd" + lang
    + ".js'></scr" + "ipt>";
    var sc4 = "<scr" + "ipt LANGUAGE='JavaScript' SRC='doc/vb7vhd" + lang
    + ".js'></scr" + "ipt>";
    var sc5 = "<scr" + "ipt LANGUAGE='JavaScript' SRC='doc/vb7ltool" + lang
    + ".js'></scr" + "ipt>";
    var sc6 = "<scr" + "ipt LANGUAGE='JavaScript' SRC='doc/vb7wtool" + lang
    + ".js'></scr" + "ipt>";
    var sc7 = "<scr" + "ipt LANGUAGE='JavaScript' SRC='doc/vb7main" + lang
    + ".js'></scr" + "ipt>";
    document.write(css);
    document.write(sc1);
    document.write(sc2);
    document.write(sc3);
    document.write(sc4);
    document.write(sc5);
    document.write(sc6);
    document.write(sc7);
    // -->
    </script>

  • #8
    Regular Coder
    Join Date
    Jun 2002
    Location
    United Kingdom Confused: Often
    Posts
    859
    Thanks
    0
    Thanked 0 Times in 0 Posts
    heres a very simple way to do this that i dug out of one of my old posts, using conditional comments:

    <!--[if gte IE 5]>
    <link rel="stylesheet" src="ie.css" type="text/css">
    <![endif]-->

    <![if lt IE 5]>
    <link rel="stylesheet" src="other.css" type="text/css">
    <![endif]>

    simple... and works without huge amounts of code, just make ie.css for IE and other.css for others.

    hope this helps
    redhead

  • #9
    New Coder
    Join Date
    Oct 2002
    Posts
    24
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Originally posted by redhead
    heres a very simple way to do this that i dug out of one of my old posts, using conditional comments:

    <!--[if gte IE 5]>
    <link rel="stylesheet" src="ie.css" type="text/css">
    <![endif]-->

    <![if lt IE 5]>
    <link rel="stylesheet" src="other.css" type="text/css">
    <![endif]>

    simple... and works without huge amounts of code, just make ie.css for IE and other.css for others.

    hope this helps

    your sooo right lol.. less headache on editing...

    but what is the "gte" and "lt"? in ur condition??

    do i just cut and paste and put in the HEAD tag?

  • #10
    Regular Coder
    Join Date
    Jun 2002
    Location
    United Kingdom Confused: Often
    Posts
    859
    Thanks
    0
    Thanked 0 Times in 0 Posts
    yeah, copy and paste it into the <head> section. the "gte" stands for "greater than or equal to" and the "lt" stands for "less than".

    heres a nifty tutorial on conditional comments:

    http://www.javascriptkit.com/howto/cc.shtml

    redhead

  • #11
    Regular Coder
    Join Date
    Sep 2002
    Location
    self.location
    Posts
    181
    Thanks
    0
    Thanked 0 Times in 0 Posts
    While I also use conditional comments where practical, and Redhead's suggestion is a good one, remember that the technique presumably excludes IE4 as well as NS4 and other browsers. If your intent was to exclude *only* NS4 the <nolayer> is a better option.

    ...

    And Manga, I'm going to save you about 6 months worth of headaches and head-scratching:

    If you use Javascript to fetch an external file via the document.write() method, the technique doesn't work properly on NS4.7. Here's why:

    NS4.7 has another infamous bug whereby any external file (whether style or script) fetched via doc.write IS NOT LOADED THE FIRST TIME a webpage is loaded. Any subsequent reloads to the page *will* fetch the file though.

    This is maddening because at home you tend to reload the same webpage over and over again when testing it or writing to it. Because of this, any problems you see disappear quickly on reload, you end up thinking the technique works fine, and you leave it as is. The bug is extremely difficult to isolate because it keeps coming and going.

    Your visitors though, might only load the page once. They'll never see the stylesheet you intended to fetch.

    If however you use a server-side technique (as webmarket suggested), the bug is not invoked, beacuse the page is assembled before the browser sees it.

    ...

    I should point out that MCookie's original suggestion regarding @import has the advantage of being compliant, and will therefore validate, whereas <nolayer> doesn't validate (if you care about that sort of thing).

    But does IE4 recognize @import? Anybody know?

  • #12
    Senior Coder joh6nn's Avatar
    Join Date
    Jun 2002
    Location
    72 W. 48' 57" , 41 N. 32' 04"
    Posts
    1,887
    Thanks
    0
    Thanked 1 Time in 1 Post
    bluemood | devedge | devmo | MS Dev Library | WebMonkey | the Guide

    i am a loser geek, crazy with an evil streak,
    yes i do believe there is a violent thing inside of me.

  • #13
    New Coder
    Join Date
    Oct 2002
    Posts
    24
    Thanks
    0
    Thanked 0 Times in 0 Posts
    wow..i have learn alot from you guys... thanks all!! u all rock!!


  •  

    Posting Permissions

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