Foros del Web » Creando para Internet » CSS »

Interpretación del padding en ie

Estas en el tema de Interpretación del padding en ie en el foro de CSS en Foros del Web. 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> ...
  #1 (permalink)  
Antiguo 14/01/2008, 06:35
 
Fecha de Ingreso: enero-2007
Mensajes: 157
Antigüedad: 10 años, 10 meses
Puntos: 2
Interpretación del padding en ie

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.

Última edición por safranero; 14/01/2008 a las 06:57
  #2 (permalink)  
Antiguo 14/01/2008, 10:24
 
Fecha de Ingreso: enero-2007
Mensajes: 157
Antigüedad: 10 años, 10 meses
Puntos: 2
Re: Interpretación del padding en ie

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.
  #3 (permalink)  
Antiguo 15/01/2008, 06:39
 
Fecha de Ingreso: diciembre-2003
Mensajes: 1.583
Antigüedad: 14 años
Puntos: 13
Re: Interpretación del padding en ie

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.
__________________
El conocimiento es libre: Movimiento por la Devolución
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 04:13.