Foros del Web » Creando para Internet » CSS »

Problema Con Ancho De Divs En IE

Estas en el tema de Problema Con Ancho De Divs En IE en el foro de CSS en Foros del Web. Buenas, estoy intentando aprender a maquetar webs usando HTML y CSS, el caso es que experimentando con una plantilla muy básica que me bajé no ...
  #1 (permalink)  
Antiguo 07/11/2011, 18:42
Avatar de southern  
Fecha de Ingreso: abril-2010
Ubicación: Madrid <=> Lanzarote
Mensajes: 44
Antigüedad: 14 años, 6 meses
Puntos: 5
Pregunta Problema Con Ancho De Divs En IE

Buenas, estoy intentando aprender a maquetar webs usando HTML y CSS, el caso es que experimentando con una plantilla muy básica que me bajé no consigo que el diseño se vea igual tanto en Chrome como en IE.

En IE no se muestran correctamente, uno de los divs se come al otro. El código es el siguiente:

Código HTML:
<!--Force IE6 into quirks mode with this comment tag-->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Dynamic Drive: CSS Left Frame Layout</title>
<style type="text/css">

body{
margin: 0;
padding: 0;
border: 0;
overflow: hidden;
height: 100%; 
max-height: 100%; 
}

#framecontent{
position: absolute;
top: 0;
bottom: 0; 
left: 0;
width: 65%; /*Width of frame div*/
height: 100%;
overflow: hidden; /*Disable scrollbars. Set to "scroll" to enable*/
background: #fff;
color: #000;
}


#maincontent{
position: fixed;
top: 0; 
left: 65%; /*Set left value to WidthOfFrameDiv*/
right: 0;
bottom: 0;
overflow-y: scroll; 
background: #fff;

}

.innertube{
margin: 15px; /*Margins for inner DIV inside each DIV (to provide padding)*/
}

* html body{ /*IE6 hack*/
padding: 0 0 0 200px; /*Set value to (0 0 0 WidthOfFrameDiv)*/
}

* html #maincontent{ /*IE6 hack*/
height: 100%; 
width: 100%; 
}

</style>

<script type="text/javascript">
/*** Temporary text filler function. Remove when deploying template. ***/
var gibberish=["This is just some filler text", "Welcome to Dynamic Drive CSS Library", "Demo content nothing to read here"]
function filltext(words){
for (var i=0; i<words; i++)
document.write(gibberish[Math.floor(Math.random()*3)]+" ")
}
</script>

</head>

<body>

<div id="framecontent">
<div class="innertube">

<p>La lesión de Di María privará al Real Madrid del concurso de su mejor asistente en lo que va de Liga. Del mejor de la Liga, en realidad. El argentino ha regalado nueve pases de gol -Messi y Cristiano le siguen, con cinco-, los dos últimos este domingo, en apenas 10 minutos, para allanar el camino del Real Madrid hacia una nueva victoria, la décima consecutiva.

Cristiano y Pepe fueron los destinatarios de los pases del Fideo. Higuaín y el delnatero portugués son los principales beneficiarios de la visión de juego del '22', con la que el Real Madrid no podrá contar ni en la visita a Mestalla (19 de noviembre), ni en el duelo de Champions ante el Dinamo (día 22) ni en el derbi madrileño de la semana siguiente en el Bernabéu.

De cumplirse matemáticamente los plazos estimados para una lesión de este tipo, probablemente Di María tampoco llegaría al duelo de El Molinón. Lo más seguro es que no se corra ningún tipo de riesgo con el jugador, y más teniendo en cuenta que, una semana después del viaje a Gijón, con el Ajax de por medio, los blancos reciben al Barcelona (10 de diciembre) en el primer clásico liguero del curso.

Un dilema para Mou
La lesión de Di María plantea un dilema a Jose Mourinho, ya que el argentino, además de su versión de asistente, estaba siendo el jugador más agresivo en la presión del Madrid. Su recambio más lógico sería Fabio Coentrao, jugando, como Di María, a pierna cambiada, aunque el técnico del Madrid tiene más opciones: Callejón e incluso Lass. Habrá que esperar dos semanas, hasta el duelo de Mestalla, para ver qué solución elige el de Setúbal.</p>

</div>
</div>


<div id="maincontent">
<div class="innertube">

<img src="imagenes/prueba.PNG" /><br/>
<img src="imagenes/prueba.PNG" /><br/>
<img src="imagenes/prueba.PNG" /><br/>


</div>
</div>


</body>
</html> 
Adjunto dos capturas de cómo se ve en cada navegador:





Agradeceré cualquier tipo de ayuda, muchas gracias de antemano !

Última edición por southern; 07/11/2011 a las 19:01 Razón: Añadir fotos.
  #2 (permalink)  
Antiguo 07/11/2011, 20:44
Avatar de alexk
Colaborador
 
Fecha de Ingreso: julio-2009
Ubicación: De vuelta al trono
Mensajes: 1.698
Antigüedad: 15 años, 4 meses
Puntos: 137
Respuesta: Problema Con Ancho De Divs En IE

no uses posiciones absolutas... y creo que deberias pasar de IE6 a menos que en verdad sea necesario... te recomiendo esta muy util guia http://librosweb.es/ para aprender de la mejor manera
__________________
Toroflix - movies.

Etiquetas: ancho, explorer, html, internet, layout
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 08:59.