I am trying to create a HTML Template which I will use to send emails.
In template, I have a single row table which I want to make it either completely horizontal or completely vertical like below depending on screen width.
in laptop or desktop it should look like this
and in mobile devices it should look like this
<style type="text/css">
body {margin: 0; padding: 0; min-width: 100%!important;}
.content {width: 100%; max-width: 600px;}
.subhead {font-size: 15px; color: #ffffff; font-family: sans-serif; letter-spacing: 10px;}
.h1 {font-size: 33px; line-height: 38px; font-weight: bold;}
.h1, .h2, .bodycopy {color: #153643; font-family: sans-serif;}
.button {text-align: center; font-size: 18px; font-family: sans-serif; font-weight: bold; padding: 0 30px 0 30px;}
.button a {color: #ffffff; text-decoration: none;}
</style>
<table>
<tr>
<td class="innerpadding borderbottom">
<table width="40" align="left" border="0" cellpadding="0" cellspacing="0">
<tr>
<td height="40" style="padding: 0 20px 20px 0;">
<img src="http://png-1.findicons.com/files/icons/1580/devine_icons_part_2/128/mail_2.png" width="40" height="40" border="0" alt="" />
</td>
</tr>
</table>
<table width="40" align="left" border="0" cellpadding="0" cellspacing="0">
<tr>
<td height="40" style="padding: 0 20px 20px 0;">
<img src="http://png-1.findicons.com/files/icons/1580/devine_icons_part_2/128/mail_2.png" width="40" height="40" border="0" alt="" />
</td>
</tr>
</table>
<table width="40" align="left" border="0" cellpadding="0" cellspacing="0">
<tr>
<td height="40" style="padding: 0 20px 20px 0;">
<img src="http://png-1.findicons.com/files/icons/1580/devine_icons_part_2/128/mail_2.png" width="40" height="40" border="0" alt="" />
</td>
</tr>
</table>
<table width="40" align="left" border="0" cellpadding="0" cellspacing="0">
<tr>
<td height="40" style="padding: 0 20px 20px 0;">
<img src="http://png-1.findicons.com/files/icons/1580/devine_icons_part_2/128/mail_2.png" width="40" height="40" border="0" alt="" />
</td>
</tr>
</table>
<table width="40" align="left" border="0" cellpadding="0" cellspacing="0">
<tr>
<td height="40" style="padding: 0 20px 20px 0;">
<img src="http://png-1.findicons.com/files/icons/1580/devine_icons_part_2/128/mail_2.png" width="40" height="40" border="0" alt="" />
</td>
</tr>
</table>
<table width="40" align="left" border="0" cellpadding="0" cellspacing="0">
<tr>
<td height="40" style="padding: 0 20px 20px 0;">
<img src="http://png-1.findicons.com/files/icons/1580/devine_icons_part_2/128/mail_2.png" width="40" height="40" border="0" alt="" />
</td>
</tr>
</table>
<table width="40" align="left" border="0" cellpadding="0" cellspacing="0">
<tr>
<td height="40" style="padding: 0 20px 20px 0;">
<img src="http://png-1.findicons.com/files/icons/1580/devine_icons_part_2/128/mail_2.png" width="40" height="40" border="0" alt="" />
</td>
</tr>
</table>
<table width="40" align="left" border="0" cellpadding="0" cellspacing="0">
<tr>
<td height="40" style="padding: 0 20px 20px 0;">
<img src="http://png-1.findicons.com/files/icons/1580/devine_icons_part_2/128/mail_2.png" width="40" height="40" border="0" alt="" />
</td>
</tr>
</table>
<table width="40" align="left" border="0" cellpadding="0" cellspacing="0">
<tr>
<td height="40" style="padding: 0 20px 20px 0;">
<img src="http://png-1.findicons.com/files/icons/1580/devine_icons_part_2/128/mail_2.png" width="40" height="40" border="0" alt="" />
</td>
</tr>
</table>
<table width="40" align="left" border="0" cellpadding="0" cellspacing="0">
<tr>
<td height="40" style="padding: 0 20px 20px 0;">
<img src="http://png-1.findicons.com/files/icons/1580/devine_icons_part_2/128/mail_2.png" width="40" height="40" border="0" alt="" />
</td>
</tr>
</table>
<table width="40" align="left" border="0" cellpadding="0" cellspacing="0">
<tr>
<td height="40" style="padding: 0 20px 20px 0;">
<img src="http://png-1.findicons.com/files/icons/1580/devine_icons_part_2/128/mail_2.png" width="40" height="40" border="0" alt="" />
</td>
</tr>
</table>
</td>
</tr>
</table>
Have you tried using bootstrap? It would make your life very easier. And would involve less code.
sample :
table { width: 90%; }
td { height: 40px; padding: 0px 20px 20px 0px; border: 1px solid #333; }
#media screen and (max-width: 640px) {
td { display: block; width: 90%; }
}
<html>
</head>
<body>
<table>
<tbody>
<tr>
<td>
<img src="http://png-1.findicons.com/files/icons/1580/devine_icons_part_2/128/mail_2.png" width="40" height="40" border="0" alt="" />
</td>
<td>
<img src="http://png-1.findicons.com/files/icons/1580/devine_icons_part_2/128/mail_2.png" width="40" height="40" border="0" alt="" />
</td>
<td>
<img src="http://png-1.findicons.com/files/icons/1580/devine_icons_part_2/128/mail_2.png" width="40" height="40" border="0" alt="" />
</td>
<td>
<img src="http://png-1.findicons.com/files/icons/1580/devine_icons_part_2/128/mail_2.png" width="40" height="40" border="0" alt="" />
</td>
<td>
<img src="http://png-1.findicons.com/files/icons/1580/devine_icons_part_2/128/mail_2.png" width="40" height="40" border="0" alt="" />
</td>
<td>
<img src="http://png-1.findicons.com/files/icons/1580/devine_icons_part_2/128/mail_2.png" width="40" height="40" border="0" alt="" />
</td>
<td>
<img src="http://png-1.findicons.com/files/icons/1580/devine_icons_part_2/128/mail_2.png" width="40" height="40" border="0" alt="" />
</td>
<td>
<img src="http://png-1.findicons.com/files/icons/1580/devine_icons_part_2/128/mail_2.png" width="40" height="40" border="0" alt="" />
</td>
<td>
<img src="http://png-1.findicons.com/files/icons/1580/devine_icons_part_2/128/mail_2.png" width="40" height="40" border="0" alt="" />
</td>
<td>
<img src="http://png-1.findicons.com/files/icons/1580/devine_icons_part_2/128/mail_2.png" width="40" height="40" border="0" alt="" />
</td>
<td>
<img src="http://png-1.findicons.com/files/icons/1580/devine_icons_part_2/128/mail_2.png" width="40" height="40" border="0" alt="" />
</td>
</tr>
</tbody>
</table>
</body>
</html>
Related
I'm making a mailing html page and my social buttons keep having some kind of margin that I can't work away. I posted my code and a fiddle below so you can see where I'm stuck.
https://jsfiddle.net/zh78uc9s/
CODE:
<td rowspan="10" style="text-align: left" valign="top" width="auto" border="0" cellspacing="0" cellpadding="0">
<!--Social media knopkes en links-->
<table width="25px" height="100px" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td width="25" height="25"><img src="elementen/Spacer25.gif" width="25" height="25" border="0" cellspacing="0" cellpadding="0" alt="spacerke" /></td>
</tr>
<tr>
<td width="25" height="25">
<img src="elementen/facebook.gif" width="25" height="25" border="0" cellspacing="0" cellpadding="0" alt="facebook" />
</td>
</tr>
<tr>
<td width="25" height="25">
<img src="elementen/youtube.gif" width="25" height="25" border="0" cellspacing="0" cellpadding="0" alt="youtube" />
</td>
</tr>
<tr>
<td width="25" height="25">
<img src="elementen/linkedin.gif" width="25" height="25" border="0" cellspacing="0" cellpadding="0" alt="linkedin" />
</td>
</tr>
<tr>
<td width="25" height="25">
<img src="elementen/twitter.gif" width="25" height="25" border="0" cellspacing="0" cellpadding="0" alt="twitter" />
</td>
</tr>
</tbody>
</table>
</td>
The margin between each social buttons seams a td's style setting, try with
td {
display: inline-block;
}
JsFiddle
I am having an issue with a 2px vertical gap between two tables on the above mentioned Outlook versions. Here is a jsFiddle of what I mean. And here is how it looks in Outlook (with the white gap)...
I have implemented border-collpase on each table, but to no avail.
Code is...
<td bgcolor="#FFFFFF">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody><tr>
<td valign="top">
<table border="0" width="290" align="left" class="mobile-half" cellspacing="0" cellpadding="0">
<tbody><tr>
<td align="right" style="padding-bottom:15px;">
<img border="0" src="http://placekitten.com/290/230" width="290" alt="useful tools"></td>
</tr>
</tbody></table>
<table class="mobile-moveover" bgcolor="#6598b3" border="0" width="280" align="left" cellspacing="0" cellpadding="0">
<tbody><tr class="mobile-hidden">
<td colspan="2" valign="bottom" align="left">
<img border="0" src="http://gallery.mailchimp.com/d20c202a4cf992f952df09668/images/37056558-100b-46fa-ad85-a0f2747d23aa.jpg" width="280" height="37"></td>
</tr>
<tr>
<td width="40" style="padding-bottom: 7px; padding-right: 15px;"><a target="_blank" href="#" style="color:#FFFFFF;"><img border="0" src="http://gallery.mailchimp.com/d20c202a4cf992f952df09668/images/7cbd90ea-1023-4ebc-a9d8-dda116fec42a.gif" width="25" style="display:block; height:auto;"></a></td>
<td width="240" align="left" style="padding-bottom: 6px; padding-right: 15px;"><font color="#FFFFFF">
<a target="_blank" href="#" style="color:#ffffff" class="black-link">Budget
planner</a></font></td>
</tr>
<tr>
<td width="40" style="padding-bottom: 7px; padding-right: 15px;"><a target="_blank" href="#" style="color:#FFFFFF;"><img border="0" src="http://gallery.mailchimp.com/d20c202a4cf992f952df09668/images/7cbd90ea-1023-4ebc-a9d8-dda116fec42a.gif" width="25" style="display:block; height:auto;"></a></td>
<td align="left" style="padding-bottom: 5px; padding-right: 15px;"><font color="#FFFFFF">
<a target="_blank" href="#" style="color:#ffffff" class="black-link">Mortgage calculator</a></font></td>
</tr>
<tr>
<td width="40" style="padding-bottom: 7px; padding-right: 15px;"><a target="_blank" href="#" style="color:#FFFFFF;"><img border="0" src="http://gallery.mailchimp.com/d20c202a4cf992f952df09668/images/7cbd90ea-1023-4ebc-a9d8-dda116fec42a.gif" width="25" style="display:block; height:auto;"></a></td>
<td align="left" style="padding-bottom: 7px; padding-right: 15px;"><font color="#FFFFFF">
<a target="_blank" href="#" style="color:#ffffff" class="black-link">Cut-back calculator</a></font></td>
</tr>
<tr>
<td width="40" style="padding-bottom: 6px; padding-right: 15px;"><a target="_blank" href="#" style="color:#FFFFFF;"><img border="0" src="http://gallery.mailchimp.com/d20c202a4cf992f952df09668/images/7cbd90ea-1023-4ebc-a9d8-dda116fec42a.gif" width="25" style="display:block; height:auto;"></a></td>
<td align="left" style="padding-bottom: 5px; padding-right: 15px;"><font color="#FFFFFF">
<a target="_blank" href="#" style="color:#ffffff" class="black-link">Savings calculator </a></font></td>
</tr>
<tr>
<td width="40" style="padding-bottom: 8px; padding-right: 15px;"><a target="_blank" href="#" style="color:#FFFFFF;"><img border="0" src="http://gallery.mailchimp.com/d20c202a4cf992f952df09668/images/7cbd90ea-1023-4ebc-a9d8-dda116fec42a.gif" width="25" style="display:block; height:auto;"></a></td>
<td align="left" style="padding-bottom: 8px; padding-right: 15px;"><font color="#FFFFFF">
<a target="_blank" href="#r" style="color:#ffffff" class="black-link">Loan calculator </a></font></td>
</tr>
<tr class="mobile-hidden">
<td colspan="2" valign="top">
<img border="0" src="http://gallery.mailchimp.com/d20c202a4cf992f952df09668/images/a2c0633b-af9b-4465-8f0a-ec872a2c5a39.jpg" width="280" height="37"></td>
</tr>
</tbody></table>
<br>
<br></td>
Any ideas?
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 have built an email with tables for a client, but when I test it in AOL, extra padding is added between the images. It looks like a 3px space is being added to the right of each image... Here is my code:
<table border="0" cellspacing="0" cellpadding="0" align="center" width="700" valign="top">
<tr>
<td>
<img src="images/nav-gaming.jpg" align="left" style="display:block; vertical-align:bottom" width="104" height="33" border="0" /> <img src="images/nav-poker.jpg" align="left" style="display:block; vertical-align:bottom" width="104" height="33" border="0" /> <img src="images/nav-restaurant.jpg" align="left" style="display:block; vertical-align:bottom" width="102" height="33" border="0" /> <img src="images/nav-tanzibar.jpg" align="left" style="display:block; vertical-align:bottom" width="92" height="33" border="0" /> <img src="images/nav-events.jpg" align="left" style="display:block; vertical-align:bottom" width="82" height="33" border="0" /> <img src="images/nav-packages.jpg" align="left" style="display:block; vertical-align:bottom" width="96" height="33" border="0" /> <img src="images/nav-rewards.jpg" align="left" style="display:block; vertical-align:bottom" width="120" height="33" border="0" />
</td>
</tr>
</table>
Have I missed anything blindingly obvious? I have tested adding each image to a new td in the table, but that results in the same issue.
It is always safer to put images into their own table cells:
<table border="0" cellspacing="0" cellpadding="0" width="700">
<tr>
<td>
<img src="images/nav-gaming.jpg" align="left" style="margin: 0; border: 0; padding: 0; display: block;" width="104" height="33" border="0" />
</td>
<td>
<img src="images/nav-poker.jpg" align="left" style="margin: 0; border: 0; padding: 0; display: block;" width="104" height="33" border="0" />
</td>
<td>
<img src="images/nav-restaurant.jpg" align="left" style="margin: 0; border: 0; padding: 0; display: block;" width="102" height="33" border="0" />
</td>
<td>
<img src="images/nav-tanzibar.jpg" align="left" style="margin: 0; border: 0; padding: 0; display: block;" width="92" height="33" border="0" />
</td>
<td>
<img src="images/nav-events.jpg" align="left" style="margin: 0; border: 0; padding: 0; display: block;" width="82" height="33" border="0" />
</td>
<td>
<img src="images/nav-packages.jpg" align="left" style="margin: 0; border: 0; padding: 0; display: block;" width="96" height="33" border="0" />
</td>
<td>
<img src="images/nav-rewards.jpg" align="left" style="margin: 0; border: 0; padding: 0; display: block;" width="120" height="33" border="0" />
</td>
</tr>
</table>
Only exception would be if you are trying to float images (to float you need to remove display:block;). Floating can sometimes be problematic unless you have plenty of spare room in your table cell.
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