Estoy creando una web con una pantalla principal con DIV organizados en:
contenedor
cabecera
cuerpo
lateral
principal
Iframe
pie
En Chrome los tamaños se ven de forma correcta pero en internet explorer el tamaño del DIV "principal" que contiene un Iframe no se ajusta al tamaño de pantalla.
Mi codigo HTML:
Código:
Y mi hoja de estilos:<!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">
<head>
<title>La Liamos! Nos Casamos!!</title>
<meta http-equiv="content-language" content="ES" />
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta http-equiv="content-script-type" content="text/javascript" />
<meta http-equiv="content-style-type" content="text/css" />
<meta name="description" content="Principal" />
<link href="style.css" rel="stylesheet" type="text/css">
<link href="images/vmenu.css" rel="stylesheet" type="text/css">
<style type="text/css">
body {
background-image: url(images/r_bg.jpg);
background-repeat: repeat-x;
}
</style>
</head>
<body>
<div id="contenedor">
<div id="cabecera"></div>
<div id="cuerpo">
<div id="lateral">
<table width="210" height="450" border="0" cellspacing="0" cellpadding="0" id="menu">
<tr>
<td id="boton"><li class="selected first"><a class="selected first" href="Principal/" target="contenido" title="Principal"><span>Principal</span></a></li></td>
</tr>
<tr>
<td id="boton"><li><a href="Nuestra-Historia/" target="contenido" title="Nuestra Historia"><span>Nuestra Historia</span></a></li></td>
</tr>
<tr>
<td id="boton"><li><a href="Pagina 1/" target="contenido" title="Enlace"><span>Pagina 1</span></a></li></td>
</tr>
<tr>
<td id="boton"><li><a href="Pagina 2/" target="contenido" title="Enlace"><span>Pagina 2</span></a></li></td>
</tr>
<tr>
<td id="boton"><li><a href="Pagina 3/" target="contenido" title="Enlace"><span>Pagina 3</span></a></li></td>
</tr>
<tr>
<td id="boton"><li><a href="Pagina 4/" target="contenido" title="Enlace"><span>Pagina 4</span></a></li></td>
</tr>
<tr>
<td id="boton"><li><a href="Pagina 5/" target="contenido" title="Enlace"><span>Pagina 5</span></a></li></td>
</tr>
<tr>
<td id="boton"><li><a href="Pagina 6/" target="contenido" title="Enlace"><span>Pagina 6</span></a></li></td>
</tr>
<tr>
<td id="boton"><li><a href="Pagina 7/" target="contenido" title="Enlace"><span>Pagina 7</span></a></li></td>
</tr>
<tr>
<td id="boton"><li><a href="Pagina 8/" target="contenido" title="Enlace"><span>Pagina 8</span></a></li></td>
</tr>
</table>
</div>
<div id="principal">
<iframe src="1.php" id="contenido" name="contenido" frameborder="0" allowtransparency="true" scrolling="auto"></iframe>
</div>
</div>
<div id="pie">
© 2013
</div>
</div>
</body>
</html>
Código:
Adjunto un par de imagenes de como se ve con cada navegador<style type="text/css">
body {
margin: 5 5 5 5px;
text-align: center;
background-color: #ebebeb;
height:100%;
}
html{
height:100%;
}
#contenedor{
height:100%;
text-align:left;
margin: auto;
}
#cabecera{
height:100px;
font-size:12pt;
font-weight: bold;
background-image: url(images/Logo.png);
background-repeat:no-repeat;
background-position:center;
}
#cuerpo{
height:100%;
margin: 5 0 5 0px;
overflow:hidden;
}
#lateral{
width: 210px;
height:450px;
float:left;
}
#lateral ul{
margin : 0 0 0 0px;
padding: 0 0 0 0px;
list-style: none;
}
#lateral li{
margin: 2 2 2 2px;
padding: 2 2 2 2px;
font-weight: bold;
}
#lateral a{
text-decoration: none;
}
#principal{
margin-left: 210px;
height:100%;
padding-left:10px;
}
#pie{
background-color: #cccccc;
padding: 3 10 3 10px;
text-align:right;
}
#contenido{
width:100%;
height:83%;
}
#boton{
background:url(images/mn.jpg) no-repeat #08172A;
border-bottom:1px solid #2F4C5E;
padding:0px 10px;
height:38px;
}
#boton li a {
color:#FFF;
font-weight:bold;
text-decoration:none;
height:38px;
width:176px;
text-align:right;
line-height:38px;
font-size:16px;
font-family:arial;
}
#titulo{
font-family:"Comic Sans MS", cursive;
font-size:32px;
color:#FFF;
line-height:normal;
text-align:center;
}
#parrafo{
font-family: Comic Sans MS,cursive;
font-size: 16px;
color: rgb(255, 255, 255);
line-height: normal;
text-align:justify;
}
#form1 table{
font-family:"Comic Sans MS", cursive;
font-size:16px;
color:#FFF;
}
#form1 table p em{
font-family:"Comic Sans MS", cursive;
font-size:12px;
color:#FFF;
}
Alguien me puede ayudar a solucionarlo? Algún otro método mejor para lo que estoy intentando hacer?
Un saludo
