Espacio en blanco en lista

[locoxchacho]

Buenas... Espero que puedan ayudarme con este problema.

En mi sitio web, tengo una lista que funciona como menu (Nosotros, portfolio, etc), cuyo background son imagenes. La cuestion es que en IE, deja un espacio entre cada elemento de la lista, por mas que yo ya haya definido:

*{margin:0; padding:0}

Este espacio no me sirve porque yo, al cortar las imagenes, ya había contemplado el espacio que tenia que haber entre cada imagen. Por lo que preciso que no haya espacios entre cada elemento de la lista.

Esto solo sucede en IE. En opera y FF, y creo que tambien Chrome, no sucede esto. Alguien sabe por que razon puede ser esto??

El css del menu es este:

Código:

* {margin:0; padding: 0;}
#oculto {display:none; overflow:hidden;}
#oclogos {display:none; overflow:hidden;}
#ocimpresos {display:none; overflow:hidden;}
#ocweb {display:none; overflow:hidden;}
#ocilustraciones {display:none; overflow:hidden;}
.nav {list-style-type:none; text-decoration:none}
.nav a {text-decoration:none; border:0; outline:0}
.nav img {border:0}


/* NOSOTROS */
#nosotros {background-image: url('images/botonera_1.gif'); background-repeat:no-repeat; width:158px; height:27px;}
#nosotros a {float:left; text-decoration: none; width:158px; height:27px;}
#nosotros a:hover,#nosotros a:active,#nosotros a:focus, #nosotros.current {background-image: url('images/botonera_1_r.gif')}

/* PORTFOLIO */
#portfolio {background-image: url('images/botonera_2.gif'); background-repeat:no-repeat; width:158px; height:23px;}
#portfolio a {float:left; text-decoration: none; width:158px; height:23px;}
#portfolio a:hover,#portfolio a:active,#portfolio a:focus, #portfolio.current {background-image: url('images/botonera_2_r.gif')}

/* LOGOS */
#logos {background-image: url('images/botonera_logos.gif'); background-repeat:no-repeat; width:158px; height:25px;}
#logos a {float:left; text-decoration: none; width:158px; height:25px;}
#logos a:hover,#logos a:active,#logos a:focus, #logos.current {background-image: url('images/botonera_logos_r.gif')}

/* IMPRESOS */
#impresos {background-image: url('images/botonera_imp.gif'); background-repeat:no-repeat; width:158px; height:14px;}
#impresos a {float:left; text-decoration: none; width:158px; height:14px;}
#impresos a:hover,#impresos a:active,#impresos a:focus,#impresos.current {background-image: url('images/botonera_imp_r.gif')}

#impresos1 {background-image: url('images/botonera_imp_1.gif'); background-repeat:no-repeat; width:157px; height:22px;}
#impresos1 a {float:left; text-decoration: none; width:157px; height:22px;}
#impresos1.current, #impresos1 a:hover,#impresos1 a:active,#impresos1 a:focus {background-image: url('images/botonera_imp_1_r.gif')}

#impresos2 {background-image: url('images/botonera_imp_2.gif'); background-repeat:no-repeat; width:157px; height:17px;}
#impresos2 a {float:left; text-decoration: none; width:157px; height:17px;}
#impresos2.current, #impresos2 a:hover,#impresos2 a:active,#impresos2 a:focus {background-image: url('images/botonera_imp_2_r.gif')}

#impresos3 {background-image: url('images/botonera_imp_3.gif'); background-repeat:no-repeat; width:157px; height:14px;}
#impresos3 a {float:left; text-decoration: none; width:157px; height:14px;}
#impresos3.current, #impresos3 a:hover,#impresos3 a:active,#impresos3 a:focus {background-image: url('images/botonera_imp_3_r.gif')}

#impresos4 {background-image: url('images/botonera_imp_4.gif'); background-repeat:no-repeat; width:157px; height:14px;}
#impresos4 a {float:left; text-decoration: none; width:157px; height:14px;}
#impresos4.current,#impresos4 a:hover,#impresos4 a:active,#impresos4 a:focus {background-image: url('images/botonera_imp_4_r.gif')}

#impresos5 {background-image: url('images/botonera_imp_5.gif'); background-repeat:no-repeat; width:157px; height:14px;}
#impresos5 a {float:left; text-decoration: none; width:157px; height:14px;}
#impresos5.current, #impresos5 a:hover,#impresos5 a:active,#impresos5 a:focus {background-image: url('images/botonera_imp_5_r.gif')}

#impresos6 {background-image: url('images/botonera_imp_6.gif'); background-repeat:no-repeat; width:157px; height:19px;}
#impresos6 a {float:left; text-decoration: none; width:157px; height:19px;}
#impresos6.current, #impresos6 a:hover,#impresos6 a:active,#impresos6 a:focus {background-image: url('images/botonera_imp_6_r.gif')}

#impresos7 {background-image: url('images/botonera_imp_7.gif'); background-repeat:no-repeat; width:157px; height:15px;}
#impresos7 a {float:left; text-decoration: none; width:157px; height:15px;}
#impresos7.current, #impresos7 a:hover,#impresos7 a:active,#impresos7 a:focus {background-image: url('images/botonera_imp_7_r.gif')}

#impresos8 {background-image: url('images/botonera_imp_8.gif'); background-repeat:no-repeat; width:157px; height:15px;}
#impresos8 a {float:left; text-decoration: none; width:157px; height:15px;}
#impresos8 a:hover,#impresos8 a:active,#impresos8 a:focus, #impresos8.current {background-image: url('images/botonera_imp_8_r.gif')}

#impresos9 {background-image: url('images/botonera_imp_9.gif'); background-repeat:no-repeat; width:157px; height:15px;}
#impresos9 a {float:left; text-decoration: none; width:157px; height:15px;}
#impresos9.current, #impresos9 a:hover,#impresos9 a:active,#impresos9 a:focus {background-image: url('images/botonera_imp_9_r.gif')}

#impresos10 {background-image: url('images/botonera_imp_10.gif'); background-repeat:no-repeat; width:157px; height:27px;}
#impresos10 a {float:left; text-decoration: none; width:157px; height:27px;}
#impresos10.current, #impresos10 a:hover,#impresos10 a:active,#impresos10 a:focus {background-image: url('images/botonera_imp_10_r.gif')}

.....

/* EXPERIMENTAL */
#experimental{background-image: url('images/botonera_3.gif'); background-repeat:no-repeat; width:158px; height:30px;}
#experimental a {float:left; text-decoration: none; width:158px; height:30px;}
#experimental a:hover,#experimental a:active,#experimental a:focus, #experimental.current {background-image: url('images/botonera_3_r.gif')}

/* CONTACTO */
#contacto{background-image: url('images/botonera_4.gif'); background-repeat:no-repeat; width:158px; height:22px;}
#contacto a {float:left; text-decoration: none; width:158px; height:22px;}
#contacto a:hover,#contacto a:active,#contacto a:focus, #contacto.current {background-image: url('images/botonera_4_r.gif')}

Es un poco liado, pero bueno... ese es el codigo :P En donde estan los ... es que hay mas codigo pero no entra, pero basicamente es una repeticion de lo que esta arriba (ilustraciones), pero con otras imagenes de fondo.

Espero que puedan ayudarme, un saludo!

Pablo.

[Aresillo]

buenas..
creo que es mejor que en vez de hacer la lista con imágenes... que es peor y menos accesible hicieras la lista escribiéndola y poniéndole un borde por abajo o por arriba como el que tienes ahora...
Después para el hover, le pones text-decoration: line-through; y te lo tacha..
así no tiras de imágenes y es mas accesible..

ARes

[locoxchacho]

Ares, gracias por tu pronta respuestas, pero tengo dos probelmas (o tres) con respecto a lo que me recomiendas.

Si bien es cierto que al tener tantas imagenes, la primeras vez que se carga puede llegar a tardad un poco, no tarda mas que un flash comun, y al ser una pagina con un frame, solo se carga una vez, por lo que, una vez cargada, el usuario no tendra problemas.

Por otro lado, es cierto. En principio, mi idea era hacerlo con texto, pero el gran problema que tengo es el de la tipografia. La tipografía que se utiliza en las imagenes es caracteriztica del cliente (la misma del logo) y me pidio que si o si tiene que estar esa tipografia, que no es soportada por los navegadores.

Con respecto al hoover, nuevamente, el cliente pidió que se tachara TODO el ancho del menu, y no solo el texto. Y con line-through solo se tacha el texto. Por lo que, nuevamente, eso representa un problema.

Entonces, crei conveniente hacer el menu con las imagenes. De todas formas, con o sin texto, el problema del hilo sigue en pie: IE explorer me deja un espacio en blanco entre los items (<li>) del menu (<ul>)... como se podría solucionar eso, si es que hay forma, para IE??

desde ya muchas gracias por tu ayuda, espero que puedan ayudarme.

Un saludo,

Pablo.

[Aresillo]

antes me pareció verlo pero acabo de mirarlo en IE6 y no me sale el espacio blanco comentado...
será con IE7

Ares

[locoxchacho]

efectivamente, estoy en IE 7...

de todas formas, ten cuidado, que no es un espacio en blanco, es simplemente un espacio. Al ser el background negro, quizas no te des cuenta, pero si seleccionas todo el listado, te daras cuenta de que hay espacios que en, por ejemplo, Opera o FF, no están.
Dices que es un problema propiamente de IE, o me falta definir alguna propiedad??

Gracias!!

Pablo.