Geek Answers Handbook

CSS sprites on the TD table

I want to make a menu with CSS sprites, but there is not ONE browser on the planet that can read it. My problem can be found here .

My CSS code is:

#menuMusica{ width:340px; height:190px; background:url('images/menuMusic.png') 0px 0px; } #menuMusica a:hover{ background: url('images/menuMusic.png') 0px -190px; }

And my HTML:

 <div id="menu"> <table cellspacing=100px> <tr> <td id="menuMusica" onmouseover="soundGuitar();"> <a href="javascript:;" onclick="alerter('This site is under construction! Come back soon. You can always follow me on Facebook and Twitter!');"><img src="images/menuP.png" border=0></a> </td> <td id="menuPhoto" onmouseover="soundPhoto();"> <a href="photo/index.html"><img src="images/menuP.png" border=0></a> </td> </tr> </table> </div>
+4
source share
2 answers

Change #menuMusica a:hover { to #menuMusica:hover { .

+1
source

The problem is that the background 'mouseout' applies to your td element, but your mouseover background applies to the a element inside it. Since element a does not fill all the available vertical space, you cannot see the rollover.

The quickest solution is to add display: block; to styles for your elements a .

If you want to be consistent, you must also transfer the background CSS property from #menuMusica to #menuMusica a .

0
source

More articles:


All Articles