Problema con menu de lista en IE

zsamer · #1 (**permalink**) 16/02/2007, 15:00

Hola tengo un problema con un menu de lista en Internet Explorer.

Sucede que me muestra unos espacios entre las listas, lo pueden ver en este Link.

el codigo CSS es el siguiente:

Código PHP:

  /*/////////////////////////// INFECTEDFX.NET ////////////////////////////////////////*/
body {
    text-align:left;
    margin: 15px;
    height: 100%;
    padding: 0px;
    font-family: Verdana, Arial, Helvetica, Sans Serif;
    font-size: 11px;
    color: #444444;
    background-color: #ccc;
    }
    
/* Contenedor de nuestro menú*/
#navigation{
    width: 191px;
    height: 38px;
    padding:0;
    margin:0;
    background: #666;
}

ul#mainMenu {
    list-style:none;
    margin:0;
    padding:0;
}

ul#mainMenu li{
    padding:0;
    margin:0;    
}

ul#mainMenu li a{
    display:block;
    width: 191px;
    height: 19px;
    margin:0;
    padding:0;
    text-decoration:none;
    text-align:left;
}

ul#mainMenu li a span {
    margin:0;
    padding:0;
    display:none; /*Oculto el texto.*/
}

#inicio {
    background-image:url(../menu-inicio.jpg);
    width: 191px;
    height: 19px;

}

#antecedentes {
    background-image:url(../menu-antecedentes.jpg);
    width: 191px;
    height: 19px;
}

Y el HTML :

Código PHP:

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>xxx</title>
<link href="menu/menu.css" rel="stylesheet" type="text/css" />
</head>
<body>
                <div id="navigation">
                  <ul id="mainMenu">
                    <li id ="inicio"><a href="#"><span>Inicio</span></a></li>
                    <li id="antecedentes"><a href="#"><span>Antecedentes</span></a></li>
                  </ul>
                </div>
</body>
</html>

cualquier idea muy agradecido.

saludos.

zsamer

AlZuwaga · #2 (**permalink**) 16/02/2007, 15:22

Creo que se trata de lo mismo que le ocurrió a falopla en este mensaje

zsamer · #3 (**permalink**) 16/02/2007, 17:55

no, ya lo habia probado y no funciona.

alguna idea?

Mikmoro · #4 (**permalink**) 16/02/2007, 19:25

No sé si podrás cambiarlo debido al javascript que usas, pero el problema está relacionado con que ocultas los span. Si en lugar de display none; usas visibility: hidden;, y le das un padding superior e inferior de 2px, el problema queda resuelto:

ul#mainMenu li a span { margin: 0pt;
padding: 2px 0pt;
color: rgb(255, 0, 0);
visibility: hidden;
}

Ahora, como digo, igual esto te descalabra otras cosas y no es posible hacerlo así.

Mikel.

zsamer · #5 (**permalink**) 16/02/2007, 20:06

Cita:

Iniciado por Mikmoro

No sé si podrás cambiarlo debido al javascript que usas, pero el problema está relacionado con que ocultas los span. Si en lugar de display none; usas visibility: hidden;, y le das un padding superior e inferior de 2px, el problema queda resuelto:

ul#mainMenu li a span { margin: 0pt;
padding: 2px 0pt;
color: rgb(255, 0, 0);
visibility: hidden;
}

Ahora, como digo, igual esto te descalabra otras cosas y no es posible hacerlo así.

Mikel.

Muchas gracias Mikel, Funciona perfecto.

ahora mi duda cual será la diferencia entre usar ?:

Código PHP:

  display:none;

o

Código PHP:

  visibility: hidden;

se usan para lo mismo?

salu2

JavierB · #6 (**permalink**) 17/02/2007, 03:06

Holal zsamer

La diferencia es que visibility:hidden oculta el elemento, pero deja es espacio que ocuparía si se viera. Con display:none no se ve ni el elemento y tampoco queda su espacio vacío.

Saludos,

zsamer · #7 (**permalink**) 17/02/2007, 07:43

Gracias JavierB, ahora me surgió otra duda, ya que display:none oculta el elemento y además no queda su espacio vacío, porqué me habrá generado ese espacio en blanco en IE (Se supone que los elimina) y con visibility:hidden no me muestra esos espacios en blanco.

Me imagino que debe ser porque se trata de IE.