Foros del Web » Creando para Internet » CSS »

Dudas con la unidad "em" y con width

Estas en el tema de Dudas con la unidad "em" y con width en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 11/04/2009, 16:40
 
Fecha de Ingreso: junio-2006
Mensajes: 48
Antigüedad: 11 años, 6 meses
Puntos: 0
Dudas con la unidad "em" y con width

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:
* {
    
margin0;
    
padding0;
}
body {
    
background-color#a9f3c8;
    
font1em sans-serif;
}
{
    
font-size.9em;
    
border1px solid black;
    
margin-bottom.5em;
}
div {
    
margin-left.5em
    margin
-top.5em;
    
margin-bottom.5em;
}
div#contenido {
    
width800px;
    
border1px solid blue;
    
background-color#bdabab;
}
.
p1 {
    
width35%;
    
margin-left.9em;
}
.
p2 {
    
width28%;
    
margin-left2em;

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.
  #2 (permalink)  
Antiguo 11/04/2009, 23:11
 
Fecha de Ingreso: octubre-2008
Mensajes: 387
Antigüedad: 9 años, 1 mes
Puntos: 18
Respuesta: Dudas con la unidad "em" y con width

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.
  #3 (permalink)  
Antiguo 12/04/2009, 00:01
Avatar de pitufoweb  
Fecha de Ingreso: enero-2008
Ubicación: Un Mundo Raro
Mensajes: 1.148
Antigüedad: 9 años, 11 meses
Puntos: 181
Respuesta: Dudas con la unidad "em" y con width

Cita:
Iniciado por denica001 Ver Mensaje
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:
  1. Quita la declaracion del xml de tu pagina (<?xml version="1.0" encoding="UTF-8"?> )
  2. En el body especifica un tipo de fuente. Actualmente solo especificas una familia de fuentes, pero ninguna fuente en especifico.


Saludos
__________________
------------- " La felicidad no llega de afuera, nace desde dentro. " -------------
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 16:55.