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