emailer outlook 2007 help

here is my emailer:

as you can see, it works fine in the browser but when received in Outlook 2007 it comes out like this:

here is the code for it:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
<html xmlns="">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
.whitelink {color:#FFFFFF; text-decoration:none; } 

<table width="599" border="0" cellspacing="0" cellpadding="0">
    <td width="24" rowspan="2" valign="top"><img src="" alt="left" width="24" height="568" /></td>
    <td width="240" valign="top"><img src="" width="243" height="98" /></td>
    <td width="322" rowspan="2" valign="top"><table width="100%" height="442" border="0" cellspacing="0" cellpadding="0">
        <td width="59%" valign="top"><span style="font-family:Arial, Helvetica, sans-serif; font-size:24px; color:#990000; border-top:#ADB3B5 1px solid; display:block; padding-left:20px; padding-top:52px;"><strong>Gewinnen</strong> Sie</span></td>
        <td width="131" height="98" colspan="2" valign="top"><div align="right"><img src="" alt="earphones" width="131" height="98" /></div></td>
        <td height="264" colspan="3" valign="top"><span style="font-family:Arial, Helvetica, sans-serif; font-size:38px; color:#990000; border-bottom:#ADB3B5 1px solid; display:block;  margin-left:20px;">einen iPod touch!</span>
        <span style="font-size:19px; font-family:Arial, Helvetica, sans-serif; padding-left:20px; padding-top:12px; color:#42518c; display:block;">Stellen Sie Ihr Wissen zum Thema
und den m&ouml;glichen Folgen f&uuml;r
Ihre Marke auf die Probe…</span>
<span style="font-size:22px; font-family:Arial, Helvetica, sans-serif; padding-left:20px; color:#990000; display:block;"> ...und gewinnen Sie mit etwas
Gl&uuml;ck einen iPod Touch –
MarkMonitor w&uuml;nscht schon
einmal viel Gl&uuml;ck!</span>        </td>
        <td height="80" colspan="3"><div align="right"><img src="" alt="mouse" width="166" height="80" /></div></td>
      <table width="100%" border="0" cellspacing="0" cellpadding="0">
          <td width="47" height="60"><img src="" width="47" height="60" /></td>
          <td width="106" bgcolor="#7992B6"><span style="font-family:Arial, Helvetica, sans-serif; font-size:14px; line-height:20px; color:#FFFFFF"><a href="#" class="whitelink">Hier klicken<br />
            um zu gewinnen</a></span></td>
          <td width="166" height="60" bgcolor="#7992B6"><img src="" alt="mouse1" width="166" height="60" /></td>
          <td height="66" width="319" colspan="3"><img src="" width="319" height="66" /></td>
    <td width="13" height="568" rowspan="2" valign="top"><img src="" width="13" height="568" /></td>
    <td valign="top"><img src="" width="240" height="470" /></td>
    <td colspan="4"><table width="100%" border="0" cellspacing="0" cellpadding="0">
        <td width="17"><img src="" width="17" height="321" /></td>
        <td><table width="100%" border="0" cellspacing="0" cellpadding="0">
    <td valign="top"><span style="display:block; height:115px; padding:5px 10px 15px 10px; color:#415089; font-family:Arial, Helvetica, sans-serif; font-size:24px;"><span style="color:#990000;">Sch&uuml;tzen Sie Ihre Online</span> - Markenmissbrauch
...Es steht mehr auf dem
Spiel, als nur Ihr
guter Ruf.</span></td>
    <td><span style="display:block; height:102px; padding:10px; color:#FFFFFF; font-family:Arial, Helvetica, sans-serif; font-size:14px; background-color:#7895B6; line-height:20px;">Sch&uuml;tzen Sie Ihre Marke gegen
Warenzeichenmissbrauch, Traffic-Umleitung
und Markenverunglimpfung mit einer
weltweit f&uuml;hrenden L&ouml;sung f&uuml;r den
Online-Markenschutz – von MarkMonitor.</span></td>
    <td><span style="display:block; color:#333333; font-family:Arial, Helvetica, sans-serif; font-size:12px; padding-top:6px; ">Hier klicken um Ihre Marke noch heute online zu schützen</span></td>
        <td width="269" height="321"><div align="right"><img src="" width="269" height="321" /></div></td>

can someone please help me?!


rmills, 8 years ago

I have always found rowspans to be buggy in 2007, personally I would recode without rowspans.

As a side note outlook doesn't render <br /> at all, use <br>.

Also when viewing the code in FireFox there are a number of 'special characters' and the email breaks at the bottom...

fyredefyre fyredefyre, 8 years ago

As a quick fix, I'd try adding this to your CSS:

img { display:block; }

This may just sort out these issues as they seem to quite a common issue. Generally it's a practice that should be used on all emails, for sake of these painful cross-browser problems. - Everything Email.
Email: Skype: fyredefyre
BThies BThies, 8 years ago

Honestly, there are spacing issues, width issues, and incompatible coding.

This needs to be recoded from the ground up, with special attention made to image sizes, and using nested tables.

Let me know if you need my assistance.

Brian Thies
Professional Email Developer
Thies Publishing

See why 200,000 companies worldwide love Campaign Monitor.

From Australia to Zimbabwe, and everywhere in between, companies count on Campaign Monitor for email campaigns that boost the bottom line.

Get started for free