Buenas ante todo decir que soy un poco nuevo en esto de la web y necesito hacer una con urgencia (cosas de los malditos jefes que dan fechas límites sin saber nada).
Mi problema es que tengo creada una css la cual llama la página y se me visualisa correctamente solo en IE 8 en el IE 6 y el Mizilla 3.6.6 me da un espacio hacia abajo que no deseo, cómo arreglo esto paraque se vea en todos como en el IE 8. Por favor contesten hoy si pueden no he podido emncontarar la solución.
Aquí les mando el código html y más abajo el css.
HTML:
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Residencial Tarará</title>
<link href="principal.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="alrededor">
<div id="principal">
<div id="arriba">
<h1>Residencial <strong>Tarara</strong></h1>
<h2>El Logotipo</h2>
<h3>Donde sus días son diferentes</h3>
<ul>
<li><a href="Index.php">Inicio</a></li>
<li><a href="#">Productos</a></li>
<li><a href="#">Noticias</a></li>
<li><a href="#">Suscríbase</a></li>
<li><a href="#">Contáctenos</a></li>
</ul>
</div>
<div id="medio">
<br>
<p>
Quienes Somos para que estamos y que ofertamos Quienes Somos para que estamos y que ofertamos Quienes Somos para que estamos y que ofertamos
Quienes Somos para que estamos y que ofertamos <!--<strong>SIN MODIFICAR EL HTML ORIGINAL</strong>.--> Quienes Somos para que estamos y que ofertamos
Quienes Somos para que estamos y que ofertamosQuienes Somos para que estamos y que ofertamos.<br />
Quienes Somos para que estamos y que ofertamos:
</p>
<!--<ul>
<li><a href="http://www.camaleoncss.com/" target="_blank">CAMALEON CSS</a></li>
<li><a href="http://www.csszengarden.com/tr/espanol/" target="_blank">CSS ZEN GARDEN</a></li>
</ul>-->
<p>
Quienes Somos para que estamos y que ofertamos Quienes Somos para que estamos y que ofertamos Quienes Somos para que estamos y que ofertamos
.
</p>
<p>
Quienes Somos para que estamos y que ofertamos Quienes Somos para que estamos y que ofertamos.
<!--<strong><a href="http://www.cssbeauty.com/" target="_blank">BELLAS MUESTRAS DE OTROS SITIOS EN CSS</a></strong>-->
</p>
<p>
Quienes Somos para que estamos y que ofertamos Quienes Somos para que estamos y que ofertamos Quienes Somos para que estamos y que ofertamos
Quienes Somos para que estamos y que ofertamos Quienes Somos para que estamos y que ofertamos.
<!--<strong><a href="http://www.cssbeauty.com/" target="_blank">BELLAS MUESTRAS DE OTROS SITIOS EN CSS</a></strong>-->
</p>
<p>
Quienes Somos para que estamos y que ofertamos Quienes Somos para que estamos y que ofertamos Quienes Somos para que estamos y que ofertamos
.
<!--<strong><a href="http://www.cssbeauty.com/" target="_blank">BELLAS MUESTRAS DE OTROS SITIOS EN CSS</a></strong>-->
</p>
</div>
<div id="abajo">
<h1>Un regalo exclusivo para compartir en familia y entre amigos, un paraíso de aguas claras, con un clima privilegiado perfecto para su disfrute.</h1>
</div>
</div>
<div class="imagen"></div>
</div>
</body>
</html>
CSS:
* {
margin: 0;
padding: 0;
}
body {
background-color: #20F6FE;
background-image: url(images/fondo-principal.jpg);
background-position: top;
background-repeat: repeat-x;
color: #646464;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
height: 100%;
text-align: center;
}
.imagen {
background-color: #AE552F;
float: left;
height: 331px;
position: relative;
top: -458px;
left: 460px;
width: 216px;
background-image: url(images/imagen.jpg);
border: 2px solid #030FFD;
}
#abajo {
clear: both;
float: left;
height: 75px;
width: 720px;
}
#abajo h1 {
border: #030FFD solid 4px;
clear: both;
font-size: 20px;
height: 60px;
letter-spacing: 3px;
margin: 0 0 0 5px;
padding: 15px 0;
width: 630px;
}
#alrededor {
height: 545px;
margin: 10px auto;
width: 720px;
}
#arriba h1 {
color: #A80506;
float: left;
font-size: 34px;
font-weight: normal;
height: 29px;
left: 37px;
letter-spacing: -3px;
line-height: 26px;
position: relative;
text-align: left;
text-transform: uppercase;
top: 3px;
width: 340px;
}
#arriba h1 strong {
color: #A30468;
}
#arriba h2 {
background-image: url(images/logotipo.jpg);
color: #494846;
float: left;
font-size: 4px;
height: 41px;
left: 74px;
position: relative;
top: 5px;
width: 265px;
}
#arriba h3 {
clear: both;
color: #807C7D;
float: left;
font-size: 15px;
font-weight: normal;
height: 22px;
left: 37px;
letter-spacing: 2px;
line-height: 18px;
margin: -12px 0;
position: relative;
text-align: left;
width: 340px;
}
#arriba li {
display: block;
float: left;
height: 25px;
width: 144px;
}
#arriba li a{
color: #403F3D;
display: block;
float: left;
height: 27px;
letter-spacing: 2px;
padding: 6px 0;
text-decoration: none;
width: 144px;
}
#arriba li a:hover {
background-image: url(images/menu-on.jpg);
background-repeat: repeat-x;
color: #FFFFFF;
display: block;
}
#arriba ul{
background-image: url(images/menu-off.jpg);
background-repeat: repeat-x;
clear: both;
display: block;
float: left;
height: 28px;
position: relative;
top: 12px;
width: 720px;
}
#medio {
clear: both;
float: left;
height: 367px;
width: 720px;
}
#medio li a {
background-color: #DEA68B;
border: solid #A43E18 1px;
color: #FFFFFF;
display: block;
height: 16px;
margin: 3px 0;
padding: 4px 0;
text-align: center;
text-decoration: none;
width: 150px;
}
#medio li a:hover {
background-color: #E54313;
border: solid #7F1B0C 1px;
}
#medio p {
clear: both;
clear: both;
float: left;
font-size: 12px;
margin: 10px 10px 0 20px;
text-align: justify;
width: 400px;
}
#medio p strong {
background-color: #FFFFFF;
font-family: "MS Sans Serif", Geneva, sans-serif;
}
#medio strong a{
background-color: #A43E18;
border: 1px solid #FFFFFF;
color: #FFFFFF;
display: block;
height: 15px;
margin: 5px 0;
text-align: center;
text-decoration: none;
width: 398px;
}
#medio strong a:hover{
background-color: #FFFFFF;
border: 1px solid #A43E18;
color: #A43E18;
}
#medio ul {
clear: both;
clear: both;
display: block;
float: left;
font-size: 12px;
margin: 20px 10px 0 20px;
text-align: justify;
width: 400px;
}
#principal {
background-image: url(images/fondo-areachica.jpg);
background-position: top;
background-repeat: repeat-x;
border: 1px #FFFFFF solid;
height: 545px;
width: 720px;
}