This is a fairly insignificant problem that I have, but it is bugging the f##k out of me that I can't figure out why it's happening.

In my stylesheet, I have the code:

a:hover {background-color:#FFFFFF;}

applicable to the entire website. And it works fully, except there are 4 single links on my homepage, that the background doesn't turn white when I hover over them. And I have spent hours looking over my code, testing different things, and I cannot figure out why this is happening just to these 4 links. It's doing my head in!

So if you have the time to help me figure out why this is, that would be greatly appreciated. The 4 links in question on my homepage are: "Latest blog entries" "Latest photos" "Galiano Island" and "Victoria". These are the only links on the entire site where this doesn't work.

Oh and what confuses me even more, is that it works fine in IE. Chrome and Firefox though: No dice.

The page in question is: http://www.jrosworld.com/index.html and the stylesheet is at: http://www.jrosworld.com/masterss.css.

Thankyou... please!!!

Although I can't explain WHY it doesn't work, try adding this to your stylesheet

h2 a:hover {background-color:#FFFFFF;}

Your problem stems from your INVALID coding of those links - this is wrong:

<a href="blog.html"><h2>Latest blog entries</h2></a>

<a href="gallery/can_victoria/gallery_index.html"><h3>Victoria</h3></a>

It is INVALID to wrap a block-level element - the HEADINGS- inside an INLINE element - the <a>'s. Put the <a> INSIDE of the Hx elements and the problem should right itself.

VALIDATE your code!

Awesome!!!

Thanks for the help. That's fixed it.