Espaço aparece do nada
Olá amigos,
Sou totalmente contra a estruturação de um layout em tabelas, mas dando continuidade num projeto no meu trabalho me deparei com uma construção nesse padrão.
Para piorar meu lado tive que redimensionar o site para 960px, pois o outro estava com 1300 .. aí me deparei com o seguinte erro:
Em uma das tabelas por algum motivo, que eu desconheço, aparece um espaçamento desencaixando totalemente o layout no FF e no IE 8.
Vou postar o codigo:
<!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>
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Grupo Iana de Alimentos</title>
<style type="text/css">*{
overflow:hidden;
}<!--
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
background-image: url(imgs/bg.jpg);
background-position:center;
background-repeat:repeat-y;
}
.style1 {
font-family: Geneva, Arial, Helvetica, sans-serif;
font-weight: bold;
font-size: 16px;
color: #FF8506;
}
.style2 {
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #666666;
}.style3 {font-size: 14px}
.style5 {font-family: Geneva, Arial, Helvetica, sans-serif; font-size: 10px; color: #666666; }
.style6 {font-size: 10px}
-->
</style>
<script src="Scripts/AC_RunActiveContent.js" type="text/javascript"></script>
</head>
<body>
<map name="Map3" id="Map3">
<area shape="rect" coords="82,24,405,171" href="index.html" />
</map>
<table width="960" border="0" align="center" cellpadding="0" cellspacing="0" background="imgs/bg_pg.jpg">
<tr>
<td width="960" height="0"><table width="960" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="960" height="236" background="imgs/header.jpg"><script type="text/javascript">AC_FL_RunContent( 'codebase','http-~~-//download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0','width','960','height','236','wmode','Transparent','src','media/header','quality','high','pluginspage','http-~~-//www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash','movie','media/header' ); //end AC code
</script><noscript><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http-~~-//download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0" width="960" height="236">
<param name="movie" value="media/header.swf" />
<param name="quality" value="high" />
<param NAME="wmode" Value="Transparent">
<embed wmode=”transparent” src="media/header.swf" quality="high" pluginspage="http-~~-//www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="960" height="236"></embed>
</object></noscript></td>
</tr>
</table>
<table width="960" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="295" height="135" valign="top"><table width="295" border="0" cellspacing="0" cellpadding="0">
<tr>
<td height="68"><img src="imgs/menu_esq.png" width="295" height="68" border="0" usemap="#Map" /></td>
</tr>
<tr>
<td height="35"> </td>
</tr>
<tr>
<td height="32" background="imgs/faixa_cima_sup_esq.png"> </td>
</tr>
</table></td>
<td width="341" valign="top"><img src="imgs/logo.png" width="341" height="135" border="0" usemap="#Map4" /></td>
<td width="324" valign="top"><table width="324" border="0" cellspacing="0" cellpadding="0">
<tr>
<td height="68" colspan="2"><img src="imgs/menu_dir.png" width="324" height="68" border="0" usemap="#Map2" /></td>
</tr>
<tr>
<td width="35" height="72" rowspan="2" background="imgs/base_menu_dir.png"> </td>
<td width="260" height="37"> </td>
</tr>
<tr>
<td height="31"> </td>
</tr>
</table></td>
</tr>
</table><table width="960" border="0" cellspacing="0" cellpadding="0">
<tr>
<td height="144" valign="top" background="imgs/faixa_sup.png"><table width="960" border="0" cellspacing="0" cellpadding="0">
<tr>
<td height="144"> </td>
<td valign="top"><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td align="left"><table width="695" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="230" rowspan="2"> </td>
<td width="123" rowspan="2"><img src="imgs/index/Bolo_de_cenoura.jpg" width="121" height="80" /></td>
<td width="23" rowspan="2" valign="top"><br /></td>
<td width="159" rowspan="2" valign="top"><img src="imgs/index/receita_do_dia.png" width="121" height="20" style="margin-bottom:5px;" />
<span class="style1">
<br />
<span class="style3">Bolo de Cenoura</span></span><br />
<span class="style5"># 1/2 xícara (chá) de óleo<br />
# 3 cenouras médias raladas<br />
# 4 ovos Iana<br />
# 2 xícaras (chá) de açúcar ...</span></td>
<td width="160" height="20" align="center" valign="top"> </td>
</tr>
<tr>
<td align="center" valign="top"><a href="receitas.html"><img src="imgs/index/receita_completa.png" width="120" height="60" border="0" /></a></td>
</tr>
</table></td>
</tr>
</table></td>
<td width="130"> </td>
</tr>
</table></td>
</tr>
</table>
<table width="960" border="0" cellspacing="0" cellpadding="0">
<tr>
<td height="161" background="imgs/faixa_inf.png"><table width="960" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="138" height="161"> </td>
<td valign="top"><table border="0" cellspacing="0" cellpadding="0">
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td align="left"><table width="699" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="146"> </td>
<td width="208" align="right"><img src="imgs/index/producao_completa.png" width="120" height="60" /></td>
<td width="23" valign="top"><br /></td>
<td width="157" align="right" valign="top"><img src="imgs/index/producao.png" style="margin-bottom:5px;" width="75" height="20" /><br />
<span class="style1"><span class="style3">Higiene</span></span><br />
<span class="style2"><span class="style6">Todas as etapas do processo de produção e venda dos ovos, desde a recria das galinhas até a chegada do produto ao consumidor, seguem ..</span>.</span></td>
<td width="165" align="center" valign="top"><img src="imgs/index/producao1.jpg" width="105" height="70" /></td>
</tr>
</table></td>
</tr>
</table></td>
<td width="138"> </td>
</tr>
</table></td>
</tr>
</table>
</td>
</tr>
</table>
<map name="Map" id="Map">
<area shape="rect" coords="134,17,184,41" href="a_iana.html" />
<area shape="rect" coords="208,23,270,43" href="produtos.html" />
</map>
<map name="Map2" id="Map2">
<area shape="rect" coords="29,36,96,55" href="receitas.html" />
<area shape="rect" coords="118,37,179,57" href="contato.html" />
</map>
<map name="Map4" id="Map4">
<area shape="rect" coords="86,40,266,105" href="index.html" />
</map></body>
</html>E o link para visualização do problema:
http://www.triadaz.com.br/_temp/granja/site_960/
Note que há um espaço entre o menu e o conteudo
Muito Obrigado
Discussão (3)
Carregando comentários...