Cajas con div que se ven mal en IE

kennyhp · #1 (**permalink**) 01/03/2010, 03:02

Hola tengo un pequeño gran problema con el tipico Firefox Vs IE.

He creado cuatro divs con la siguiente extructura:

En principio lo he creado y en Firefox se ve perfecto, pero cuando voy al IE (8 y 7) se ven muy mal, algo así:

He ido creado la hoja de estilo retocando con el Firebug y me ha quedado así:

Código HTML:

.caja-principal
	{
	    width:70%;
	    margin-left:120px;
	}
	
	.caja-quees
	{
		float: left;
        margin-right: -45px;
        padding-left: 12px;
        width: 310px;

    }
    
    .caja-missio
    {
        float: left;
        margin-left:-264px;
        margin-right: -32px;
        margin-top:104px;
        width: 341px;
    }
    
    .caja-governanca
    {
        float: left;
        margin-left:-308px;
        margin-top:234px;
           
     }
	
	.caja-objectiu
	{
	    float: right;
        margin-right: -45px;
	}

Y el codigo de los div:

Código HTML:

<div class="caja-principal">

<div class="caja-quees">

</div>

<div class="caja-missio">

</div>

<div class="caja-governanca">

</div>

<div class="caja-objectiu">

</div>

</div>

¿que puedo hacer para que se vea bien en IE tambien?

Gracias de antemano.

DragonX · #2 (**permalink**) 01/03/2010, 16:22

probá con esto:

Código HTML:

Ver original<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
  <head>
    <title>New Document</title>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
    <style>
    #mainwrapper{width:960px;overflow:hidden;margin:0 auto;}
    #leftwrapper, #rightwrapper{border:1px solid #f00;overlfow:hidden;width:49%;}
    #leftwrapper{float:left;}
    #rightwrapper{float:right;}
    .cajas-left{margin:2px 6px;border:1px solid #00f;}
    </style>
  </head>
  <body>
    <div id="mainwrapper">
      <div id="leftwrapper">
        <div class="cajas-left">&nbsp;</div>
        <div class="cajas-left">&nbsp;</div>
        <div class="cajas-left">&nbsp;</div>
      </div>
      <div id="rightwrapper">&nbsp;</div>
    </div>
  </body>
</html>

kennyhp · #3 (**permalink**) 02/03/2010, 08:55

Funciona perfecto!! y con mucho menos código!

Gracias

DragonX · #4 (**permalink**) 02/03/2010, 12:33

me alegro!