Menu listas con links: Espacios en IE.. PROBLEMÓN

[phpeitor]

Buenas a todos, tengo un menú vertical hecho con listas, de la siguiente manera:

Código HTML:

<ul>
        <li><a href="">enlace 1</a>
        <li><a href="">enlace 2</a>
 ....
</ul> 

En cada <li> tengo puesta una imagen.

Con Firefox todo bién, el problema llega con IE que me deja un espacio entre cada botón. He comprobado que si le quito los links ya no me hace ese espacio, pero es que los enlaces deben quedarse ahi ya que es un menú... He probado con margin: 0, padding:0 ... pero nada, no hacen nada.

He estado buscando por el foro pero no he encontrado nada que pueda ayudarme, si alguien sabe como puede arreglarse esto...


Muchas gracias.

[StarClown]

Iniciado por phpeitor

Buenas a todos, tengo un menú vertical hecho con listas, de la siguiente manera:

Código HTML:

<ul>
        <li><a href="">enlace 1</a>
        <li><a href="">enlace 2</a>
 ....
</ul> 

En cada <li> tengo puesta una imagen.

Con Firefox todo bién, el problema llega con IE que me deja un espacio entre cada botón. He comprobado que si le quito los links ya no me hace ese espacio, pero es que los enlaces deben quedarse ahi ya que es un menú... He probado con margin: 0, padding:0 ... pero nada, no hacen nada.

He estado buscando por el foro pero no he encontrado nada que pueda ayudarme, si alguien sabe como puede arreglarse esto...


Muchas gracias.

Hola PHPEITOR.... vengo al foro de vez en cuando y siempre vengo a consultarles algo pero, no sé si te sirva mi sugerencia con respecto a tu pregunta.

Que tal si CIERRAS todos los tags <li>??

Es que veo que no has cerrado ninguno <li> y al final </li>.... solo INTENTALO!

Saludotes!!!

[phpeitor]

Hola StarClown, gracias por contestar, he probado lo que me dices pero sigue pasando lo mismo :S, no se como arreglar esto.

[StarClown]

Iniciado por phpeitor

Hola StarClown, gracias por contestar, he probado lo que me dices pero sigue pasando lo mismo :S, no se como arreglar esto.

Ok... mira que no soy una experta como los son los Moderadores eh? Pero puedo sugerirte un par de cosas mas.

Mira, como dices que estás usando IMAGENES o sea, BOTONES para colocarlos enlistados... no será que has dejado con margenes esas imágenes.
Prueba con... BORDER="0" PADDING="0" en cada código de IMAGEN o en los ESTILOS CSS de tu Web.

Ahora que leo de nuevo tu mensaje ORIGINAL veo que mencionas lo que acabo de decirte, entonces... sigue REDUCIENDO ESPACIOS y ponle PADDING="-5".


Estoy EDITANDO por que olvide SUGERIRTE algo mas:

En tus estilos CSS puedes maginar los tags <li>, EJEMPLO...

#menu li { margin: 0; }


Me cuentas si te funciona, sale?

[willyfc]

pues ayudaría ver el código css que tienes.

[Calizman]

Iniciado por willyfc

pues ayudaría ver el código css que tienes.

No solo el codigo, sino tambien la version de IE que se ve mal... :

[talmente]

Hola amigo, as pruebas apartie de este codigo:

Código:

<ul>
<li><a href="#">enlace 1</a></li>
 <li><a href="#">enlace 2</a></li>
</ul>      

css

ul {
	margin: 0px;
	padding: 0px;
	list-style: none;
}
li   {
	
	display: inline;
	float: left;
}
li a {
	display: block;
	border-style: none;
	background: #009933 url(tu ruta/tu imagen.png);
	outline: 0;
	height: de tu imagenpx;
	width: de tu imagenpx;
	text-align: center;
	color: #FFFFFF;
}

[Calizman]

Jmm...

Reemplaza tu codigo CSS por esto:

Código CSS:

ul {
    margin: 0px;
    padding: 0px;
    list-style: none;
}
li   {
    display: block;
        width: 50px;
        height: 25px;
        margin: 0px;
        padding: 0px;
}
li a {
    display: block;
    border-style: none;
    background: #009933 url(tu ruta/tu imagen.png);
    outline: 0;
    height: de tu imagenpx;
    width: de tu imagenpx;
    text-align: center;
    color: #FFFFFF;
        margin: 0px;
        padding: 0px;
}
 

[talmente]

Cierto, lei vertical y lo puse horizontal.

[Calizman]

Iniciado por talmente

Cierto, lei vertical y lo puse horizontal.

Y yo pense queel codigo que habias puesto, era el que estaban usando para hacer el menu...

[phpeitor]

Muchas gracias a todos por ayudarme, acabo de leeros y de probar las cosas que me habeis dicho ya que no he podido hacerlo antes.

Finalmente la respuesta de talmente ha sido la que me ha servido, concretamente ha sido:

Código HTML:

li   {
	
	display: inline;
	float: left;

La verdad yo lo he pegado y está funcionando pero no entiendo el porque jeje

Pues nada que gracias talmente por tu ayuda y tambien a los demás

Saludos.

[talmente]

De nada, simpre es un placer ayudar, no recuerdo que proboca ese error y sin ver tu codigo no puedo explicartelo pero bueno problema solucionado.