IE & Mozilla and CSS hyperlinks 1

[rileypetty]

I just realized I have a problem with some of my hyperlinks. I'm using this CSS class on several links,

A:hover.clsHMpage { color:"#ffff33"; text-decoration:underline }
.clsHMpage { color:"#fff5c8"; text-decoration: none }

and when you view the page in IE it looks as it should. When it's viewed in Mozilla the hyperlinks look like they did in the old days, blue (the background is dark green). I've been searching for a CSS comparision chart for IE & Mozilla but can't seem to find what I'm looking for. Can someone point me in the right direction? I'm assuming the CSS needs some additional code for Mozilla. Thanks for any help you may be able to give me.

 

[Vragabond]

Of course we'll help you. Mozilla does not need additional code, it needs correct code. IE is forgiving and tries to interpret incorrect code for you.

Your problem are quotes around colour names in the color declaration. CSS does not take quotes around color values and if there are quotes, it makes the entire declaration invalid. Hence, finding an invalid declaration, Mozilla skips it.

In addition to that, you should pay attention to the following two things:

1. Each element (in IE6 and lower only anchors) can have one of five pseudo states declared to it. :link, :visited, :focus, :hover, :active. If none is declared, it is assumed you want the same style for them all. If any two of them are assigned, then they should be in the order they appear on my list. If they are not in this same order, there are good chances that some effects would be lost. I would advise you to switch the order of your two lines.

2. This is of much less importance than other errors in your CSS and I do believe that it works one way or another, but I would suggest you follow a more logical succession in your selectors: element -> class -> pseudo-class. This might have implications in some circumstances or it might not. Your first line would thus change to: [tt]a.clsHMpage:hover { ... }[/tt]



___________________________________________________________
[small]Do something about world cancer today: Comprehensive cancer control information at PACT[/small]

 

[rileypetty]

Thank you very much for the help. I've been using this code for some time but just never thought about the detail that you described until I saw my site in Mozilla. And I've looked at a lot of CSS sites and books but none seem to make it as clear as you have. Any suggestions on what site or book that follows your approach? Thanks again.

 

[traingamer]

Many links reference the LoVe HAte mnemonic.
See: CSS tips and tricks, Part 2 or link-specificity for some very specific explanations and examples.

Greg
People demand freedom of speech as a compensation for the freedom of thought which they seldom use. Kierkegaard

 

[BigRed1212]

Many links reference the LoVe HAte mnemonic

I always use Eric Meyer's
Los
Vegas
Homeowners
Association.

I like "love hate" as well though.