problema con menú i IE

[marcvilap]

Buenas compañeros,

Estoy realizando un menú, creo que no muy complicado pero me encuentro una cosa que no encuentro solución.

Tengo un menú con 3 botones y quiero que cuando pases por encima de uno de ellos se substituya el fondo por la imagen : url(Imagenes/boton1.png). El problema es que en IEno puedo controlar las dimensiones de la area donde el enlace es activo. En el código siguiente marco en rojo donde quiero definir este tamaño. En FF si que lo hace bien.

#menu ul{ width:900px; height:200px; margin:0px;margin-top:15px;}
#menu ul li{ width:200px; height:200px; margin:25px; display:inline;}
#menu ul li a { width:310px; height:300px; text-decoration:none; color:#333333;}
#menu ul li a:hover {background-image:url(Imagenes/boton1.png); width:30px; text-decoration:none; color:#333333;}

Grácias por todo

[kseso?]

la imagen que desees que esté visible colocala en:
#menu ul li a {{background-image:url(.... }

Y la que deseas que aparezca al pasar el ratón colocala, ampliando para ie, en:
#menu ul li a:hover, #menu ul li a:focus {background-image:url(Imagenes/boton1.png)...}

Y para que la zona activa del enlace sea mayor que el texto que se muestra define también en
#menu ul li a {display: block; width: ?px;... }

[marcvilap]

El problema es que si pongo display:block el menú se me alinea de manera vertical y yo lo que quiero es que sea horizontal. Nose si me explico

Grácias

[kseso?]

Augh!, se me había pasado
#menu ul li{ float: left;...

y si todos los li van a contener únicamente un enlace en texto, puedes prescindir de las propiedades restantes (tamaño, margen, display...) y colocarlos en:
#menu ul li a

pues quieres meter en un contenedor de "width:200px; height:200px," (los li), elementos con width:310px; height:300px; (los a)