problema con imágenes como botones de un menú

[codigoflecha]

Hola, tengo un problemilla, tengo un menu , cada sencillito botón es una imagen que al situarse sobre él, cambia a otra imagen (igual pero con distintos colores).
El problema es que en firefox perfecto pero en IE, es como si al poner el ratón sobre el botón se ve el fondo de la capa y luego se visualiza correctamente, ¿que puedo hacer para verlo como en firefox?
he subido una página de la web para que la vean, el que quiera claro, se lo agradecería bastante a quien me pueda ayudar, ya que me pasa con dos webs que tengo prácticamente terminadas.
http://www.javierpastor.net/gestiones.html
Un saludo

[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.

[codigoflecha]

Gracias por tu completa respuesta Lyna, voy a probar la opción del li, a ver si me funciona, ya te comentaré los resultados, de todas formas, he pensado en otra opción que voy a probar, en fin , será cuestión de experimentar a fondo.
Un saludo