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 !
