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

    Join Date
    Mar 2001
    Posts
    3
    Rep Power
    0

    Unhappy


    I have been working on a site, and trying to employ the use of a style sheet. When I first had it up, it seemed to work fine, but since downloading the IE6 beta, I find that it doesn't disply properly. Netscape seems to have trouble with it as well.

    Here is my external .css code:

    BODY {background-color:"#000000"; font-family: Verdana; font-size: 8pt; font-style: normal; line-height: normal; font-weight: normal; font-variant: normal; text-transform: none; color: #FFFFFF; text-decoration: none}

    a:link { font-family: Verdana; font-size: 10pt; font-style: normal; line-height: normal; font-weight: normal; font-variant: normal; text-transform: none; color: #b9b9b9; text-decoration: none}

    a:visited { font-family:Verdana; font-size: 10pt; font-style: normal; line-height: normal; font-weight: normal; font-variant: normal; text-transform: none; color: #FFFFFF; text-decoration: none}

    a:hover { font-family:Verdana; font-size: 10pt; font-style: normal; line-height: normal; font-weight: bold; font-variant: normal; text-transform: none; color: #a0cde5; text-decoration: underline}

    .quotes { font-family:Verdana; font-size: 8pt; font-style: italic; line-height: normal; font-weight: normal; font-variant: normal; text-transform: none; color: #a0cde5; text-decoration: none}

    .links { a:link { font-family: Verdana; font-size: 10pt; font-style: normal; line-height: normal; font-weight: normal; font-variant: normal; text-transform: none; color: #b9b9b9; text-decoration: none};

    a:visited { font-family:Verdana; font-size: 10pt; font-style: normal; line-height: normal; font-weight: normal; font-variant: normal; text-transform: none; color: #FFFFFF; text-decoration: none};

    a:hover { font-family:Verdana; font-size: 10pt; font-style: normal; line-height: normal; font-weight: bold; font-variant: normal; text-transform: none; color: #a0cde5; text-decoration: underline};}

    In the html page (that can be seen here: http://www.wrhino.com/links.html ) is called by a class="links"
    If that link doesn't work, you can see the same thing at http://www.bnaude.com/newsite/rhino_links.html

    Again, it worked fine in IE 5.5, but have never been able to get the rollovers to work in Netscape6, and now, the text in the middle and far right columns look to be around 12 point, when they should be 10 (in IE6) and don't show up at all in NS4.7.

    Any help or guidance to my stupidity would be appreciated.
    Last edited by Roca; March 29th, 2001 at 07:59 AM.
  2. #2
  3. No Profile Picture
    Seņor Member
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Aug 2000
    Posts
    1,157
    Rep Power
    38
    First of all, what OS are you using? Both IE and Netscape (irrespective of versions) display HTML differently on a Mac, than they do in Unix or Windows. I don't have access to IE 6, so what version of Netscape are you using to view it when it doesn't work correctly. Could you provide a bit of a description on what doesn't work (CSS-wise)? As for the roll-overs, N6 has a different Document Object Model than N4 or IE5, so you will most likely need to use browser-sniffing code and provide a different set of JavaScript for each browser in order to get your rollovers to work. N4 uses document.layers, IE5 uses document.all and/or document.GetElementById(), and N6 uses document.GetElementById(). Finally, when providing code examples, would you please enclose them in <code></code> tags (where "<" = "[" and ">" = "]")? TIA.
    Michael
  4. #3
  5. No Profile Picture
    Junior Member
    Devshed Newbie (0 - 499 posts)

    Join Date
    Mar 2001
    Posts
    3
    Rep Power
    0
    pieux,

    Thanks for the reply. I am using Win98. NS 4.7 the middle and far columns do not show at all. IE6 the font size changes. IE5.5 everything works fine. NS6 the rollovers do not work, although I have heard that NS6 supports style sheets better, so I assumed this meant all aspects of it. That's my fault.

    Thanks again.
  6. #4
  7. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Feb 2001
    Posts
    81
    Rep Power
    14
    Netscape 4.X doesn't support the notion of hover/rollover links. As far as I know, there is no clean work around for this. Not sure about NS 6.

    As for your right column not showing -- the text is there but the color is black. That's because you have the style applying to links, but the text in that box have no link tags around them.

    Hope that helps!
    Robert Dominy
    About Guide for JavaScript
    http://javascript.about.com
    Software Consulting & Development
    http://www.angusog.com
  8. #5
  9. No Profile Picture
    Junior Member
    Devshed Newbie (0 - 499 posts)

    Join Date
    Mar 2001
    Posts
    3
    Rep Power
    0
    Thanks rdominy
  10. #6
  11. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Jan 2001
    Location
    UK
    Posts
    527
    Rep Power
    14
    For the record NS6 supports hover.
  12. #7
  13. No Profile Picture
    Senior Meddler
    Devshed Newbie (0 - 499 posts)

    Join Date
    Dec 2000
    Location
    NY NY USA
    Posts
    142
    Rep Power
    14
    Hi Roca,

    There are a few mistakes in your style sheet -- and when you get a mistake in a style rule, it will screw up at least the rest of the properties in that rule or, depending on the nature of the mistake, that entire rule and everything else from there on down.

    First error: in your body rule, you've got quotes around the value for your background-color. Get rid of them.

    Last error (but it's a big one): you've written a series of rules like this:
    Code:
    .links { 
         a:link { font-family: Verdana; font-size: 10pt; font-style: normal; line-height: normal; font-weight: normal;
                     font-variant: normal; text-transform: none; color: #b9b9b9; text-decoration: none}; 
         a:visited { font-family:Verdana; font-size: 10pt; font-style: normal; line-height: normal; font-weight: 
                     normal; font-variant:  normal; text-transform: none; color: #FFFFFF; text-decoration: none}; 
         a:hover { font-family:Verdana; font-size: 10pt; font-style: normal; line-height: normal; font-weight: bold;
                     font-variant: normal; text-transform: none; color: #a0cde5; text-decoration: underline};
    }
    (I changed your formatting a little to emphasize what's wrong.)

    You can't "group" style rules this way. If you want all of these rules to be associated with the .links class, you need to write the selectors like this:

    a.links:link
    a.links:visitied
    a.links:hover

    Of course, don't forget the <a href="" class="links"> in order for them to take effect.

    Any reason for all the "property: normal"s? You might want to yank them, since they really aren't necessary.

    hth
    bob
    --
    Bob Boyle
    boyleb@rappdigital.com
    www.rappdigital.com
  14. #8
  15. No Profile Picture
    Senior Meddler
    Devshed Newbie (0 - 499 posts)

    Join Date
    Dec 2000
    Location
    NY NY USA
    Posts
    142
    Rep Power
    14

    Talking ... and another thing ...


    Just looking over your rules again and noticing that you repeat a lot of properties that could be put into one rule, then use separate rules for what is different across a group. For example, your .links rules could be written:

    Code:
    a.links:link {font-family: Verdana; font-size: 10pt; font-style: normal; line-height: normal; font-weight: normal;
                       font-variant: normal; text-transform: none; color: #b9b9b9; text-decoration: none}
    
    a.links:visited {font-family:Verdana; font-size: 10pt; font-style: normal; line-height: normal; font-weight: 
                             normal; font-variant:  normal; text-transform: none; color: #FFFFFF; text-decoration: none}
    
    a.links:hover {font-family:Verdana; font-size: 10pt; font-style: normal; line-height: normal; font-weight: bold;
                           font-variant: normal; text-transform: none; color: #a0cde5; text-decoration: underline}
    ... but a more efficient way would be:

    Code:
    .links {font-family: Verdana, sans-serif; font-size: 10pt;}
    
    a.links:link {color: #b9b9b9; text-decoration: none;}
    
    a.links:visited {color: #FFFFFF; text-decoration: none;}
    
    a.links:hover {color: #a0cde5; text-decoration: underline;}
    ... just a suggestion,
    bob
    --
    Bob Boyle
    boyleb@rappdigital.com
    www.rappdigital.com

IMN logo majestic logo threadwatch logo seochat tools logo