Firefox: margen extra en lista desordenada + float.

mathiasmontiel · #1 (**permalink**) 26/12/2013, 17:55

Hola, tengo un problema en Firefox al usar un margin y un float:left en una lista desordenada.

No me obedece el margen del “ul”. Si pongo un margin-bottom, el margin-top también toma ese margen. Por ejemplo si en el “ul” tengo “margin:0px 0px 25px 0px;” me lo interpreta así: “margin:25px 0px 25px 0px;”.
Sólo sucede cuando le pongo un “float:left” a la etiqueta “li”. En cambio si le quito el “float:left” no tengo este problema.

Hice varias pruebas, algo curioso pasa si le pongo border al “ul”, se arregla poniendo un borde, se elimina el margen extra. También hice pruebas poniendo un div y un nav alrededor pero pasa lo mismo. Probé en otros navegadores, también le pedí a unos amigos para que prueben en sus navegadores y pasa lo mismo sólo en Firefox.

styles.css

Código:

body {
    margin:0; padding:0; color:#EEEEEE; background:#111111;
}

/* No me obedece el margin del "ul" en Firefox.
Por ejemplo si pongo "margin-bottom:25px; margin-top:0px;" no me obedece el margin-top;
y le pone un margen de 25px al top aunque le diga que tiene que ser de 0px;
Lo mismo con "margin:0px 0px 20px 0px;". Interpreta como si fuera "margin:20px 0px 20px 0px;"
Si dejo todo en margin:0; no pasa nada, el problema está al asignar un margin-bottom.
*/
ul {
    margin:0px 0px 20px 0px; padding:0;
}
    ul li {
        float:left; margin:0; padding:0; list-style:none; background-color:#777777;
    }

index.html

Código HTML:

<!DOCTYPE html>
<html lang="es">
    <head>
        <meta charset="utf-8">
        <title>Borrador</title>
        <link rel="stylesheet" type="text/css" href="css/styles.css">
    </head>

    <body>
        <ul>
            <li>Lista 1</li>
            <li>Lista 2</li>
            <li>Lista 3</li>
        </ul>
    </body>
</html>

Gracias de antemano.

TSG · #2 (**permalink**) 27/12/2013, 05:19

Prueba a cubrir el ul con un div por ejemplo:

Código HTML:

Ver original<div class="izq"> 
       <ul>
            <li>Lista 1</li>
            <li>Lista 2</li>
            <li>Lista 3</li>
        </ul>
        </div>

Y en el css del div:

Código CSS:

Ver original.izq{
      width: 100px; //Aquí le pones una anchura que más o menos vaya a ocupar el menú.
      height: 100px; // Aquí le pones una altura que más o menos vaya a ocupar el menú.
      float: left;
}

¡Felices fiestas!

Saludos.