Dudas con la unidad "em" y con width

dobledealfa · #1 (**permalink**) 11/04/2009, 15:40

Hola estoy empezando con CSS y estoy practicando con la propiedad width de CSS y en el IE y el Iceweasel me aparece diferente que en opera y firefox.
Aqui les dejo el código
HTML:

Código PHP:

  <?xml version="1.0" encoding="UTF-8"?>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

    <head>

        <link rel="stylesheet" type="text/css" href="Margenes.css">

        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

        <title>M&aacute;rgenes</title>

    </head>

    <body>

        <div id="contenido">

            <p style="border: none;">Hola</p>

            <p class="p1">P&aacute;rrafo con margen = margin-left: 1em;</p>

            <p class="p2">P&aacute;rrafo con margen = margin: 2em;</p>

        </div>

    </body>

</html>

CSS:

Código PHP:

  * {

    margin: 0;

    padding: 0;

}

body {

    background-color: #a9f3c8;

    font: 1em sans-serif;

}

p {

    font-size: .9em;

    border: 1px solid black;

    margin-bottom: .5em;

}

div {

    margin-left: .5em

    margin-top: .5em;

    margin-bottom: .5em;

}

div#contenido {

    width: 800px;

    border: 1px solid blue;

    background-color: #bdabab;

}

.p1 {

    width: 35%;

    margin-left: .9em;

}

.p2 {

    width: 28%;

    margin-left: 2em;

}

y aqui les dejo las capturas de pantalla:
firefox (windows xp):
http://img2.imageshack.us/my.php?ima...oxwindowst.png
opera (windows xp):
http://img509.imageshack.us/my.php?i...erawindows.png
IE 6 (windows xp):
http://img2.imageshack.us/my.php?image=98729669.png
opera (debian gnu/linux):
http://img509.imageshack.us/my.php?i...peradebian.png
iceweasel (debian gnu/linux):
http://img509.imageshack.us/my.php?image=iceweasel.png

Con la unidad "em" en el ejemplo esta 1em que es igual a 16 (medida por default en mis navegadores) entonces ¿todas las unidades em que establezca en adelante va a tomar ese valor (1em = 16)? por ejempo
body {
font: 1em sans-serif;
}
p {
font-size: .9em; es igual a 0.9 x 1em(16px) = 14.4px
margin-bottom: .5em; es igual a 14.4 x .5 = 7.2px
width: 20em; es igual a 14.4 x 20 = 288px
}

Gracias.

denica001 · #2 (**permalink**) 11/04/2009, 22:11

Con respecto a tu duda de las unidades "em", estas en lo correcto. Se toma como referencia el valor que tenga asignado tu navegador y se aplica el coeficiente que indique el valor de tu selector de estilo en cuestion. (1 em = 16px, 0.9em = 0,9 x 16px)

Ahora de tu css hay algo que me parece que esta mal y es el div id="#contenido"

donde vos pones

div#contenido {
width: 800px;
border: 1px solid blue;
background-color: #bdabab;
}

deberia ser sin el literal de la etiqueta "div"

#contenido {
width: 800px;
border: 1px solid blue;
background-color: #bdabab;
}

Suerte.

pitufoweb · #3 (**permalink**) 11/04/2009, 23:01

Cita:

Iniciado por denica001

Ahora de tu css hay algo que me parece que esta mal y es el div id="#contenido"

donde vos pones

div#contenido {
width: 800px;
border: 1px solid blue;
background-color: #bdabab;
}

deberia ser sin el literal de la etiqueta "div"

#contenido {
width: 800px;
border: 1px solid blue;
background-color: #bdabab;
}

Suerte.

Hola.
div#contenido es un selector correcto en css. Es casi igual que #contenido, solo que un poco mas especifico.

dobledealfa.
Tienes un error en tu css
div {
margin-left: .5em Falta ;
margin-top: .5em;
margin-bottom: .5em;
}

En este caso para que se vea igual en los navegadores tienes que hacer dos cosas:

Quita la declaracion del xml de tu pagina (<?xml version="1.0" encoding="UTF-8"?> )
En el body especifica un tipo de fuente. Actualmente solo especificas una familia de fuentes, pero ninguna fuente en especifico.

Saludos