CSS: image link, change on hover

Question

I have an image that is a link. I want to show a different image when the user hovers over the link.

Currently I'm using this code:

<a href="http://twitter.com/me" title="Twitter link"> <div id="twitterbird" class="sidebar-poster"></div></a>  div.sidebar-poster { margin-bottom: 10px; background-position: center top; background-repeat: no-repeat; width: 160px; } #twitterbird { background-image: url('twitterbird.png'); } #twitterbird:hover { background-image: url('twitterbird_hover.png'); } 

But I'm having loads of problems: the div isn't picking up the CSS rules (the element just isn't showing the related CSS rules when I view it in Firebug).

Perhaps this is because (as I know) this is invalid HTML: you can't put an <a> around a <div>. However, if I switch to <span> then it seems I get bigger problems, because you can't set a height and width on a span reliably.

Help! How can I do this better?

Answer 1

 <a href="http://twitter.com/me" class="twitterbird" title="Twitter link"></a> 

use a class for the link itself and forget the div

.twitterbird {  margin-bottom: 10px;  width: 160px;  height:160px;  display:block;  background:transparent url('twitterbird.png') center top no-repeat; }  .twitterbird:hover {    background-image: url('twitterbird_hover.png'); }