a:hover (adjusting text color) not working! :(

[jpf566]

Well I am very new to CSS and am having some trouble getting the a:hover to work...or at least be consistent... I am running mac OSX and have Safari and Firefox, the a:hover does not work on this...Ive seen on a friends windows computer that SOME of the links on my site came up and some did not... I have a windows laptop (running vista) and none of the link color changes. This is the CSS code that I have used.

}

a:hover {
color: #4B9397;
}

the style sheet can be found at www.sheffieldfurniture.com/styles.css and the site of course is www.sheffieldfurniture.com Thanks in advance everyone

NOTE: The top menu on my page is FLASH so obviously that DOES work, I'm having trouble with all the non flash ones :) (bottom of the page as well as all the submenus on the pages)

[Medyman]

That has nothing to do with which browser you use to view the website. It's how you've written the CSS, or rather, where you've written it.

CSS operates on a cascade based on specificity and positioning. Something called towards the end of a stylesheet takes precedence over something declared above it.

If you were to do something like this:


a {
color:red;
}
a {
color:green;
}

Your links would be green because of this cascade.

Your CSS is experiencing similar. You have to be careful about which order you call the anchor pseudo classes. In general follow these two rules:


a:hover MUST come after a:link and a:visited in the CSS definition in order to be effective


a:active MUST come after a:hover in the CSS definition in order to be effective

[boogyman]

LoVe HAte your anchors

link
visited
hover
active

and on newer browsers

focus
blur

etc... should be declared after those initial four