Fairly New to CSS, and could use some help.

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: URL ) is called by a class="links"
If that link doesn't work, you can see the same thing at URL

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.

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.

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.

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!

Thanks rdominy

For the record NS6 supports hover.

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:

(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

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:



... but a more efficient way would be:



... just a suggestion,
bob