I tried to copy two tables in my html page but in both cases, the table headers remain fixed in relation to the whole html page instead of remaining fixed only respect to the associated tables of belonging. How can I solve the problem?
I would like to continue using only html code if possible ...
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Menu Principale</title>
<link rel="stylesheet" type="text/css" href="stylemenu3.css" />
</head>
<body>
<div class="main" id="container">
<!-- div id="container" style="width:1024px"-->
<form name="form0" method="post" action="#">
<!-- messaggio iniziale -->
<div class="top" id="header">
<h1>MESSAGGI RICEVUTI</h1></div>
<!-- caselle di testo per filtrare messaggi -->
<table id="ricercaMessaggio" border="1">
<tbody>
<tr>
<td style="width: 354px; height: 100px; text-align: left; vertical-align: top; background-color: #F0DC82;">
<!--h2><span style="color:#211ed6 ;">RICERCA MESSAGGIO</span></h2-->
<font size="4" ><b>RICERCA MESSAGGIO</b></font>
<table width="279" border="0" cellpadding="0" cellspacing="5" class="text" style="MARGIN-LEFT: 10px; MARGIN-TOP: 18px">
<tr>
<td height="32" align="left" valign="top"><font size="2"> <!--color="#211ed6"--><b>MITTENTE</b></font><br>
<input name="txtMittente" type="text" class="box" id="txtMittente" size="20">
</td>
<td align="left" valign="top"><font size="2"> <!--color="#211ed6"--><b>OGGETTO</b></font><br>
<input name="txtOggetto" type="text" class="box" id="txtOggetto" size="20">
</td>
<td align="left" valign="top"><font size="2"> <!--color="#211ed6"--><b>PAROLA CHIAVE</b></font><br>
<input name="txtParolachiave" type="text" class="box" id="txtParolachiave" size="20">
</td>
</tr>
</table>
<input type="submit" class="bottone" value="Ricerca">
<input type="reset" class="bottone" value="Cancella">
<!-- Trovare il tasto di aggiornamento e metterlo al posto di #### -->
<!--a href="#" class="bottone" target="_self">Aggiorna la pagina!</a>-->
<INPUT TYPE="button" class="bottone" VALUE="Aggiorna" target="_self"> <!--ONCLICK="history.go(0)"-->
<!--input type="######" class="bottone" value="Aggiorna"-->
</tr>
</tbody>
</table>
<!-- Menu a sinistra per filtrare i messaggi e scriverne uno nuovo -->
<div class="colsx">
<font size="4" color="#FFD700"><b>MENU</b></font><br>
<ul id="menu" class="active" background-color:#66CC33>
<li>NUOVO MSG 1</li>
<li>NUOVO MSG 2</li>
<li>BOZZE</li>
<li>POSTA INVIATA</li>
<li>RICEVUTI</li>
<li>LOGOUT</li>
</ul>
<!-- Menu a sinistra contenente persone connesse -->
<font size="4" color="#FFD700"><b> Connesse</b></font><br>
<ul id="pattuglieconnesse" class="active">
<li>ALFA</li>
<li>BRAVO</li>
<li>CHARLIE</li>
<li>DELTA</li>
<li>ECHO</li>
</ul>
</div>
<div class="iframePratiche">
<!-- dati da elaborare con sql da qui -->
<table cellpadding="0" cellspacing="0">
<tr id="intestazioneiframepratiche">
<!-- questi 4 saranno i link per inoltrare messaggio, rispondere, selezionare ecc... -->
<th width="22" height="20" align="left" id="seleziona" valign="middle"></th> <!-- position= "fixed"; -->
<th width="22" height="20" align="left" id="rispondi" valign="middle"></th> <!-- position= "fixed"; -->
<th width="22" height="20" align="left" id="inoltra" valign="middle"></th> <!-- position= "fixed"; -->
<th width="22" height="20" align="left" valign="middle"></th> <!-- position= "fixed"; -->
<th width="150" align="left">MITTENTE</th> <!--poi inserire class="ordine"-->
<th width="170" align="left">OGGETTO</th> <!--poi inserire class="ordine"-->
<th width="20" align="left"><a href="#" >ALLEGATI</a></th> <!--poi inserire class="ordine"-->
<th width="70" align="left"><a href="#" >DATA</a></th> <!--poi inserire class="ordine"-->
</tr>
<tr>
<td width="22" height="20" align="left" valign="middle"><img src="#.gif" alt="seleziona" width="16" height="16" border="0"></td>
<td width="22" height="20" align="left" id="rispondi" valign="middle"><img src="#.gif" alt="importante" width="16" height="16" border="0"></td>
<td width="22" height="20" align="left" id="inoltra" valign="middle"><img src="#.gif" alt="rispondi" width="16" height="16" border="0"></td>
<td width="22" height="20" align="left" valign="middle"><img src="#.gif" alt="inoltra" width="16" height="16" border="0"></td>
<td width="150">ALFA</td>
<td width="170">AB4563VH</td>
<td width="20" >allegati</td>
<td width="70" >05-11-2008</td>
</tr>
<tr>
<td width="22" height="20" align="left" valign="middle" bgcolor="#F2F2F2"><img src="#.gif" alt="seleziona" width="16" height="16" border="0"></td>
<td width="22" height="20" align="left" valign="middle" bgcolor="#F2F2F2"><img src="#.gif" alt="importante" width="16" height="16" border="0"></td>
<td width="22" height="20" align="left" valign="middle" bgcolor="#F2F2F2"><img src="#.gif" alt="rispondi" width="16" height="16" border="0"></td>
<td width="22" height="20" align="left" valign="middle" bgcolor="#F2F2F2"><img src="#.gif" alt="inoltra" width="16" height="16" border="0"></td>
<td width="150" bgcolor="#F2F2F2">BRAVO</td>
<td width="170" bgcolor="#F2F2F2">AB4563VH</td>
<td width="20" bgcolor="#F2F2F2">allegati</td>
<td width="70" bgcolor="#F2F2F2">05-11-2008</td>
</tr>
<tr>
<td width="22" height="20" align="left" valign="middle" bgcolor="#F2F2F2"><img src="#.gif" alt="seleziona" width="16" height="16" border="0"></td>
<td width="22" height="20" align="left" valign="middle" bgcolor="#F2F2F2"><img src="#.gif" alt="importante" width="16" height="16" border="0"></td>
<td width="22" height="20" align="left" valign="middle" bgcolor="#F2F2F2"><img src="#.gif" alt="rispondi" width="16" height="16" border="0"></td>
<td width="22" height="20" align="left" valign="middle" bgcolor="#F2F2F2"><img src="#.gif" alt="inoltra" width="16" height="16" border="0"></td>
<td width="150" bgcolor="#F2F2F2">CHARLIE</td>
<td width="170" bgcolor="#F2F2F2">AB4563VH</td>
<td width="20" bgcolor="#F2F2F2">allegati</td>
<td width="70" bgcolor="#F2F2F2">05-11-2008</td>
</tr>
<tr>
<td width="22" height="20" align="left" valign="middle" bgcolor="#F2F2F2"><img src="#.gif" alt="seleziona" width="16" height="16" border="0"></td>
<td width="22" height="20" align="left" valign="middle" bgcolor="#F2F2F2"><img src="#.gif" alt="importante" width="16" height="16" border="0"></td>
<td width="22" height="20" align="left" valign="middle" bgcolor="#F2F2F2"><img src="#.gif" alt="rispondi" width="16" height="16" border="0"></td>
<td width="22" height="20" align="left" valign="middle" bgcolor="#F2F2F2"><img src="#.gif" alt="inoltra" width="16" height="16" border="0"></td>
<td width="150" bgcolor="#F2F2F2">DELTA</td>
<td width="170" bgcolor="#F2F2F2">AB4563VH</td>
<td width="20" bgcolor="#F2F2F2">allegati</td>
<td width="70" bgcolor="#F2F2F2">05-11-2008</td>
</tr>
<tr>
<td width="22" height="20" align="left" valign="middle" bgcolor="#F2F2F2"><img src="#.gif" alt="seleziona" width="16" height="16" border="0"></td>
<td width="22" height="20" align="left" valign="middle" bgcolor="#F2F2F2"><img src="#.gif" alt="importante" width="16" height="16" border="0"></td>
<td width="22" height="20" align="left" valign="middle" bgcolor="#F2F2F2"><img src="#.gif" alt="rispondi" width="16" height="16" border="0"></td>
<td width="22" height="20" align="left" valign="middle" bgcolor="#F2F2F2"><img src="#.gif" alt="inoltra" width="16" height="16" border="0"></td>
<td width="150" bgcolor="#F2F2F2">ECHO</td>
<td width="170" bgcolor="#F2F2F2">AB4563VH</td>
<td width="20" bgcolor="#F2F2F2">allegati</td>
<td width="70" bgcolor="#F2F2F2">05-11-2008</td>
</tr>
<tr>
<td width="22" height="20" align="left" valign="middle" bgcolor="#F2F2F2"><img src="#.gif" alt="seleziona" width="16" height="16" border="0"></td>
<td width="22" height="20" align="left" valign="middle" bgcolor="#F2F2F2"><img src="#.gif" alt="importante" width="16" height="16" border="0"></td>
<td width="22" height="20" align="left" valign="middle" bgcolor="#F2F2F2"><img src="#.gif" alt="rispondi" width="16" height="16" border="0"></td>
<td width="22" height="20" align="left" valign="middle" bgcolor="#F2F2F2"><img src="#.gif" alt="inoltra" width="16" height="16" border="0"></td>
<td width="150" bgcolor="#F2F2F2">FOXTROT</td>
<td width="170" bgcolor="#F2F2F2">AB4563VH</td>
<td width="20" bgcolor="#F2F2F2">allegati</td>
<td width="70" bgcolor="#F2F2F2">05-11-2008</td>
</tr>
<tr>
<td width="22" height="20" align="left" valign="middle" bgcolor="#F2F2F2"><img src="#.gif" alt="seleziona" width="16" height="16" border="0"></td>
<td width="22" height="20" align="left" valign="middle" bgcolor="#F2F2F2"><img src="#.gif" alt="importante" width="16" height="16" border="0"></td>
<td width="22" height="20" align="left" valign="middle" bgcolor="#F2F2F2"><img src="#.gif" alt="rispondi" width="16" height="16" border="0"></td>
<td width="22" height="20" align="left" valign="middle" bgcolor="#F2F2F2"><img src="#.gif" alt="inoltra" width="16" height="16" border="0"></td>
<td width="150" bgcolor="#F2F2F2">GOLF</td>
<td width="170" bgcolor="#F2F2F2">AB4563VH</td>
<td width="20" bgcolor="#F2F2F2">allegati</td>
<td width="70" bgcolor="#F2F2F2">05-11-2008</td>
</tr>
<tr>
<td width="22" height="20" align="left" valign="middle" bgcolor="#F2F2F2"><img src="#.gif" alt="seleziona" width="16" height="16" border="0"></td>
<td width="22" height="20" align="left" valign="middle" bgcolor="#F2F2F2"><img src="#.gif" alt="importante" width="16" height="16" border="0"></td>
<td width="22" height="20" align="left" valign="middle" bgcolor="#F2F2F2"><img src="#.gif" alt="rispondi" width="16" height="16" border="0"></td>
<td width="22" height="20" align="left" valign="middle" bgcolor="#F2F2F2"><img src="#.gif" alt="inoltra" width="16" height="16" border="0"></td>
<td width="150" bgcolor="#F2F2F2">HOTEL</td>
<td width="170" bgcolor="#F2F2F2">AB4563VH</td>
<td width="20" bgcolor="#F2F2F2">allegati</td>
<td width="70" bgcolor="#F2F2F2">05-11-2008</td>
</tr>
<tr>
<td width="22" height="20" align="left" valign="middle" bgcolor="#F2F2F2"><img src="#.gif" alt="seleziona" width="16" height="16" border="0"></td>
<td width="22" height="20" align="left" valign="middle" bgcolor="#F2F2F2"><img src="#.gif" alt="importante" width="16" height="16" border="0"></td>
<td width="22" height="20" align="left" valign="middle" bgcolor="#F2F2F2"><img src="#.gif" alt="rispondi" width="16" height="16" border="0"></td>
<td width="22" height="20" align="left" valign="middle" bgcolor="#F2F2F2"><img src="#.gif" alt="inoltra" width="16" height="16" border="0"></td>
<td width="150" bgcolor="#F2F2F2">INDIA</td>
<td width="170" bgcolor="#F2F2F2">AB4563VH</td>
<td width="20" bgcolor="#F2F2F2">allegati</td>
<td width="70" bgcolor="#F2F2F2">05-11-2008</td>
</tr>
<tr>
<td width="22" height="20" align="left" valign="middle" bgcolor="#F2F2F2"><img src="#.gif" alt="seleziona" width="16" height="16" border="0"></td>
<td width="22" height="20" align="left" valign="middle" bgcolor="#F2F2F2"><img src="#.gif" alt="importante" width="16" height="16" border="0"></td>
<td width="22" height="20" align="left" valign="middle" bgcolor="#F2F2F2"><img src="#.gif" alt="rispondi" width="16" height="16" border="0"></td>
<td width="22" height="20" align="left" valign="middle" bgcolor="#F2F2F2"><img src="#.gif" alt="inoltra" width="16" height="16" border="0"></td>
<td width="150" bgcolor="#F2F2F2">JULIET</td>
<td width="170" bgcolor="#F2F2F2">AB4563VH</td>
<td width="20" bgcolor="#F2F2F2">allegati</td>
<td width="70" bgcolor="#F2F2F2">05-11-2008</td>
</tr>
<tr>
<td width="22" height="20" align="left" valign="middle" bgcolor="#F2F2F2"><img src="#.gif" alt="seleziona" width="16" height="16" border="0"></td>
<td width="22" height="20" align="left" valign="middle" bgcolor="#F2F2F2"><img src="#.gif" alt="importante" width="16" height="16" border="0"></td>
<td width="22" height="20" align="left" valign="middle" bgcolor="#F2F2F2"><img src="#.gif" alt="rispondi" width="16" height="16" border="0"></td>
<td width="22" height="20" align="left" valign="middle" bgcolor="#F2F2F2"><img src="#.gif" alt="inoltra" width="16" height="16" border="0"></td>
<td width="150" bgcolor="#F2F2F2">KILO</td>
<td width="170" bgcolor="#F2F2F2">AB4563VH</td>
<td width="20" bgcolor="#F2F2F2">allegati</td>
<td width="70" bgcolor="#F2F2F2">05-11-2008</td>
</tr>
<tr>
<td width="22" height="20" align="left" valign="middle" bgcolor="#F2F2F2"><img src="#.gif" alt="seleziona" width="16" height="16" border="0"></td>
<td width="22" height="20" align="left" valign="middle" bgcolor="#F2F2F2"><img src="#.gif" alt="importante" width="16" height="16" border="0"></td>
<td width="22" height="20" align="left" valign="middle" bgcolor="#F2F2F2"><img src="#.gif" alt="rispondi" width="16" height="16" border="0"></td>
<td width="22" height="20" align="left" valign="middle" bgcolor="#F2F2F2"><img src="#.gif" alt="inoltra" width="16" height="16" border="0"></td>
<td width="150" bgcolor="#F2F2F2">LIMA</td>
<td width="170" bgcolor="#F2F2F2">AB4563VH</td>
<td width="20" bgcolor="#F2F2F2">allegati</td>
<td width="70" bgcolor="#F2F2F2">05-11-2008</td>
</tr>
<tr>
<td width="22" height="20" align="left" valign="middle" bgcolor="#F2F2F2"><img src="#.gif" alt="seleziona" width="16" height="16" border="0"></td>
<td width="22" height="20" align="left" valign="middle" bgcolor="#F2F2F2"><img src="#.gif" alt="importante" width="16" height="16" border="0"></td>
<td width="22" height="20" align="left" valign="middle" bgcolor="#F2F2F2"><img src="#.gif" alt="rispondi" width="16" height="16" border="0"></td>
<td width="22" height="20" align="left" valign="middle" bgcolor="#F2F2F2"><img src="#.gif" alt="inoltra" width="16" height="16" border="0"></td>
<td width="150" bgcolor="#F2F2F2">MIKE</td>
<td width="170" bgcolor="#F2F2F2">AB4563VH</td>
<td width="20" bgcolor="#F2F2F2">allegati</td>
<td width="70" bgcolor="#F2F2F2">05-11-2008</td>
</tr>
<!-- dati da elaborare con sql fino a qui -->
</table>
</div>
<div class="article">
<table cellspacing="0" cellpadding="0">
<tr class="testata">
<th width="52" class="colonna" scope="col">test</th>
<th width="62" class="colonna" scope="col">co1 1</th>
<th width="122" class="colonna" scope="col">col 2</th>
<th width="102" class="colonna" scope="col">col 3</th>
<th width="102" class="colonna" scope="col">col4</th>
</tr>
<tr class="primariga">
<th width="52" class="primariga" scope="row">aaa
<td width="62" class="primariga">124</td>
<td width="122" class="primariga">23555</td>
<td width="102" class="primariga">346</td>
<td width="102" class="primariga">4575</td>
</tr>
<tr>
<th scope="row">bbb</th>
<td>51</td>
<td>984</td>
<td>98456</td>
<td>984</td>
</tr>
<tr>
<th scope="row">ccc</th>
<td>651</td>
<td>651</td>
<td>65</td>
<td>5</td>
</tr>
<tr>
<th scope="row">ddd</th>
<td>51</td>
<td>23434</td>
<td>5456</td>
<td>1651</td>
</tr>
<tr>
<th scope="row">eee</th>
<td>18</td>
<td>835</td>
<td>51</td>
<td>651</td>
</tr>
<tr>
<th scope="row">fff</th>
<td>1</td>
<td>6513535</td>
<td>833</td>
<td> </td>
</tr>
<tr>
<th scope="row">ggg</th>
<td>19</td>
<td>8135</td>
<td>854</td>
<td>81</td>
</tr>
<tr>
<th scope="row">hhh</th>
<td>51</td>
<td>651</td>
<td>33456</td>
<td>21</td>
</tr>
<tr>
<th scope="row">iii</th>
<td>15</td>
<td>1535</td>
<td>1456456</td>
<td>55</td>
</tr>
<tr>
<th scope="row">lll</th>
<td>651</td>
<td>650651</td>
<td>06501</td>
<td>560</td>
</tr>
<tr>
<th scope="row">mmm</th>
<td>51</td>
<td>984</td>
<td>984</td>
<td>984</td>
</tr>
<tr>
<th scope="row">nnn</th>
<td>651</td>
<td>6513</td>
<td>65</td>
<td>5</td>
</tr>
<tr>
<th scope="row">ooo</th>
<td>51</td>
<td>651</td>
<td>54545</td>
<td>1651</td>
</tr>
<tr>
<th scope="row">ppp</th>
<td>18</td>
<td>84545</td>
<td>51</td>
<td>651</td>
</tr>
<tr>
<th scope="row">qqq</th>
<td>1</td>
<td>651</td>
<td>8545</td>
<td> </td>
</tr>
<tr>
<th scope="row">rrr</th>
<td>19</td>
<td>81</td>
<td>8</td>
<td>81</td>
</tr>
<tr>
<th scope="row">sss</th>
<td>51</td>
<td>651</td>
<td>3</td>
<td>21</td>
</tr>
<tr>
<th scope="row">ttt</th>
<td>15</td>
<td>15</td>
<td>1</td>
<td>55</td>
</tr>
<tr>
<th scope="row">uuu</th>
<td>651</td>
<td>650651</td>
<td>06501</td>
<td>560</td>
</tr>
<tr>
<th scope="row">vvv</th>
<td>51</td>
<td>984</td>
<td>984</td>
<td>984</td>
</tr>
<tr>
<th scope="row">zzz</th>
<td>651</td>
<td>651</td>
<td>65</td>
<td>5</td>
</tr>
</table>
</div>
<div class="clearer"></div>
<!-- inserire un metodo PER CVONTEGGIARE PAGINE -->
<!-- width="960" border="0" cellpadding="0" cellspacing="0" -->
<table class="text" style="MARGIN-LEFT: 10px; MARGIN-TOP: 10px">
<tr>
<td width="376" align="right">$PagPrec;</td>
<td width="225" align="center">( <strong>$ConteggioPagine;</strong> )</td>
<td width="206" align="left">$PagSucc;</td>
<td width="153">Risultati per pagina
<select name="selNumRis" class="combo">
<option value="100">100
<option value="200">200
<option value="300">300
</select>
</td>
</tr>
</table>
<div class="bottom" id="footer" >
Giacomo</div>
</form>
<!--/div-->
</div>
</body>
</html>
CSS
body {
font-family: font_name, Verdana, sans-serif;
font-size: 11px;
margin: 0px;
padding: 0px;
height: 100%;
background-color: #111;
background-image: url("Sfondi/EI1.jpg");
background-repeat: repeat;
overflow: auto;
}
.main {
height: 100%;
width:1024px;
}
.top {
height: 20%;
border-bottom: 1px solid #555;
padding: 4px;
/*background-color:#FFA500;*/
}
/* Stili per i menu della colonna sx */
.colsx {
float: left;
width: 150px;
border-right: 1px solid #555;
height: 80%;
padding: 4px;
}
/* Stili per la parte dx */
.content {
width: 852px;
letter-spacing: 2px;
line-height: 16px;
text-align: justify;
padding: 4px;
float: left;
}
.bottom {}
.clearer{
float: none;
clear: left
}
/* Stili per tabella */
.iframePratiche {
width: 852px;
height: 220px;
overflow: auto;
background-color:#F2F2F2;
border: 1px solid #D3D3D3;
MARGIN-TOP: 30px;
MARGIN-LEFT: 10px;
float:left;
font-family: Arial, sans-serif;
font-size: 11px;
font-weight: normal;
color: #000;
text-decoration: none;
}
.text {}
.ordine {
bgcolor="#1da220"
}
.bottone {
MARGIN-TOP: 10px;
MARGIN-LEFT: 15px;
}
#intestazioneiframepratiche{
background-color:#7BA05B;
position: fixed;
width: 852px;
height: 22px;
border: 1px solid black;
MARGIN-TOP: -26px;
MARGIN-LEFT: 0px;
float:left;
font-family: Arial, sans-serif;
font-size: 11px;
font-weight: normal;
color: #000;
text-decoration: none;
}
#header {
margin-bottom:0;
color: #F0E68C;
font-weight: bold;
text-align: center;
vertical-align: middle;
}
#ricercaMessaggio{
background-image: url("Sfondi/logo.png"); /* Stili per immagine sfondo ricerca messaggio ma non funzxiona */
width: 1024px;
height: 172px;
}
#ricevuti{
background-color:#EEEEEE
width: 852px;
}
#footer {
background-color:#F0E68C;
clear:both;
text-align:center;
}
#seleziona { background: #1C1C1C url('Sfondi/seleziona.jpg') no-repeat 1px; }
#rispondi { background: #1C1C1C url('Sfondi/rispondi.jpg') no-repeat 1px; }
#inoltra { background: #1C1C1C url('Sfondi/inoltra.jpg') no-repeat 1px; }
/* Stili per il primo menu della colonna sx */
ul#menu {
font-family: Verdana, sans-serif;
font-size: 12px;
margin: 0;
padding: 0;
list-style: none;
}
ul#menu li {
background-color: #918151;
border-left: 5px solid #D3D3D3;
display: block;
width: 150px;
height: 30px;
margin: 2px 0;
border-radius: 10px;
}
ul#menu li a {
color: #fff;
display: block;
font-weight: bold;
line-height: 30px;
padding-left: 15px;
text-decoration: none;
width: 135px; /* 150px - 15px (padding) */
height: 30px;
}
/* Stili per evidenziare elemento quando lo seleziono */
ul#menu li.active,
ul#menu li:hover {
background-color: #D3D3D3;
border-left: 5px solid #918151;
}
/* Stili per il secondo menu della colonna sx */
ul#pattuglieconnesse {
font-family: Verdana, sans-serif;
font-size: 12px;
margin: 0;
padding: 0;
list-style: none;
}
ul#pattuglieconnesse li {
background-color: #D3D3D3;
border-left: 5px solid #918151;
display: block;
width: 150px;
height: 30px;
margin: 2px 0;
border-radius: 10px;
}
ul#pattuglieconnesse li a {
/*color: #fff;*/
display: block;
font-weight: bold;
line-height: 30px;
padding-left: 15px;
text-decoration: none;
width: 135px; /* 150px - 15px (padding) */
height: 30px;
}
/* Stili per evidenziare elemento quando lo seleziono */
ul#pattuglieconnesse li.active,
ul#pattuglieconnesse li:hover {
background-color: #918151;
border-left: 5px solid #D3D3D3;
}
/*il div che contiene lo scroll*/
.article {
height: 355px;
width: 462px;
overflow-y:auto;
overflow-x:hidden;
}
/*la tabella*/
.article table {
border-collapse:collapse;
}
/*tutte le righe*/
.article table tr {
height:30px;
}
/*tutte le celle*/
.article table tr td {
border:1px solid #EBD13F;
color: #C60;
background: #F3F4D0;
text-align:center;
}
/*la colonna di sinistra*/
.article table tr th {
border: 1px solid #039;
color:#069;
background: #D7EBEE;
}
/*la testata riga fissa*/
.article table .testata {
position: fixed;
}
/*le celle della riga fissa*/
.article table .colonna {
background-color: green;
color: white;
border:1px solid #0C0;
}
/*correggo la prima riga della tabella*/
.article table .primariga {
padding-top:30px;
}
#Vaibs post its correct you can put div and then yours code. my code hope you will get an idea.
<div class="wrap">
<table class="head">
<tr>
<td>Head 1</td>
<td>Head 1</td>
<td>Head 1</td>
</tr>
</table>
<div class="inner_table">
<table>
<tr>
<td>Body 1</td>
<td>Body 1</td>
<td>Body 1</td>
</tr>
<tr>
<td>Body 1</td>
<td>Body 1</td>
<td>Body 1</td>
</tr>
<tr>
<td>Body 1</td>
<td>Body 1</td>
<td>Body 1</td>
</tr>
<tr>
<td>Body 1</td>
<td>Body 1</td>
<td>Body 1</td>
</tr>
<tr>
<td>Body 1</td>
<td>Body 1</td>
<td>Body 1</td>
</tr>
<tr>
<td>Body 1</td>
<td>Body 1</td>
<td>Body 1</td>
</tr>
<tr>
<td>Body 1</td>
<td>Body 1</td>
<td>Body 1</td>
</tr>
</table>
</div>
</div>
CSS
.wrap {
width: 352px;
}
.wrap table {
width: 300px;
table-layout: fixed;
}
table tr td {
padding: 5px;
border: 1px solid #eee;
width: 100px;
word-wrap: break-word;
}
table.head tr td {
background: #eee;
}
.inner_table {
height: 100px;
overflow-y: auto;
}
Check it demo
Write your table code inside a div
<div style="height:200px;overflow:auto;">
//Table code
</div>
Try and let me know
Related
I am having a problem with my image inside my email signature, what I have tried to export the image as retina with 300dpi. I also doubled the pixel size of the image. How can I make the image sharper than it is now?
<table width="430" cellspacing="0" cellpadding="0" border="0" bgcolor="#ffffff" style="display: inline-table;">
<tbody>
<tr>
<td width="5" height="1"></td>
<td width="9" height="1"></td>
<td width="182" height="1"></td>
<td width="57" height="1"></td>
<td width="30" height="1"></td>
<td width="98" height="1"></td>
<td width="37" height="1"></td>
<td width="37" height="1"></td>
<td width="37" height="1"></td>
<td width="37" height="1"></td>
<td width="37" height="1"></td>
<td width="9" height="1"></td>
<td width="5" height="1"></td>
<td width="1" height="1"></td>
</tr>
<tr>
<td colspan="13">
<span style="color: #222222; font-family: Lucida Grande,Arial,Helvetica,sans-serif; font-size: 13px;">Met vriendelijke groet,</span>
</td>
<td width="1" height="22"></td>
</tr>
<tr>
<td width="570" height="13" colspan="13"></td>
<td width="1" height="13"></td>
</tr>
<tr>
<td width="248" height="10" colspan="3" style="vertical-align: bottom;">
<span style="color: #222222; font-family: Lucida Grande,Arial,Helvetica,sans-serif; font-size: 12px;">
<strong>Jaap Jacobs</strong>
</span>
</td>
<td width="30" height="66" rowspan="3" colspan="2"></td>
<td width="292" height="22" colspan="7" style="vertical-align: bottom;">
<span style="color: #222222; font-family: Lucida Grande,Arial,Helvetica,sans-serif; font-size: 12px;">+31 (0)76 763 06 00</span>
</td>
<td width="1" height="22"></td>
</tr>
<tr>
<td width="248" height="22" colspan="3">
<span style="color: #222222; font-family: Lucida Grande,Arial,Helvetica,sans-serif; font-size: 13px;">Managing director</span>
</td>
<td width="292" height="22" colspan="7">
<span style="color: #222222; font-family: Lucida Grande,Arial,Helvetica,sans-serif; font-size: 13px;">
<a style="color: #222222; text-decoration: none;" href="mailto:emailtest#email.nl" target="_blank">emailtest#email.nl</a>
</span>
</td>
<td width="1" height="22"></td>
</tr>
<tr>
<td width="570" height="15" colspan="11"></td>
</tr>
<tr bgcolor="#ffd668" style="height: 50px;">
<td colspan="10" style="border-radius: 5px;">
<table>
<tbody><tr>
<td width="5"></td>
<td width="200" height="30" align="left" style="line-height: 0" colspan="2">
<a style="border: 0;" href="https://www.fingerspitz.nl" target="_blank">
<img width="138" height="22" alt="Fingerspitz" src="https://www.fingerspitz.nl/files/Social_iconen/Retina/Fingerspitz.png">
</a>
</td>
<td width="190" align="right">
<table style="width:100%;">
<tbody>
<tr>
<td width="30" height="30">
<a style="border: none; display: block; width: 30px; height: 30px;" href="https://www.facebook.com/Fingerspitz" target="_blank">
<img width="30" height="30" src="https://www.fingerspitz.nl/files/Social_iconen/Retina/Facebook.png">
</a>
</td>
<td width="30" height="30">
<a style="border: none; display: block; width: 30px; height: 30px;" href="https://twitter.com/fingerspitzNL/" target="_blank">
<img width="30" height="30" src="https://www.fingerspitz.nl/files/Social_iconen/Retina/Twitter.png">
</a>
</td>
<td width="30" height="30">
<a style="border: none; display: block; width: 30px; height: 30px;" href="https://www.linkedin.com/company/fingerspitz" target="_blank">
<img width="30" height="30" src="https://www.fingerspitz.nl/files/Social_iconen/Retina/LinkedIn.png">
</a>
</td>
<td width="40" height="30">
<a style="border: none; display: block; width: 30px; height: 30px;" href="https://www.youtube.com/channel/UCpovXRL4rEF8skjhle2z25Q" target="_blank">
<img width="30" height="30" src="https://www.fingerspitz.nl/files/Social_iconen/Retina/YouTube.png">
</a>
</td>
<td width="0.2" height="30">
<span style="background-color:#000;height:30px;display:table;width:1px;"></span>
</td>
<td width="40" height="30" align="right">
<a style="border: none; display: block; width: 30px; height: 30px;" href="https://www.google.nl/maps/place/Fingerspitz+Online+Marketing/#51.5904415,4.7595442,17z/data=!4m5!3m4!1s0x47c69f8ba6d2e709:0xbbf458d8e81294cb!8m2!3d51.5904382!4d4.7617329" target="_blank">
<img width="30" height="30" src="https://www.fingerspitz.nl/files/Social_iconen/Retina/Maps.png">
</a>
</td>
<td width="15" height="30"></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody></table>
</td>
</tr>
<tr>
<td width="570" height="15" colspan="11"></td>
</tr>
<tr>
<td colspan="10" style="border: 1px solid #e6e6e6; border-radius: 5px;">
<table>
<tbody>
<tr>
<td width="2" height="30"></td>
<td width="30" height="50">
<a href="https://www.fingerspitz.nl/blog/434-fingerspitz-1-tradingdesks-volgens-onderzoek-emerce-100" target="_blank">
<span style="color: #222222; font-family: Lucida Grande,Arial,Helvetica,sans-serif; font-size: 13px;"><img width="40" height="40" alt="Dutch Search Awards" src="https://www.fingerspitz.nl/files/Social_iconen/Emerce_100_2.png"></span>
</a>
</td>
<td width="10" height="30"></td>
<td width="512" height="50">
<span style="color: #222222; font-family: Lucida Grande,Arial,Helvetica,sans-serif; font-size: 12px;">Fingerspitz is #1 Tradingdesk van Nederland volgens Emerce! <b>Lees meer!</b></span>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
Above you see the result the image Fingerspitz is a bit blurry. I'll hope someone could help me out on this.
You're changing the height-to-width ratio slightly. You could remove either the height or width definition, which would keep the ratio to scale.
So this:
<img width="138" height="22" alt="Fingerspitz" src="https://www.fingerspitz.nl/files/Social_iconen/Retina/Fingerspitz.png">
becomes this:
<img width="138" alt="Fingerspitz" src="https://www.fingerspitz.nl/files/Social_iconen/Retina/Fingerspitz.png">
I have a pre-designed HTML email that i have sliced and coded using Komodo edit. All content is within a table where display: block and border-collapse: collapse; have been added to the tables inline-CSS and also line-height: 0px; to the cells inline-CSS. I have been using EmailonAcid to test my HTML email and what seems to be happening is everything looks fine on every email program except for Outlook. Outlook is addining extra white space to the sliced images causing the surrounding content/images to become out of line.
<table id="Table_01" style="border: 1px solid #D6D6D7; font-family: sans-serif; font-size: 14px; border-collapse: collapse;" width="800" height="1501" align="center" border="0" cellpadding="0" cellspacing="0">
<tr>
<td colspan="6">
<img style="display: block;" src="images/edm_personalised_02_01.jpg" width="800" height="312" alt=""></td>
</tr>
<tr>
<td colspan="6" style="width: 800; height:199px; padding: 20px 10px 0px 15px;">
<p> ALL MY TEXT GOES HERE</p>
</td>
</tr>
<tr>
<td colspan="6">
<img style="display: block;" src="images/edm_personalised_02_03.jpg" width="800" height="37" alt=""></td>
</tr>
<tr>
<td colspan="2">
<img style="display: block;" src="images/edm_personalised_02_04.jpg" width="180" height="47" alt=""></td>
<td colspan="2" style="width: 135px; height: 47; font-size: 12px; text-transform: uppercase;">
Text here
<br/>
<span style="font-weight: bold;">£#XX.XX#</span>
</td>
<td colspan="2">
<img style="display: block;" src="images/edm_personalised_02_06.jpg" width="485" height="47" alt=""></td>
</tr>
<tr>
<td colspan="6">
<img style="display: block;" src="images/edm_personalised_02_07.jpg" width="800" height="88" alt=""></td>
</tr>
<tr>
<td colspan="3" style="width: 228px; height: 21px; font-size: 12px; text-transform: uppercase; ">
text here
</td>
<td colspan="3">
<img style="display: block;" src="images/edm_personalised_02_09.jpg" width="572" height="21" alt=""></td>
</tr>
<tr>
<td style="width:" 90px; height: 21px; font-size: 12px;">
<span style="font-weight: bold;">
£#XX.XX#</span> </td>
<td colspan="5">
<img style="display: block;" src="images/edm_personalised_02_11.jpg" width="710" height="21" alt=""></td>
</tr>
<tr>
<td colspan="6">
<img style="display: block;" src="images/edm_personalised_02_12.jpg" width="800" height="140" alt=""></td>
</tr>
<tr>
<td colspan="5">
<img style="display: block;" src="images/edm_personalised_02_13.jpg" width="605" height="48" alt=""></td>
<td style="width: 195px; height: 48px; font-size: 12px;text-transform: uppercase;">
text here
<br/>
<span style="font-weight: bold; ">£#XX.XX#</span>
</td>
</tr>
<tr>
<td colspan="6">
<img style="display: block;" src="images/edm_personalised_02_15.jpg" width="800" height="66" alt=""></td>
</tr>
<tr>
<td colspan="6" style="width: 800px; height: 145px; font-size: 24px; text-align: center;">
#dealername#
<br/>
#contact_number#</td>
</tr>
<tr>
<td colspan="6">
<img style="display: block;" src="images/edm_personalised_02_17.jpg" width="800" height="329" alt=""></td>
</tr>
<tr>
<td colspan="6">
<img style="display: block;" src="images/edm_personalised_02_18.jpg" width="800" height="58" alt=""></td>
</tr>
<tr>
<td>
<img style="display: block;" src="images/spacer.gif" width="90" height="1" alt=""></td>
<td>
<img style="display: block;" src="images/spacer.gif" width="90" height="1" alt=""></td>
<td>
<img style="display: block;" src="images/spacer.gif" width="48" height="1" alt=""></td>
<td>
<img style="display: block;" src="images/spacer.gif" width="87" height="1" alt=""></td>
<td>
<img style="display: block;" src="images/spacer.gif" width="290" height="1" alt=""></td>
<td>
<img style="display: block;" src="images/spacer.gif" width="195" height="1" alt=""></td>
</tr>
Is there anyway of getting rid of the extra spaces?
Try style="line-height: 0px;" on table cells.
Also look carefully if widths and heights on table cells and images are correct and set properly.
The problem is that slicing full layout sometimes creates unnecessary white space for images, as that full layout slicing does not properly justify the trs and tds for the layout. I suggest you need to create a table in dreamweaver and slice only the images that you require and put them manually. This will solve your issue. I have done it practically and it works for me.
I'm coding a HTML e-mail but i run into a problem with the following HTML:
<table width="510" border="0" cellspacing="0" cellpadding="0">
<tr>
<td colspan="7" width="30" valign="top"><img src="http://www.dmxs.nl/upc/Luiaard/UPC5_08.jpg" alt="Voor slecht € 28,20 per maand" style="display:block;" border="0" /></td>
<td rowspan="2" width="455" bgcolor="#fff209" style="font-family:Arial, Helvetica, sans-serif; font-size:12px; line-height:18px;" align="left"><span style="font-size:14px;"><strong>Titel</strong></span><br /><br />
<strong>- kop 1</strong><br />
<strong>- kop2</strong><br />
<span style="margin-left:20px;">• mini1<br />
</span>
<span style="margin-left:20px;">• mini2<br />
</span>
<span style="margin-left:20px;">• mini3<br />
</span>
<strong>- kop3<span style="text-decoration:none;"></span></strong><br />
<br />
<img src="http://www.dmxs.nl/upc/Luiaard/UPC4_14.jpg" alt="" border="0" width="141" /></td>
<td colspan="6" width="25" height="72" valign="top"><img src="http://www.dmxs.nl/upc/Luiaard/UPC5_10.jpg" alt="Voor slecht € 28,20 per maand" style="display:block;" border="0" /></td>
</tr>
<tr>
<td width="5" bgcolor="#e7e7e8" style="font-size:1px; width:5px;"> </td>
<td width="1" bgcolor="#e7e7e8" style="font-size:1px; width:1px;"> </td>
<td width="1" bgcolor="#dededf" style="font-size:1px; width:1px;"> </td>
<td width="1" bgcolor="#cbcbcc" style="font-size:1px; width:1px;"> </td>
<td width="1" bgcolor="#b0b0b1" style="font-size:1px; width:1px;"> </td>
<td width="1" bgcolor="#8b8b8b" style="font-size:1px; width:1px;"> </td>
<td width="20" bgcolor="#fff209"></td>
<td width="20" bgcolor="#fff209"></td>
<td width="1" bgcolor="#8f8e81" style="font-size:1px; width:1px;"> </td>
<td width="1" bgcolor="#adadae" style="font-size:1px; width:1px;"> </td>
<td width="1" bgcolor="#cacacb" style="font-size:1px; width:1px;"> </td>
<td width="1" bgcolor="#ddddde" style="font-size:1px; width:1px;"> </td>
<td width="1" bgcolor="#e6e6e7" style="font-size:1px; width:1px;"> </td>
</tr>
</table>
In Chrome and Firefox this works great however in Internet explorer the following part ain't working (not showing).
<td width="5" bgcolor="#e7e7e8" style="font-size:1px; width:5px;"> </td>
<td width="1" bgcolor="#e7e7e8" style="font-size:1px; width:1px;"> </td>
<td width="1" bgcolor="#dededf" style="font-size:1px; width:1px;"> </td>
<td width="1" bgcolor="#cbcbcc" style="font-size:1px; width:1px;"> </td>
<td width="1" bgcolor="#b0b0b1" style="font-size:1px; width:1px;"> </td>
<td width="1" bgcolor="#8b8b8b" style="font-size:1px; width:1px;"> </td>
<td width="20" bgcolor="#fff209"></td>
<td width="20" bgcolor="#fff209"></td>
<td width="1" bgcolor="#8f8e81" style="font-size:1px; width:1px;"> </td>
<td width="1" bgcolor="#adadae" style="font-size:1px; width:1px;"> </td>
<td width="1" bgcolor="#cacacb" style="font-size:1px; width:1px;"> </td>
<td width="1" bgcolor="#ddddde" style="font-size:1px; width:1px;"> </td>
<td width="1" bgcolor="#e6e6e7" style="font-size:1px; width:1px;"> </td>
Does anybody had a solution for this problem(and no, we can't set the height static)?
Fiddle example.
Put in your 2 empty table cells.
Explorer/Outlook are known to collapse empty table cells, which for some reason is preventing the rest of the row from rendering.
I have some problem with my e-mail campaign.
I made all my boxes with correct width, height attribute, also made the img line-height to 0.1em and display them as block, so the question is on. What is this?
Every suggestion will be honored. Thanks.
<table width="594" border="0" cellspacing="0" cellpadding="0">
<tbody><tr>
<td width="25" align="left" valign="top"></td>
<td width="269" align="left" valign="bottom">
<h1>{TITLE}</h1>
<h2>{HOTEL} {HOTELCATEGORY}</h2>
<p>{ROOM}</p>
<p>{ACCOM}</p>
<p>{START}</p>
<p>{DATESTART} - {DATEEND}</p>
<p>{DAYS} nap, {NIGHTS} éjszaka</p>
<table border="0" cellpadding="0" cellspacing="0" width="230" height="67">
<tr height="11">
<td width="80" height="11" align="left" valign="top"><img src="http://site.com/nwsltrv2/img/l_01_tl.png" width="80" height="11"></td>
<td width="117" height="11" align="left" valign="top"><img src="http://site.com/nwsltrv2/img/l_01_t.png" width="117" height="11"></td>
<td width="33" height="11" align="left" valign="top"><img src="http://site.com/nwsltrv2/img/l_01_tr.png" width="33" height="11"></td>
</tr>
<tr height="40">
<td width="80" height="40" align="left" valign="top"><img src="http://site.com/nwsltrv2/img/l_01_l.png" width="80" height="40"></td>
<td width="117" height="40" align="center" valign="middle" bgcolor="#444444"><b class="priceboxb" style="margin: 0; padding: 0;">{PRICE}{CURRENCY}</b><span class="priceboxspan" style="margin: 0; padding: 0;">/fõ</span></td>
<td width="33" height="40" align="left" valign="top"><img src="http://site.com/nwsltrv2/img/l_01_r.png" width="33" height="40"></td>
</tr>
<tr height="16">
<td width="80" height="16" align="left" valign="top"><img src="http://site.com/nwsltrv2/img/l_01_bl.png" width="80" height="16"></td>
<td width="117" height="16" align="left" valign="top"><img src="http://site.com/nwsltrv2/img/l_01_b.png" width="117" height="16"></td>
<td width="33" height="16" align="left" valign="top"><img src="http://site.com/nwsltrv2/img/l_01_br.png" width="33" height="16"></td>
</tr>
</table>
</td>
<td width="300" align="right" valign="top">
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="10" height="11" align="left" valign="top"><img src="http://site.com/nwsltrv2/img/b_01_tl.png"></td>
<td width="278" height="11" align="left" valign="top"><img src="http://site.com/nwsltrv2/img/b_01_t.png"></td>
<td width="12" height="11" align="left" valign="top"><img src="http://site.com/nwsltrv2/img/b_01_tr.png"></td>
</tr>
<tr>
<td width="10" height="192" align="left" valign="top"><img src="http://site.com/nwsltrv2/img/b_01_l.png"></td>
<td width="278" height="192" class="imageholder"><img src="{IMGSRC}" width="278" height="192" class="image" style="width: 278pt; height: 192pt; border:0; margin:0; padding:0;"></td>
<td width="12" height="192" align="left" valign="top"><img src="http://site.com/nwsltrv2/img/b_01_r.png"></td>
</tr>
<tr>
<td width="10" height="12" align="left" valign="top"><img src="http://site.com/nwsltrv2/img/b_01_bl.png"></td>
<td width="278" height="12" align="left" valign="top"><img src="http://site.com/nwsltrv2/img/b_01_b.png"></td>
<td width="12" height="12" align="left" valign="top"><img src="http://site.com/nwsltrv2/img/b_01_br.png"></td>
</tr>
</table>
</td>
<td width="0" align="left" valign="top"></td>
</tr>
</tbody></table>
Looks like three pixels. What happens if you make the images that make up the label display: block; ?
Or take a look at this answer: 3px extra height on a div with an image inside it
I have this email creative. The bottom box is placed ok on ff and chrome, but in IE it's getting a bit weird.
What do I need to add/remove from my code in order for the bottom box to appear correctly?
Thanks.
here is the code:
<title></title>
<style type="text/css">
p
{
margin: 0px;
padding: 0px;
text-align: right;
}
a:link
{
color: #990000;
text-decoration: none;
}
a:visited
{
text-decoration: none;
color: #990000;
}
a:hover
{
text-decoration: none;
color: #990000;
}
img
{
border: none;
}
body{
margin:0px;
}
</style>
<div style="text-align: center; font-family: Arial, Helvetica, sans-serif; font-size: 13px;background-color: #EEF3FA">
<div style="text-align: right; font-family: Arial, Helvetica, sans-serif; font-size: 13px;background-color: #FFF;width: 720px;margin: 0px auto;">
<br />
<table align="center" border="0" cellpadding="4" cellspacing="0" dir="rtl" width="700">
<tbody>
<tr>
<td colspan="3">
<img src="Images/head.jpg" style="margin-bottom: 10px;" /></td>
</tr>
<tr>
<td colspan="3" style="border:2px #060">
<img src="Images/tophaedr1.jpg" style="margin-bottom: 10px;margin-right:23px;" /></td>
</tr>
</table>
<table align="center" border="0" cellpadding="4" cellspacing="0" dir="rtl" width="700" style="margin-right:17px;">
<!-- right -->
<tr>
<td valign="top" width="156" height="500">
<table width="156" cellpadding="0" cellspacing="0" border="0"
style="background-color: B4D336">
<tr>
<td width="14" valign="top"><img src="Images/rounded_corner2.gif" width="14"
height="14" border="0" alt="..." /></td>
<td width="172"></td>
<td width="14" valign="top"><img src="Images/rounded_corner1.gif" width="14"
height="14" border="0" alt="..." /></td>
</tr>
<tr>
</tr>
<tr>
<td width="14" valign="bottom"><img src="Images/rounded_corner4.gif" width="14" height="14"
border="0" alt="..." /></td>
<td></td>
<td width="14" valign="bottom"><img src="Images/rounded_corner3.gif" width="14" height="14"
border="0" alt="..." /></td>
</tr>
</table>
<table width="156" cellpadding="0" cellspacing="0" border="0"
style="background-color: 3778BC;margin-top: 10px;">
<tr>
<td width="14" valign="top"><img src="Images/rounded_corner2_b.gif" width="14"
height="14" border="0" alt="..." /></td>
<td width="172"></td>
<td width="14" valign="top"><img src="Images/rounded_corner1_b.gif" width="14"
height="14" border="0" alt="..." /></td>
</tr>
<tr>
</tr>
<tr>
<td width="14" valign="bottom"><img src="Images/rounded_corner4_b.gif" width="14"
height="14" border="0" alt="..." /></td>
<td width="172"></td>
<td width="14" valign="bottom"><img src="Images/rounded_corner3_b.gif" width="14"
height="14" border="0" alt="..." /></td>
</tr>
</table>
</td>
<td valign="top" width="156" >
<table width="156" cellpadding="0" cellspacing="0" border="0"
style="background-color: 3778BC">
<tr>
<td width="14" valign="top"><img src="Images/rounded_corner2_b.gif" width="14"
height="14" border="0" alt="..." /></td>
<td width="172"></td>
<td width="14" valign="top"><img src="Images/rounded_corner1_b.gif" width="14"
height="14" border="0" alt="..." /></td>
</tr>
<tr>
</tr>
<tr>
<td width="14" valign="bottom"><img src="Images/rounded_corner4_b.gif" width="14" height="14"
border="0" alt="..." /></td>
<td></td>
<td width="14" valign="bottom"><img src="Images/rounded_corner3_b.gif" width="14" height="14"
border="0" alt="..." /></td>
</tr>
</table>
<table width="156" cellpadding="0" cellspacing="0" border="0"
style="background-color: B4D336;margin-top: 10px;">
<tr>
<td width="14" valign="top"><img src="Images/rounded_corner2.gif" width="14"
height="14" border="0" alt="..." /></td>
<td width="172"></td>
<td width="14" valign="top"><img src="Images/rounded_corner1.gif" width="14"
height="14" border="0" alt="..." /></td>
</tr>
<tr>
</tr>
<tr>
<td width="14" valign="bottom"><img src="Images/rounded_corner4.gif" width="14" height="14"
border="0" alt="..." /></td>
<td></td>
<td width="14" valign="bottom"><img src="Images/rounded_corner3.gif" width="14" height="14"
border="0" alt="..." /></td>
</tr>
</table>
</td>
<td valign="top" width="156">
<table width="156" cellpadding="0" cellspacing="0" border="0"
style="background-color: B4D336">
<tr>
<td width="14" valign="top"><img src="Images/rounded_corner2.gif" width="14"
height="14" border="0" alt="..." /></td>
<td width="172"></td>
<td width="14" valign="top"><img src="Images/rounded_corner1.gif" width="14"
height="14" border="0" alt="..." /></td>
</tr>
<tr>
</tr>
<tr>
<td width="14" valign="bottom"><img src="Images/rounded_corner4.gif" width="14" height="14"
border="0" alt="..." /></td>
<td></td>
<td width="14" valign="bottom"><img src="Images/rounded_corner3.gif" width="14" height="14"
border="0" alt="..." /></td>
</tr>
</table>
<table width="156" cellpadding="0" cellspacing="0" border="0"
style="background-color: 3778BC;margin-top: 10px;">
<tr>
<td width="14" valign="top"><img src="Images/rounded_corner2_b.gif" width="14"
height="14" border="0" alt="..." /></td>
<td width="172"></td>
<td width="14" valign="top"><img src="Images/rounded_corner1_b.gif" width="14"
height="14" border="0" alt="..." /></td>
</tr>
<tr>
</tr>
<tr>
<td width="14" valign="bottom"><img src="Images/rounded_corner4_b.gif" width="14" height="14"
border="0" alt="..." /></td>
<td></td>
<td width="14" valign="bottom"><img src="Images/rounded_corner3_b.gif" width="14" height="14"
border="0" alt="..." /></td>
</tr>
</table>
</td>
<!-- space -->
<!-- left -->
<td valign="top" width="180">
<table width="180" cellpadding="0" cellspacing="0" border="0"
style="background-color: B4D336">
<tr>
<td></td>
<td align="center"><a href="http://www.shvoong.co.il/" target="_blank"><img src="Images/left.jpg" width="180"
height="188" border="0" alt="..." /></a></td>
<td></td>
</tr>
</table>
<table width="180" cellpadding="0" cellspacing="0" border="0"
style="background-color: B4D336">
<tr>
<td></td>
<td align="center"><a href="http://www.shvoong.co.il/" target="_blank"><img src="Images/left.jpg" width="180"
height="188" border="0" alt="..." /></a></td>
<td></td>
</tr>
</table>
<table width="180" cellpadding="0" cellspacing="0" border="0"
style="background-color: B4D336">
<tr>
<td></td>
<td align="center"><a href="http://www.shvoong.co.il/" target="_blank"><img src="Images/left.jpg" width="180"
height="188" border="0" alt="..." /></a></td>
<td></td>
</tr>
</table>
<table width="180" cellpadding="0" cellspacing="0" border="0"
style="background-color: B4D336">
<tr>
<td></td>
<td align="center"><a href="http://www.shvoong.co.il/" target="_blank"><img src="Images/left.jpg" width="180"
height="188" border="0" alt="..." /></a></td>
<td></td>
</tr>
</table>
</table>
<table align="center" border="0" cellpadding="4" cellspacing="0" dir="rtl" width="700">
<tbody>
<tr>
<td colspan="3">
<img src="Images/pre.jpg" style="margin-bottom: 10px; margin-left: 8px; margin-top: -20px;" /></td>
<td colspan="3">
<img src="Images/logoleft.gif" style="margin-bottom: 10px; margin-left: 11px; margin-top: -10px;" /></td>
</tr>
</table>
</div>
</div>
You might want to stop using tables for the layout.
First of all I would highly recommend to stop using <table> tags for structuring a page. Thats what <div>'s are for.
IE is known to be problematic, usually I would add custom CSS rules that only apply to IE, by using the asterisk (*) marker.
#myDiv{
position: relative;
top: 20px;
left: 10px;
*top: 15px; /* Should be read only be IE */
*left: 8px; /* Should be read only be IE */
}
Shai