problema con imágenes como botones de un menú

[Lyna]

Bueno, puede ser que el problema radica en que el browser se demora en cargar la imagen hover, he aplicado esta forma de hacer botones en dos web, en la primera el link estaba referido a un td, no aun li y las imags. cargaban bien, de esta forma:
<css>
#contLeft { width: 159px; margin: 0px; padding:0px; font-size:11px; font-weight:bold;}
html>body #contLeft { width: 159px; margin: 0px; padding:0px;}
#contLeft table { width: 159px; margin: 0px; padding:0px;}
#contLeft table tr { display:block; width: 159px; clear:both; margin: 0px; padding:0px; background-image: url(back_of.gif); background-repeat: repeat-y;}
#contLeft table tr td { display:block; width: 159px; clear:both; background-image: url(back_of.gif); background-repeat: repeat-y; margin: 0px; padding:0px;}
#contLeft table tr td a { display:block; width: 159px; clear:both; background-image: url(back_of.gif); background-repeat: repeat-y; border-bottom: 1px solid #E8E5D8; margin: 0px; padding:0px;}
#contLeft table tr td h1 { font-family: Arial Narrow, Trebuchet MS, Arial; font-size:11px; font-weight:bold; color: #132E5E; margin-left:20px; margin-right:12px; line-height:16px; padding:8px;}
#contLeft table tr td a:hover { display:block; width: 159px; clear:both; background-image: url(back_on.gif); background-repeat: repeat-y; border-bottom: 1px solid #E8E5D8; margin: 0px; padding:0px;}

</css>

Y otra vez lo hice con li, pero en este caso la imag. de hover era el fondo en blanco, por lo que no podría decir si de haber tenido una imag de hover hubiese aparecido el problema de carga; aquí va:

<css>
#left { margin:0; padding:0; width: 146px;}
#left ul { border: 0; margin:0; padding: 0; list-style-type: none; text-align: left; float:left; background: #FFFFFF; width: 146px;}
#left ul li { display:block; float:left; text-align: left; padding:0px; margin-bottom:5px; margin-top:0px; height: 20px;}
#left ul li#one { display: block; background-image: url(back_menu.jpg); background-repeat: no-repeat; width: 146px; height: 20px; padding: 0; margin-bottom: 5px; color: #595959; text-align: left; font-weight: normal; font-size: 11px;}
#left ul li#one a { display: block; background-image: url(back_menu.jpg); background-repeat: no-repeat; width: 146px; height: 20px; padding: 0; color: #595959; text-align: left; font-weight: normal; font-size: 11px;}
#left ul li#one a:hover { display: block; background: #FFFFFF; width: 146px; height: 20px; padding: 0; color: #466BC2; text-align: left; font-weight: normal; font-size: 11px;}
#left a:active {color: #595959;}
body#sectionone #left li#one a { display: block; background-image: url(back_menu.jpg); background-repeat: no-repeat; width: 146px; height: 20px; padding: 0; color: #466BC2; text-align: left; font-weight: normal; font-size: 11px;}

</css>
La diferencia con tu css, es que identifiqué el li, si tienes varios es súper util, porque puedes cambiar las imags. de los botones según gusto, además que una vez lo apliqué para un menú horizontal y funcionó perfecto.


Saludos y espero haber sido de utilidad.