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.