Listas como menus descuadradas en IE

sjam7 · #1 (**permalink**) 08/12/2008, 11:22

Hola, he estado usando unas listas para un menu y todo se ve bien, pero cuando abri la pagina en IE6 vi que entre una opcion del menu y otra hay mucho espacio, en Firefox y en IE7 se ven bien pero no se por que en el 6 no se ve bien, el codigo es este:

Código:

.navi {  
    list-style:none;
    margin:0;
    padding:0;
}

.navi li{
    margin:1px;
    padding:0;
}

.navi li a {
    display:block;
    /*width:160px;*/
    padding:4px 0 4px 5px;
    margin:0;
    text-decoration:none;
    text-align:left;
    font-size:11px;
    color:#000;
    background-color:#4ACCD1;
    border-left:10px solid #2DADB4;
}

.navi li a:hover {
    color:#FFF;
    background-color:#2DADB4;
    border-left-color:#FF6600;
}

y la parte de la lista en el HTML es esta:

Código:

<ul class="navi" style="width:100%">
        <li><a href="index.asp">INICIO</a></li>
        <li><a href="buscador.asp">BUSCADOR</a></li>
        <li><a href="contratar.asp">AGREGAR SU EMPRESA</a></li>
        <li><a href="usuarios.asp">USUARIOS</a></li>
    </ul>

Esto lo tengo dentro de un TD con ancho fijo

Gracias de antemano

Aresillo · #2 (**permalink**) 08/12/2008, 11:52

ponle a todos los li esta propiedad:
line- height: XXpx

Sino, puede ser que tengas puesto algún margin en los li o que no tengas puesto margin:0;

Aresillo!!

sjam7 · #3 (**permalink**) 08/12/2008, 12:01

la cosa es que los unicos margin que tengo son los que vienen en el codigo, y el problema es que entre una opcion del menu y la otra el espacio es en blanco

Aresillo · #4 (**permalink**) 08/12/2008, 18:20

Te he retocado el código para lo que querías... o eso creo...
Está validado CSS y XHTML 1.0 strict

Código:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es-es">
<head>
<title>sjam7</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
<style type="text/css">
.navi,navi li {  
    list-style:none;
    margin:0;
    padding:0;
	background-color:#4ACCD1;
}
.navi{
padding-bottom:3px;
}
.navi li a {
    padding:4px 0 4px 5px;
    text-decoration:none;
    font-size:11px;
    color:#000;
    border-left:10px solid #2DADB4;
}
.navi li a:hover {
    color:#FFF;
    background:#2DADB4;
    border-left-color:#FF6600;
}
</style>
</head>
<body>
<ul class="navi">
        <li><a href="index.asp">INICIO</a></li>
        <li><a href="buscador.asp">BUSCADOR</a></li>
        <li><a href="contratar.asp">AGREGAR SU EMPRESA</a></li>
        <li><a href="usuarios.asp">USUARIOS</a></li>
</ul>
</body>
</html>

Aresillo!!