Thread: CSS in Netscape

    #1
  1. No Profile Picture
    Junior Member
    Devshed Newbie (0 - 499 posts)

    Join Date
    Mar 2001
    Posts
    3
    Rep Power
    0
    I've put a simple Style Sheet in one of may pages:
    !--------------------------------------------------!
    <style type="text/css" media=screen>
    .titulo {fontFamily: sans-serif; font-size: 20 pt; color: #ff9400;font-style: italic;}
    A:link {color: #25a0ff; text-decoration: none; font-size: 14 pt;}
    A:visited {color: #25a0ff; text-decoration: none; font-size: 14 pt;}
    A:active {color: #25a0ff; text-decoration: none; font-size: 14 pt;}
    A:hover {color: #ff9400; text-decoration: none; font-size: 16 pt;}
    </style>
    !--------------------------------------------------!
    I use it in a simple way:
    <p class="titulo">bla, bla, bla, bla</p>

    It works in IE but it doesn´t work in Netscape Why?

    Could someone help me? Please

    I've tried an inline definiton for the style, and it works.
  2. #2
  3. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Jan 2001
    Location
    UK
    Posts
    527
    Rep Power
    14
    you should write font-family not fontFamily. I'm surprised IE can recognise this.
    Also, of course, hover will not work in NN4 but it does in Netscape 6.

    John
  4. #3
  5. No Profile Picture
    Junior Member
    Devshed Newbie (0 - 499 posts)

    Join Date
    Mar 2001
    Posts
    3
    Rep Power
    0

    Wink Other Errors


    Originally posted by JohnB
    you should write font-family not fontFamily. I'm surprised IE can recognise this.
    Also, of course, hover will not work in NN4 but it does in Netscape 6.

    John
    Thank you for your colaboration, but it wasn't my only misstake.

    I wrote: " font-size: 20 pt . . ." And it doesn`t work in NN4, becouse of the white-space, I should write "font-size: 20pt".

    Now the page looks like the same in IE and NN4. Great!!!

    Thank you,
  6. #4
  7. No Profile Picture
    Senior Meddler
    Devshed Newbie (0 - 499 posts)

    Join Date
    Dec 2000
    Location
    NY NY USA
    Posts
    142
    Rep Power
    14
    Originally posted by webvilla

    !--------------------------------------------------!
    ...
    A:link {color: #25a0ff; text-decoration: none; font-size: 14 pt;}
    A:visited {color: #25a0ff; text-decoration: none; font-size: 14 pt;}
    A:active {color: #25a0ff; text-decoration: none; font-size: 14 pt;}
    A:hover {color: #ff9400; text-decoration: none; font-size: 16 pt;}
    ...
    !--------------------------------------------------!
    Your a:active rule is doing nothing, by the way.

    Technically, the a:link and a:visited selectors are called link pseudo class selectors and are mutually exclusive -- you can't have a link that is both unvisited and visited. The next two, however, are dynamic pseudo class selectors, meaning that they depend upon the interaction of the user with the page. They are not mutually exclusive with each other or with the link pseudo class selectors. In order for them to work properly, they can't be.

    According to the cascade rules, these four style statements all have the same weight as noted by their selectors (IDs "weigh" more than classes, which "weigh" more than simple element rules). That means that when a conflict arises, the rule that gets applied is the last one stated. Now, when you move your mouse over a link, the hover state is "true" in addition to the link or visited state being true ... but since hover appears lower in the list, its style rule gets applied. When you click on the link, the link/visited state, the active state, and the hover state (your mouse is still "over" the link) are all in effect. Since hover is the last in the list, the active rule never gets implemented.

    The order I've seen recommended for these is:
    ****a:link
    ****a:visited
    ****a:hover
    ****a:active

    hth
    bob
    --
    Bob Boyle
    boyleb@rappdigital.com
    www.rappdigital.com

IMN logo majestic logo threadwatch logo seochat tools logo