Más o menos lo he podido solucionar. Ahora viene el gran problema (que raro). En FF se ve muy bonito pero en IE sale un espacio en blanco muy feo :S no se porqué. Os dejo las comparaciones y el código que llevo y tal para ver si encuentran algún error:
Firefox:
Internet Explorer:
Código HTML: Código 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=utf-8" />
<title>Turismo Madrid</title>
<link href="css/learnspanish.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="central">
<div class="logo"><img src="images/logo.jpg" alt="Turismo Madrid - Aprende Español - Learn Spanish" />
<div class="barinf">
<div class="menu">
<a href="#">Home</a> <span class="separacion">|</span>
<a href="#">¿Porqué Madrid?</a> <span class="separacion">|</span>
<a href="#">Escuelas</a> <span class="separacion">|</span>
<a href="#">Universidades</a> <span class="separacion">|</span>
Síguenos en
<span class="siguenos">
<a href="#"><img src="images/ico_face.gif" alt="Facebook"/></a>
<a href="#"><img src="images/ico_twi.gif" alt="Facebook"/></a>
<a href="#"><img src="images/ico_deli.gif" alt="Facebook"/></a>
<a href="#"><img src="images/ico_madrid.gif" alt="Facebook"/></a>
<a href="#"><img src="images/ico_flick.gif" alt="Facebook"/></a>
</span>
</div>
</div>
<div class="contenido">
<div id="blanco"></div>
<div class="info">
<div class="padre">
<span class="fotos">
<img src="images/img.jpg" alt="Libros" />
<p/>
<img src="images/img2.jpg" alt="Estudiante" />
</span>
<div class="noticias">
<div class="titulo">
<table border="1">
<tr>
<td width="117" nowrap="nowrap" class="tituloizda">Noticia 1 asdfaf</td>
<td width="181" nowrap="nowrap" class="titulodcha"></td>
</tr>
</table>
<!--<span class="tituloizda">Noticia De hoy por la mañana</span>
<div class="titulodcha">a</div>-->
</div>
<br />
<br />
<div class="texto">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec ullamcorper mollis arcu. Quisque libero tortor, venenatis quis, rhoncus sit amet, lacinia sit amet, sapien. Proin ultrices ante id libero. Phasellus nec tellus. Nunc eu nisi et ipsum molestie dictum. </div>
</div>
</div>
</div>
<div class="botones">
<div class="boton">
<a href="#"><img src="images/b_ocio.gif" alt="Ocio"/></a>
</div>
<div class="boton">
<a href="#"><img src="images/b_rutas.gif" alt="Ocio"/></a>
</div>
<div class="boton">
<a href="#"><img src="images/b_deportes.gif" alt="Ocio"/></a>
</div>
<div class="boton">
<a href="#"><img src="images/b_guias.gif" alt="Ocio"/></a>
</div>
</div>
</div>
</div>
</body>
</html>
Código CSS Código HTML:
body{
font-family: Helvetica, Arial, sans-serif;
font-size:13px;
}
img {
border: none;
}
a:link{
text-decoration:none;
color:#FFF;
}
a:hover{
text-decoration:underline;
}
a:visited{
text-decoration:none;
color:#FFF;
}
.central{
width:800px;
height:600px;
margin-left: auto;
margin-right: auto;
margin-top: auto;
margin-bottom: auto;
text-align: center;
border:1px solid #ef2b2d;
}
/**************************************************
Menú de Opciones
**************************************************/
.barinf{
height:27px;
background-image:url(../images/sub.jpg);
}
.barinf .menu{
color: white;
margin:auto;
height:26px;
margin-left: 20px;
text-align:left;
display:table-cell;
vertical-align:middle;
padding-left:58px;
}
.barinf .menu .separacion{
padding:0 10px;
}
.barinf .menu .siguenos{
padding-left: 20px;
position:absolute;
line-height: 10px;
}
/**************************************************
Contenido de la Web
**************************************************/
.contenido{
background-image:url(../images/fondo.jpg);
height:456px;
}
.info{
background-image:url(../images/info.jpg);
height:307px;
width:707px;
position:relative;
top:35px;
left:46px;
}
#blanco{
height:0px;
background-color:#0FF;
}
/*.info{
background-image:url(../images/info2.jpg);
height:304px;
width:704px;
position:relative;
top:22px;
left:48px;
}*/
.padre{
width:100%;
}
.fotos{
width:208px;
float:left;
position:relative;
top:60px;
margin:0 15px;
}
.noticias{
width:457px;
height:200px;
float:left;
position:relative;
top:60px;
}
/**************************************************
Noticia
**************************************************/
.tituloizda{
float:left;
color:#ef2b2d;
font-size:16px;
font-weight:bold;
}
.titulodcha{
float:right;
background-image:url(../images/linea.gif);
margin:0 2px;
height:20px;
}
.texto{
font:Helvetica;
font-size:14px;
width:100%;
text-align:left;
}
.botones{
position:relative;
bottom:-50px;
margin:0 50px;
}
.boton{
float:left;
width:175px;
}
Zanks =) !!