youarewrongbobisright
New Member
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:\[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');}\[/code\]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 \[code\]<a>\[/code\] around a \[code\]<div>\[/code\]. However, if I switch to \[code\]<span>\[/code\] 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?