Why does this not work in Firefox?

[Ravasz]

One of my websites has a very simple layout and very simple style sheet:


<style type="text/css">

<!--

a.menu:link {text-decoration:none; color:#ff0000}
a.menu:visited {text-decoration:none; color:#ff0000}
a.menu:active {text-decoration:none; color:#ff0000}
a.menu:hover {text-decoration:none; color:#ffffff; background-color:#ff0000; cursor:crosshair}

a.jap:link {text-decoration:none; color:#6600cc}
a.jap:visited {text-decoration:none; color:#6600cc}
a.jap:active {text-decoration:none; color:#6600cc}
a.jap:hover {text-decoration:none; color:#ffffff; background-color:#6600cc; cursor:crosshair}

a.ro:link {text-decoration:none; color:#0000ff}
a.ro:visited {text-decoration:none; color:#0000ff}
a.ro:active {text-decoration:none; color:#0000ff}
a.ro:hover {text-decoration:none; color:#ffffff; background-color:#0000ff; cursor:crosshair}

a.trans:link {text-decoration:none; color:#ff0066}
a.trans:visited {text-decoration:none; color:#ff0066}
a.trans:active {text-decoration:none; color:#ff0066}
a.trans:hover {text-decoration:none; color:#ffffff; background-color:#ff0066; cursor:crosshair}

BODY
{ background: #ffffff;

scrollbar-face-color:#ffffff;
scrollbar-shadow-color:#000000;
scrollbar-highlight-color:#000000;
scrollbar-3dlight-color:#ffffff;
scrollbar-darkshadow-color:#ffffff;
scrollbar-track-color:#ffffff;
scrollbar-arrow-color:#000000;

}

</style>


I'm not concerned with the scrollbar - I know that only works in IE (right?). But why would those simple link classes not work in Firefox? I thought changing the text color was pretty standard and worked in all browsers.

If you want to see the page in action:

http://www.dreamwatersprings.com/animelody

If you click into a section where there's a list of lyrics, you'll see they're all plain blue underlined links in Firefox (I'm using the newest FF), but they're non-underlined and multi-colored in IE, like they should be.

[Siddan]

Hi

Yea, Firefox is a bit more strict than IE.
You have a major flaw in your css file, so FF cannot read the first property.

have a close check again ;)

[thraddash]

Not to ruin Siddans' fun but you do not need to specify the <style> tags inside a css file.
The <!-- (html comment) is also not allowed.

[6StringGeek]

Also, the order should be link, visited, hover, active.

[Ravasz]

I had no idea about any of those things - I've never taken the time to learn CSS fully. I really appreciate the help, even if I am totally embarrassed now. :3

EDIT

Wait, wait... it's still not working fully.
I took out the:


<style type="text/css">
<!-- (which I forgot to close anyway, despite it being worthless)
</style>


and the pages in the main directory are working properly now off the stylesheet, but the pages in the subdirectories are not. They were originally set up with this:


<LINK REL=stylesheet HREF="../style.css" TYPE="text/css">


Is that wrong? I even tried uploading a copy of the stylesheet to one of the subdirectories, and taking the ../ out of the link to see if it would link up (which matches the code of the pages in the main directory, which are working). Nothing. The pages listing the songs won't respond. What am I still doing wrong?

And I did try changing the order to what you suggested, 6stringgeek, even though I didn't know the order mattered. But that didn't make a difference.

[Siddan]

Save the Link rel on that page in the sub directory again as you tried before with ../styles.css

Upload it so we can check again

[thraddash]

If your stylesheet is located in the root then you can just specify /styles.css, then it won't matter where the pages are sitting in your directories, instead of going back a directory the whole time using ../

[Ravasz]

Whoawhoawhoawhoa. After going through my website again, I realized that CSS is working on some of the pages, but not on others, even though the pages are virtually copies of each other.

Nothing for this website is in the root directory, because there are many different websites on my domain:

root (main domain)
└anime lyrics site (main pages) <-style sheet here
└└subdirectories with lyrics, etc

So I think I'd have to link it with the ../style.css, right?

I really appreciate that you guys are still helping me out! So... is anyone else seeing this too? If you go here in Firefox: http://www.dreamwatersprings.com/animelody/anime.htm and click on "M" (for instance), the CSS is working now because the links are multi-colored! But if you click on "D" (for instance), the CSS is not working. Both pages have the same link to the style sheet, and the same class links for the song titles.

...Now what's happening? :<