rARsh!

Any CSS whizzes out there?

If so, please look at http://www.rarsh.com/css_oddity.html in Internet Explorer, Firefox and Opera.

Any explanations as to why the background colours don’t line up with the “clever” hover?

In Internet Explorer:

In Firefox:

In Opera:

There’s nothing clever in the CSS:

<style type="text/css">
.navbar { float: left; }
a:hover.green { background-color: green; }
a.red:hover { background-color: red; }
a.yellow:hover { background-color: yellow; }
a.blue:hover { background-color: blue; }
a.purple:hover { background-color: purple;}
</style>

and the code itself is simply:

<div class="navbar"><a class="green" href="#"><img src="category.gif" style="border:0;" /></a><a class="red" href="#"><img src="section.gif" style="border:0;" /></a><a class="yellow" href="#"><img src="stuff.gif" style="border:0;" /></a><a class="blue" href="#"><img src="morestuff.gif" style="border:0;" /></a></div>

SO WHY DOESN’T IT WORK IN FIREFOX AND OPERA AS IT DOES IN INTERNET EXPLORER?!