Interpretación del padding en ie

safranero · #1 (**permalink**) 14/01/2008, 06:35

Hola amigos,

El html

Código:

<html>
    <head>
        <title>Prueba</title>
        <style type="text/css">
            /* Los codigos más abajo */
        </style>
    </head>

    <body>
       
        <div id="contenedor">
             <div id="izq"></div>
             <div id="der"></div>
        </div>
    
    </body>
</html>

El problema ya lo estareis viendo. En firefox se me ve bien, pero en internet explorer no.

Vale, eso ya sabemos que pasa. Yo voy a concretar aún más. Pongamos en caso, de que creamos una capa contenedor con un ancho de 900px, y dentro de ella creamos 2 más: Una de 800px (float:left) y otra de 100px(float:right).

Hasta ahí todo se vería bien en los 2 exploradores.

El problema es cuando ponemos a la capa contenedor un margen interior (padding) de 10px por ejemplo.

Código:

div#contenedor {
    width:900px; 
    height: 400px;
    padding:10px;
}

div#izq {
    width:800px;
    height:400px;
    float:left;
}

div#der {
    width:100px;
    height:400px;
    float:right;
}

En firefox lo interpreta bien, la suma total del ancho es de 900px;
En internet explorer es de 920px porque suma el padding y es cuando la capa de la derecha (la de 100px) se desborda y sale abajo.

Una solución muy fácil es crear una capa "megacontenedor" de 900px y ponerle el padding de 10px y quitarselo al de contenedor, pero prefiero ahorrarme esa capa.
Seguro que a mucha gente le ha ocurrido este caso, que habeis echo para solucionarlo? Gracias.

Código:

div#megacontenedor {
    width: 900px;
    padding: 10px;
}

Con esto tendríamos el mismo efecto en los 2 navegadores. Pero con 1 capa más.

Otra solución sin crear el megacontenedor es la siguiente:

A la capa contenedor le hacemos las siguientes modificaciones y queda así:

Código:

div#contenedor {
    width:900px; 
    .width:920px; /* Para ie */
    height: 400px;
    padding:10px;
}

div#izq {
    width:800px;
    height:400px;
    float:left;
}

div#der {
    width:100px;
    height:400px;
    float:right;
}

Vereis que hay un pequeño 'hacking' en la capa #contenedor, si se le suma el padding hace el mismo efecto que en firefox lo hace automatico.

safranero · #2 (**permalink**) 14/01/2008, 10:24

Vale, poniendo el doctype xhtml 1.0 strict se soluciona, osea, que hay que quitar el hacking de ie y a marchar, es 900 para los 2. Saludos.

frijolerou · #3 (**permalink**) 15/01/2008, 06:39

safranero: tú mismo lo dijiste... si no colocas de manera el DOCTYPE y la DTD, Internet Explorer entrará en "quirks mode" y tendrás el problema de dimensiones que mencionabas.