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?
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'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 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>
I am working on an e-mail template that includes 2 links to a website and an e-mail address. They are both of varying widths and have it setup so that they're both beside each other and centred down the middle.
Recently ran into a problem when testing with Outlook and saw that the boxes were not centred and rather pushed to the left and right.
Here are some screenshots of what is happening:
Browser / Other E-mail Clients:
Outlook / Word Templating Engine:
The Code:
<td style="padding-bottom:0px; padding-left:10px; padding-right:10px; padding-top:22px; " align="center">
<table class="contact_links_container" border="0" cellspacing="0" cellpadding="0" width="580" align="center" style="margin:auto; ">
<tr>
<td align="center">
<div class="templateEdit" id="contact_links">
<table class="contact_button_container" style="margin: auto;" border="0" cellspacing="0" cellpadding="0" align="left">
<tbody>
<tr>
<td style="width: 10px;" width="10"> </td>
<td>
<a href="http://www.domain.com">
<table border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td style="padding: 10px 20px; border: 1px solid #c3c6c6; border-radius: 3px;">
<table border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td style="padding-right: 10px;" height="20" align="center" valign="middle">
<a href="http://www.domain.com/">
<img src="/images/icn_globe.png" border="0" alt="" width="18" height="18" />
</a>
</td>
<td style="font-family: Verdana, Geneva, sans-serif; font-size: 15px;" align="left" valign="middle"><a style="color: #7f7f7f; text-decoration: none;" href="http://www.domain.com/">www.domain.com</a>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</a>
</td>
<td style="width: 10px;" width="10"> </td>
</tr>
<tr>
<td style="height: 20px;" colspan="3" height="20"> </td>
</tr>
</tbody>
</table>
<table class="contact_button_container" style="margin: auto;" cellspacing="0" cellpadding="0" align="right">
<tbody>
<tr>
<td style="width: 10px;" width="10"> </td>
<td>
<table border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td style="padding: 10px 20px; border: 1px solid #c3c6c6; border-radius: 3px;">
<table border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td style="padding-right: 10px;" align="center" valign="middle">
<a href="mailto:newaccounts#domain.com">
<img src="images/icn_grey_mail.png" border="0" alt="" width="21" height="20" />
</a>
</td>
<td style="font-family: Verdana, Geneva, sans-serif; font-size: 15px;" align="left" valign="middle"><a style="color: #7f7f7f; text-decoration: none;" href="mailto:apisupport#domain.com">Email</a>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
<td style="width: 10px;" width="10"> </td>
</tr>
<tr>
<td style="height: 20px;" colspan="3" height="20"> </td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</table>
</td>
Does anyone have any ideas on how I can format it so that it works appears in Outlook as it does in the 1st image?
Specify the width for div and td wherever needed. It should work, outlook mail client will set the element width to 100% with reference to body if not specified.
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