Ver Mensaje Individual
  #1 (permalink)  
Antiguo 16/08/2009, 17:12
Avatar de cristian_cena
cristian_cena
Colaborador
 
Fecha de Ingreso: junio-2009
Mensajes: 2.244
Antigüedad: 14 años, 10 meses
Puntos: 269
Problema al trabajar con: propiedad position, divs y unidad de medida em .. y IE uff

Hola comunidad:

¿Alguien podría explicar a su sobrinito de seis años como funciona la propiedad position aplicada a etiquetas div. Teniendo en cuenta que trabajamos con la unidad de medida em ... y como lograr que el css se vea igual en los navegadores: opera, safari firefox y explorer (en sus más despiadadas versiones)?

Saludo cordialmente luego de haber sido marcado por la frustrante experiencia del fuckyou IE.

Gracias

P/D: origen de la pregunta

<style type="text/css">
*{margin:0; padding:0;}

body {
background-color: #CCCCCC;
font-size:0.75em;
letter-spacing: normal;
text-align: left;
word-spacing: normal;
font-family: Arial, Helvetica, sans-serif;
font-style: normal;
line-height: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
}
#menu_fijo {
position:fixed;
background-color: #3399CC;
width:48.00em;
height:10em;
margin:auto;
height:25em;
padding:1em;
color:#FFFFFF;
}



#content {
background-color: #FFFFFF;
color: #666666;
width: 50.00em;
margin:auto;
}

#header {
width: 48.00em;
height:2.50em;
background-color:#666666;
color:#FFFFFF;
padding:1em;
}
#left {
width:10.50em;
float:left;
background-color:#CCCCCC;
padding:1em;
}
#right {
width:35.50em;
float:left;
padding:1em;
}
#footer {
width: 48.00em;
height:18.75em;
background-color:#666666;
color:#FFFFFF;
padding:1em;
clear:both;
}

</style>


<body>
<div id="menu_fijo">
<p>menu fijo</p>
</div>
<div id="content">
<div id="header">
<p>contenido de la cabecera</p>
</div>

<div id="left">
<p>contenido de la columna izquierda</p>
<p>contenido de la columna izquierda</p>
<p>contenido de la columna izquierda</p>
<p>contenido de la columna izquierda</p>
<p>contenido de la columna izquierda</p>
</div>

<div id="right">
<p>contenido de la columna derecha</p>
<p>contenido de la columna derecha</p>
<p>contenido de la columna derecha</p>
<p>contenido de la columna derecha</p>
<p>contenido de la columna derecha</p>
<p>contenido de la columna derecha</p>
<p>contenido de la columna derecha</p>
<p>contenido de la columna derecha</p>
<p>contenido de la columna derecha</p>
<p>contenido de la columna derecha</p>
<p>contenido de la columna derecha</p>
<p>contenido de la columna derecha</p>
</div>

<div id="footer">
<p>contenido del footer</p>
</div>
</div>


Querría que el div #menu_fijo quedáse centrado.