Me he encontrado con un problemilla al intentar maquetar una Web...
Me aparece un pequeño espacio encima de cada imagen si utilizo xhtml estricto (si no lo utilizo todo se ve correcto).
Fui simplificando la página y eliminando elementos sobrantes para que quedara lo mínimo con lo que trastear...
el link al ejemplo: tapatap.es/idea2.html
tenia el codigo en una tabla con todo entero, pero el script solo me funciona si uso el xhtml (tapatap.es/idea3.html)
Agradecería muchísimo si me pudierais echar una mano con esto...
...y aquí va el código:
html
Código HTML :
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="es" xml:lang="es">
<meta http-equiv="content-type" content="text/html; charset=utf8" />
<title>TAPATAP</title>
<link href="./estil.css" rel="stylesheet" type="text/css" />
<link type="text/css" media="screen" rel="stylesheet" href="colorbox.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="./colorbox/jquery.colorbox.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".tapatap").colorbox({width:"50%", inline:true, href:"#inline_tapatap"});
$(".premis").colorbox({width:"50%", inline:true, href:"#inline_premis"});
});
</script>
<style type="text/css">
.hidden{display:none;}
</style>
</head>
<body>
<div class="container">
<div style="float:left;width:409px:height:179px;display:inline;"><img src="img/tapatap_01.gif" width="409" height="179" alt="" usemap="#Map4"></div>
<div style="float:left;width:391px:height:74px;display:inline;"><img src="img/idea_02.gif" width="391" height="74" alt=""></div>
<div style="float:left;width:391px:height:48px;display:inline;"><img src="img/tapatap_03.gif" width="391" height="48" alt=""></div>
<div style="float:left;width:391px:height:57px;display:inline;"><img src="img/tapatap_04.gif" width="391" height="57" alt=""></div>
</div>
<div style="text-align:left;width:800px;margin:auto; background-color:#FFF91E">
<div class="pie" style="text-align:center">
Raselltap S.L. | c/ Jaume Balmes, 70-72. Sant Pere de Ribes | Tels. 627 468 723-679 515 738 | [email protected]</div>
</div>
</div>
<!-- This contains the hidden content for inline calls -->
<div class='hidden'>
<div id='inline_tapatap' style='padding:10px; background:#fff;color:#000;text-align:center'>
<p><strong>Aquests son els colors en els que pots trobar el teu TAPATAP.</strong></p>
<table style="text-align:center;color:#000"><tr>
<td><img src="img/naranja_peque.png" alt="vermell" /><br />Vermell</td>
<td><img src="img/naranja_2_peque.png" alt="taronja" /><br />Taronja</td>
</tr></table>
</div>
<div id='inline_premis' style='padding:10px; background:#fff;color:#000;'>
<p style="text-align:center"><strong>Aquests son els premis que ha rebut TAPATAP.</strong></p>
<table style="text-align:center;color:#000"><tr>
<td width="250"><img src="img/attic_peque.jpg" /><br />Tapatap ha sido presentado en la Feria de Inventos attic'08 de Vilanova i la Geltrú.</td>
<td width="250"><img src="img/emprendre_peque.jpg" /><br />Tapatap obtuvo el 2º Premio a la mejor inicitiva empresarial en los Premios e-mprendre de Vilanova i la Geltrú en el 2008.</td>
</tr><tr>
<td width="250"><img src="img/inov_peque.png" /><br />Tapatap participó en el Festival I'NOV de Merignac, Francia, en octubre de 2008.</td>
<td width="250"><img src="img/diba_peque.jpg" /><br />Finalista en els premis de la Diputació.</td>
</tr></table>
</div>
</div>
</body>
</html>y el css
Código :
* {padding: 0;margin:0;}
body {
color: #FFFFFF;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
text-align:center;
margin: 0 auto;
padding:0 auto;
}
a {
font-size: 14px;
font-family: Arial, Helvetica, sans-serif;
color: #006600;
text-decoration: none;
margin-left:15px;
margin-right:10px;
margin-top:5px
}
.provincia {
font-size: 16px;
color: #FFFFFF;
font-family: Arial, Helvetica, sans-serif;
float:center;
text-align:left;
width:650px;
height:300px;
margin:60px;
overflow:auto
}
.ciudad {
font-size: 14px;
font-family: Arial, Helvetica, sans-serif;
color: #006600;
float:center;
text-align:left;
width:620px;margin-left:15px;
margin-right:10px;
margin-top:5px
}
.tienda {
font-size: 12px;
color: #FFFFFF;
font-family: Arial, Helvetica, sans-serif;
float:center;
text-align:left;
width:580px;
margin-left:20px;
margin-right:15px;
margin-top:5px;
margin-bottom:5px
}
.pie {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #009900;
}
.container{
text-align:left;
width:800px;
margin:auto;
padding:0;
background-color:#FFF91E;
}
img{
border:0px;
margin:0px;
padding:0px;
} 