PROBLEMA CON DIVS en Internet explorer

Danimal

Lanero Reconocido
22 Nov 2003
1,303
Hola, estoy haciendo un site, cuyo esquema es más menos este:

body {background:url(imagenes/fondoppal.jpg) repeat-x fixed bottom; color:#0066FF }
body { text-align:center }
#contenedor {margin:0 auto; width:750px; height:400px; text-align:left; }
#head {width:750px; height:130px}
#botonera {width:750px; height:19px}
#cuerpo {width:750px; height:251px; }
#logoizq {width:217px; height:251px; float:left ; background-image:url(imagenes/mainizq_01.jpg)}
#textoizq {width:200px; height:220px; float:left ; color:#666666; font:Georgia; font-size:12px; text-align:justify; margin:6px; padding-left:3px}
#subdiv {width:357px; height:251px; float:left }
#flashmain {width:357px; height:219px}
#foot {width:357px; height:32px}
#rolovercont { width:176px; height:251px; float:left}
#cara { width:176px; height:84px; }
#rollcuerpo { width:176px; height:82px}
#senos { width:176px; height:85px}

Bueno, lo que pasa, es que los Divs llamdos Roolcuerpo, cara y senos, son unas imagenes en trancicion...cuando lo previsualizo en Firefox no hay prob..se ve bien ( todo ubicado tal cual)...pero en IE los rolovers paracen debajo del div Cuerpo y justo debajo del div logoizq...
el sitio aun no está temrinado ( falta el head y el cuadrado del medio, que son animaciones Flash)...

les pongo imagenes del site en Ie y en Firefox para que evan a que me refiero...
ojala me puedan ayudar, Thks.
 

Archivos adjuntos

  • firefox.jpg
    firefox.jpg
    32.3 KB · Visitas: 308
  • ie.jpg
    ie.jpg
    33.3 KB · Visitas: 297
Hola, gracias, pero nadie contestó. Esta es la respuesta ( por si alguien le pasa lo mismo).
Al hacer columnas en css, Internet explorer las interpreta mal, por lo que no se le spuede poner Padding ni Margin ( a las que tienen como atributo Float). Lo ideal es crear un "marginador"; así:
¿y los márgenes?
Pero queremos darle un margen interno (padding) a los contenidos de las columnas. Como vimos en el post anterior, no es viable agregar padding o margin a las columnas porque esto modificará su width (width se suma a margin, border y padding). Lo mejor que podemos hacer es incluír elementos especiales para manejar los márgenes:

<div id="container">
<div id="columna-1">
<div class="marginador">
Columna 1
</div>
</div>
<div id="contenido">
<div class="marginador">
Contenido
</div>
</div>
<div id="columna-2">
<div class="marginador">
Columna 2
</div>
</div>
</div>
Y luego en el CSS:

.marginador {
margin:2em}
La unidad em equivale al alto de la letra más alta al tamaño de fuente utilizado. Esta unidad es útil para diseñar “layouts” que se ajustan al tamaño de fuente.
Bien usados, los floats pueden ser muy poderosos para este tipo de estructuras, pero tienen inconvenientes: los elementos contiguos a un float tienden a “rodear” al float, lo que en algunos casos se puede hacer inmanejable. En IE, si el contenido excede el ancho o alto de un elemento, éste incrementará sus dimensiones para acomodar al contenido. Esto se puede traducir en un float más ancho que empuja a las demás columnas y rompe el diseño.
Por último, los floats dependen del orden de los elementos el el código HTML. En la mayoría de los casos es mejor situar el contenido principal del documento lo más arriba posible en el código (los buscadores tienden a dar mayor importancia al contenido superior de las páginas).
 

Los últimos temas