Foros del Web » Creando para Internet » CSS »

Firefox: margen extra en lista desordenada + float.

Estas en el tema de Firefox: margen extra en lista desordenada + float. en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 26/12/2013, 17:55
 
Fecha de Ingreso: febrero-2013
Mensajes: 163
Antigüedad: 11 años, 4 meses
Puntos: 1
Firefox: margen extra en lista desordenada + float.

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.

Última edición por mathiasmontiel; 27/12/2013 a las 02:13
  #2 (permalink)  
Antiguo 27/12/2013, 05:19
Avatar de TSG
TSG
 
Fecha de Ingreso: septiembre-2013
Ubicación: España
Mensajes: 373
Antigüedad: 10 años, 9 meses
Puntos: 9
Respuesta: Firefox: margen extra en lista desordenada + float.

Prueba a cubrir el ul con un div por ejemplo:

Código HTML:
Ver original
  1. <div class="izq">
  2.        <ul>
  3.             <li>Lista 1</li>
  4.             <li>Lista 2</li>
  5.             <li>Lista 3</li>
  6.         </ul>
  7.         </div>

Y en el css del div:

Código CSS:
Ver original
  1. .izq{
  2.       width: 100px; //Aquí le pones una anchura que más o menos vaya a ocupar el menú.
  3.       height: 100px; // Aquí le pones una altura que más o menos vaya a ocupar el menú.
  4.       float: left;
  5. }

¡Felices fiestas!

Saludos.

Etiquetas: background, color, extra, firefox, html, lista, margen
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 05:27.