Foros del Web » Creando para Internet » CSS »

Espacio en blanco en lista

Estas en el tema de Espacio en blanco en lista en el foro de CSS en Foros del Web. Buenas... Espero que puedan ayudarme con este problema. En mi sitio web , tengo una lista que funciona como menu (Nosotros, portfolio, etc), cuyo background ...
  #1 (permalink)  
Antiguo 10/02/2009, 06:50
 
Fecha de Ingreso: septiembre-2008
Ubicación: Nuñez, Capital Federal
Mensajes: 423
Antigüedad: 9 años, 3 meses
Puntos: 1
Pregunta Espacio en blanco en lista

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.
  #2 (permalink)  
Antiguo 10/02/2009, 06:58
Avatar de Aresillo
Colaborador
 
Fecha de Ingreso: marzo-2008
Ubicación: Becerril de la Sierra
Mensajes: 958
Antigüedad: 9 años, 8 meses
Puntos: 53
Respuesta: Espacio en blanco en lista

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
__________________
Las dudas son el alimento de la inteligencia. A. Einstein
Everything we are is the end result of our thoughts. Sidhartta Gautama
  #3 (permalink)  
Antiguo 10/02/2009, 07:05
 
Fecha de Ingreso: septiembre-2008
Ubicación: Nuñez, Capital Federal
Mensajes: 423
Antigüedad: 9 años, 3 meses
Puntos: 1
Respuesta: Espacio en blanco en lista

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.
  #4 (permalink)  
Antiguo 10/02/2009, 07:21
Avatar de Aresillo
Colaborador
 
Fecha de Ingreso: marzo-2008
Ubicación: Becerril de la Sierra
Mensajes: 958
Antigüedad: 9 años, 8 meses
Puntos: 53
Respuesta: Espacio en blanco en lista

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

Ares
__________________
Las dudas son el alimento de la inteligencia. A. Einstein
Everything we are is the end result of our thoughts. Sidhartta Gautama
  #5 (permalink)  
Antiguo 10/02/2009, 07:26
 
Fecha de Ingreso: septiembre-2008
Ubicación: Nuñez, Capital Federal
Mensajes: 423
Antigüedad: 9 años, 3 meses
Puntos: 1
Respuesta: Espacio en blanco en lista

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.
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 19:46.