Anybody want to help me clean up my html? I'm lost.

I have been trying to figure this out for days and just can't i guess. I had a really nice template, everything worked great online (of course) and in gmail it looks great, but Outlook butchered it, so I tried to change things up using more images and tables but now in Gmail it looks whack and still not right in Outlook 2007 so I'm not sure what to do.

Original Code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head><META NAME="ROBOTS" CONTENT="NOINDEX, NOFOLLOW">
<title>Motion Media - Get the Latest product news & updates</title>
<meta content='text/html; charset=utf-8' http-equiv='Content-Type' />
</head>

<body style='padding:10px; width:720px; margin:auto;'>

<style type='text/css'>

body {font-family:Helvetica, Arial, sans-serif; color:#000;}
a { color: #8f0302; text-decoration:none;}
a:hover { color: #bb2120; text-decoration:none; }
p { line-height: 1.5em; }
#email_writeup h3 {color:#000000;}
.side_deal_content h3, .side_deal_content h4 {font-size:14px; margin:5px 0 10px 0;}
.announcement_ad_content p, .side_deal_content p {font:12px Helvetica, Verdana, Tahoma, sans-serif; line-height:17px;}
.announcement_ad_content h3 {font:14px Helvetica, Verdana, Tahoma, sans-serif; line-height:17px;font-weight:bold;}
.announcement_ad_content h4 {margin:0;padding:0;font:10px Verdana, Tahoma, sans-serif;font-weight:bold;color:#777777;line-height:17px;}
.announcement_ad_content h5 {margin:0;padding:0;font:12px Helvetica, Verdana, Tahoma, sans-serif;;font-weight:bold;color:#777777;}
blockquote { margin:10px; text-decoration: italic; }
blockquote ul { list-style:none; padding:0; }
blockquote ul li {background: url("http://groupon.com/images/groupon/blasts/quote.gif") no-repeat 2px left; padding:0 0px 0 25px; margin:10px; 

}


</style>
<table cellpadding='0' cellspacing='0' width='720px'>
<tr>
<td>
<p style='text-align:center;font-size:11px; font-family: Helvetica, Arial, sans-serif;; color:#929292; 

margin-top:0px;margin-right:0px;margin-bottom:0px;margin-left:0px;'>
Be sure to add
<a href="mailto:brad@motionmedia.com" style="color: #0981be;" title="Newsletter Email">brad@motionmedia.com</a>
to your address book or safe sender list so our emails get to your inbox.
<a href="http://www.motionmedia.com/whitelist.php" style="color: #0981be;">Learn how</a>
</p>
</td>
</tr>
</table>

<div style='width:671px; margin:5px 0; padding: 20px 20px 20px 20px; background-color:#9c2f2d;background-image: 

url(http://www.motionmedia.com/email/images/bg-email-starburst.jpg);background-repeat: no-repeat;background-position: center top; 

border-width:5px; border-style: solid; border-color:#631917;-moz-border-radius:10px;-webkit-border-radius:10px;'>

<table cellpadding='0' cellspacing='0' style='background-color:#fff; -moz-border-radius-topright:8px; -moz-border-radius-topleft:8px; 

-webkit-border-top-right-radius:8px; -webkit-border-top-left-radius:8px;' width='100%'>

<!-- Header TR -->
<tr>
<td colspan='2'><div id='mail-header' style='height:104px; margin: 0; -moz-border-radius-topright:8px; -moz-border-radius-topleft:8px; 

-webkit-border-top-right-radius:8px; -webkit-border-top-left-radius:8px; border-bottom:4px solid #ffa200;'>

<table bgcolor='#000000' cellpadding='0' cellspacing='0' height='104px' width='671px'><tr><td style='width:110px; height:37px; padding:18px 0 0 

15px;' valign='top'><a href="http://www.motionmedia.com" style="color: #0981be;" title="Motion Media"><img alt="Motion Media - MotionMedia.com" 

src="http://www.motionmedia.com/email/images/logo-area.jpg" style="border: 0px; border-right:1px solid #545454; padding-right:15px;" 

/></a></td>

<td style='padding-left:15px; width:250px; padding-top:16px;' valign='top'><table><tr><td style='color:#fff; font-size:12px; font-weight:700; 

font-family: Helvetica, Arial, sans-serif;; margin:0; padding:;'>Email Newsletter</td></tr>
<tr><td style='color:#fff; font-size:20px; font-weight:700; font-family: Helvetica, Arial, sans-serif;; margin:0; padding:5px 0 0 0;'>Motion 

Media</td></tr>
<tr><td style='color:#fff; font-size:15px; font-family: Helvetica, Arial, sans-serif;; margin:0; padding:1px 0 0 0;'><span 

style='font-size:12px; color:#a3a3a3;'>
Software & Hardware for VFX Professionals
</span>
</td></tr></table></td>
<td align='right' style='padding-right:20px; padding-top:21px;' valign='top'><table cellpadding='0' cellspacing='0' width='225px;'><tr><td 

align='right' style='margin:0; color:#fff; font-size:12px; font-family: Helvetica, Arial, sans-serif;;'>Tuesday, January 26, 2010</td></tr>
<tr><td align='right' style='padding-top:15px;'><p style='margin:0; color:#b0aea6; font-size:11px; font-family: Helvetica, Arial, sans-serif;; 

font-weight:700;'>follow us: <a href="http://www.facebook.com/motionmediallc" style="margin-left:10px;" title="Become friends with Motion Media 

on Facebook">

<img alt="Motion Media Facebook" src="http://www.motionmedia.com/email/images/icon-facebook.gif" style="border:none; vertical-align:middle;" 

/></a>

<a href="http://www.twitter.com/motionmediallc" style="margin-left:10px;" title="Follow Motion Media on Twitter">
<img alt="Motion Media Twitter" src="http://www.motionmedia.com/email/images/icon-twitter.gif" style="border:none; vertical-align:middle;" 

/></a><a href="http://www.linkedin.com/briangorne" style="margin-left:10px;" title="Follow Motion Media on Twitter"><img 

src="http://www.motionmedia.com/email/images/linkedintiny.jpg" style="border:none; 

vertical-align:middle;"/></a></p></td></tr></table></td></tr></table>
</div></td>
</tr>


<!-- Content TR -->
<tr>
<td style='padding:20px 0 0px 0; border-top:10px solid #c27b00;' valign='top'>
<table cellpadding='0' cellspacing='0' width='100%'>
<!-- TR 1 -->
<tr>
<td colspan='2'><h1 style='margin:0; padding: 0 20px 0px 20px;'>
</td>
</tr>



<!-- TR 3 -->
<tr>
<td colspan='2'>
<table cellpadding='0' cellspacing='0' id='email_writeup' width='100%'>
<tr>
<td style='padding:0px 0 0 20px; line-height:15px; font-size:12px; color:#000; font-family: Helvetica, Arial, sans-serif;; margin:0;' 

valign='top'>
<h4 style='margin:0;padding:0;font:13px Verdana, Tahoma, sans-serif;font-weight:bold;color:#6c0100;line-height:17px;'>Product News & 

Updates</h4>
<img src="http://www.motionmedia.com/email/cfp/hr1.gif" width=350 alt="Header"/>

<p><b>3ds Max & Shaderlight 1.0 Demo Webinars Feb. 10 & 11, 2010</b><br>
Shaderlight is the pioneering rendering technology that is about to revolutionise the way 3D artists and designers work.

It marks the end of low resolution guesswork and time consuming re-rendering by enabling users to edit and update full quality images on screen 

at interactive frame rates. A physically based, progressive ray-tracing technology, Shaderlight redefines traditional rendering workflows, 

giving artists the creative freedom to change every detail, right up to deadline.<br>
<a href=http://www.motionmedia.com/announcement/Shaderlight%20Demo%20Webinar>Click here for more information.</a>

<p><b>Eyeon Fusion & Avatar</b><br>
<img src=http://www.motionmedia.com/email/images/eyeon-logo-100x.jpg><br>
Chris Bond, President & Senior VFX Supervisor, Film VFX, North America, Prime Focus, had this to say about his studio's use of <a 

href=http://www.motionmedia.com/Eyeon_Fusion-6_Fusion-6>Fusion</a> on the movie Avatar.
 
<blockquote><i>"From the very beginning of any stereoscopic film project, including James Cameron's Avatar, we work in stereo. This applies for 

every shot, and on Avatar, Fusion 64bit allowed us to quickly prototype the shots and control the stereo workflow. We even used Fusion's 3D 

toolset to bring in cameras and assets to assist with stereo placement.Make no mistake - Fusion was as important to us delivering the show as 

the artists working on the project - that's why Fusion is installed at every artist's station, whether it's compositing, 3D or any other 

department."</blockquote></i>

<p><b>AutoCAD 2010 $1,000 Instant Rebate</b><br>
The AutoCAD rebate promotion ends on January 31st, 2010 so there are only 5 days left to get $1,000 off. Don't wait, <a 

href=http://www.motionmedia.com/Autodesk_AutoCad-2010_AutoCad-2010-Standalone>get AutoCAD now.</a></p>

<h4 style='margin:0;padding:0;font:13px Verdana, Tahoma, sans-serif;font-weight:bold;color:#6c0100;line-height:17px;'>Upcoming Promotions & 

Events</h4>
<img src="http://www.motionmedia.com/email/cfp/hr1.gif" width=350 alt="Header"/>

<p><b>FumeFX $100 off Promo ends Tomorrow, Jan. 27th</b><br>
<a href=http://www.motionmedia.com/Autodesk-Certified-Plugins_Sitni-Sati_Fume-FX>Get your FumeFX license before its too late</a>

<p><b>Qube! Certified Administrator training - Toronto March 2-4</b><br>
<a href=http://www.pipelinefx.com/news/article.php?id=159>Click here for more info</a>

<p><b>DigiEffects Camera Mapper 50% off until Friday</b><br>
<a href=http://www.motionmedia.com/DigiEffects_Camera-Mapper_Camera-Mapper>Only $39.50 - Click here to purchase</a></p>

<p><b>Motion Media now sells Wacom Bamboo Online</b><br>
<a href="http://www.motionmedia.com/category/Hardware_Wacom_Bamboo">Check them out here</a>


</td>
<td style='padding:20px 20px 25px 17px; width:230px;' valign='top'>


<!-- / Spotlight TOp RIght -->
<div class='side_deal_content' style='border:1px solid #D3D3D3; -moz-border-radius-topleft:8px; -moz-border-radius:8px; 

-webkit-border-radius:8px; margin-bottom: 10px;'>
<table cellpadding='0' cellspacing='0' width='100%'>
<tr>
<td style="height: 36px; text-align: center;" valign="middle">
<div style="border-bottom: 1px solid rgb(223, 223, 223); padding: 0pt 0pt 1px; background: rgb(241, 241, 241) 

url(http://www.motionmedia.com/email/images/bgs/featuredbg.jpg) repeat-x scroll 0% 0%; overflow: hidden; -moz-background-clip: border; 

-moz-background-origin: padding; -moz-background-inline-policy: continuous; height: 36px; margin-top: 5px;">
<h2 style="margin: 3px; font-family: Helvetica,Arial,sans-serif; font-weight: bold; font-size: 12px; color: rgb(48, 48, 48); padding-top: 

5px;">
WEBINAR: Wednesday, January 27th
</h2>
</div>
</td>
</tr>
<tr>
<td>
<div style="border-bottom: 1px solid rgb(240, 240, 240); padding: 10px 10px 5px;">
<table border="0" cellpadding="0" cellspacing="0">
<tbody><tr>
<td colspan="2">
<p style="margin: 0pt; font-size: 12px; font-family: Arial,Helvetica,sans-serif; font-weight: bold; color: rgb(99, 99, 99);padding-bottom: 

10px;">
Subscription How-To & Licensing Q&A
<br>
</p>
</td>
</tr>
<tr>
<td>
<div class="deal_avatar" style="margin-right: 5px;">
<a href="http://click.e.groupon.com/?qs=94b25ec92fcb46a771b00ab7656e50e337674dfe289ca3a96c79be38ac47132b">
<img src="http://www.motionmedia.com/email/images/autodesk-logo-50x.jpg" style="border: medium none ;">
</a>
</div>
</td>
<td>
<div class="deal_title"></div>
<h4 style="">
<a href="http://www.motionmedia.com/event/Autodesk%20Subscription%20How-To%20and%20Licensing%20Common%20Questions" style="font-size: 11px; 

font-family: Arial,Helvetica,sans-serif;">
Autodesk Subscription How-To & Licensing Q&A. Click for more info.
</a>
</h4>
</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
</div>
<!-- END Spotlight TOp RIght -->

<!-- Hot Deals Section - Right -->
<div class='side_deal_content' style='border:1px solid #D3D3D3; -moz-border-radius-topleft:8px; -moz-border-radius:8px; 

-webkit-border-radius:8px; margin-bottom: 10px;'>
<table cellpadding='0' cellspacing='0' width='100%'>
<tr>
<td style="height: 36px; text-align: center;" valign="middle">
<div style="border-bottom: 1px solid rgb(223, 223, 223); padding: 0pt 0pt 1px; background: rgb(241, 241, 241) 

url(http://www.motionmedia.com/email/images/bgs/rail_header_gradient_grey.jpg) repeat-x scroll 0% 0%; overflow: hidden; -moz-background-clip: 

border; -moz-background-origin: padding; -moz-background-inline-policy: continuous; height: 36px; margin-top: 5px;">
<h2 style="margin: 3px; font-family: Helvetica,Arial,sans-serif; font-weight: bold; font-size: 12px; color: rgb(48, 48, 48); padding-top: 

5px;">
This Weeks Hot Deals!
</h2>
</div>
</td>
</tr>

<!-- Product 1 -->

<tr>
<td>
<div style="border-bottom: 1px solid rgb(240, 240, 240); padding: 10px 10px 5px;">
<table border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td>
<div class="deal_avatar" style="margin-right: 5px;">
<a href="http://www.motionmedia.com/Foundry_Nuke_Nuke-6">
<img src="http://www.motionmedia.com/email/images/deallogos/nuke6-50x.jpg" style="border: medium none ;">
</a>
</div>
</td>
<td>
<div class="deal_title"></div>
<h4 style="">
<a href="http://www.motionmedia.com/Foundry_Nuke_Nuke-6" style="font-size: 11px; font-family: Arial,Helvetica,sans-serif;">
Nuke 6.0v1 is now available to download.<br>Click for more information.
</a>
</h4>
</td>
</tr>
</table>
</div>

<!-- Product 2 -->

<tr>
<td>
<div style="border-bottom: 1px solid rgb(240, 240, 240); padding: 10px 10px 5px;">
<table border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td>
<div class="deal_avatar" style="margin-right: 5px;">
<a href="http://www.motionmedia.com/Autodesk_AutoCad-2010_AutoCad-2010-Standalone">
<img src="http://www.motionmedia.com/email/images/deallogos/autoCAD.jpg" style="border: medium none ;">
</a>
</div>
</td>
<td>
<div class="deal_title"></div>
<h4 style="">
<a href="http://www.motionmedia.com/Autodesk_AutoCad-2010_AutoCad-2010-Standalone" style="font-size: 11px; font-family: 

Arial,Helvetica,sans-serif;">
$1,000 Instant Rebate on any new license until 1/30/2010! Click here to buy
</a>
</h4>
</td>
</tr>
</table>
</div>

<!-- Product 3 -->

<tr>
<td>
<div style="border-bottom: 1px solid rgb(240, 240, 240); padding: 10px 10px 5px;">
<table border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td>
<div class="deal_avatar" style="margin-right: 5px;">
<a href="http://www.motionmedia.com/Eyeon_Fusion-6_Fusion-6">
<img src="http://www.motionmedia.com/email/images/deallogos/eyeon.jpg" style="border: medium none ;">
</a>
</div>
</td>
<td>
<div class="deal_title"></div>
<h4 style="">
<a href="http://www.motionmedia.com/Eyeon_Fusion-6_Fusion-6" style="font-size: 11px; font-family: Arial,Helvetica,sans-serif;">
Eyeon Fusion 6 is now available. <br>Click for pricing info
</a>
</h4>
</td>
</tr>
</table>
</div>




</td>
</tr>
</table>
</div>

<!-- END Hot Deals Section - Right -->

<div class='announcement_ad_content' style='border:1px solid #d3d3d3; padding:10px 15px; margin:15px 0 0 0;'><a 

href=http://www.motionmedia.com/announcement/Sign%20up%20to%20Win%20an%20Intensity%20Pro>
<h3>Win an Intensity Pro!</a>

<a href="http://www.motionmedia.com/announcement/Sign%20up%20to%20Win%20an%20Intensity%20Pro"><img 

src="http://www.motionmedia.com/email/images/intensitypromo.jpg" style="padding:5px;" /></a></h3>

<p><h3>
2 Ways to Win!</h3>
<h5>
1. <a href=http://www.twitter.com/motionmediallc>Follow us on Twitter</a> and retweet 'RT @motionmediallc Follow Motion Media and Retweet this 

to be entered to win a Free Intensity Pro from Black Magic' or
<br><br>
2. Become a fan on <a href=http://www.facebook.com/motionmediallc>Facebook</a></p></h5>
</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>


</table>
<table style='background-color:#ffffff; margin-top:2px;' width='671px'>
<tr>
<td style='font-family: Helvetica, Arial, sans-serif;; color:#000; font-weight:700; font-size:12px; text-align:left; line-height:16px; 

padding:0px;'>
<a href="http://www.motionmedia.com/category/Software_Autodesk"><img src="http://www.motionmedia.com/email/mm-news/vendorimages/1.jpg" 

style="border-style: none;"></a>
<a href="http://www.motionmedia.com/category/Hardware_Blackmagic"><img src="http://www.motionmedia.com/email/mm-news/vendorimages/2.jpg" 

style="border-style: none;"></a>
<a href="http://www.motionmedia.com/category/Software_Apple"><img src="http://www.motionmedia.com/email/mm-news/vendorimages/3.jpg" 

style="border-style: none;"></a>
<a href="http://www.motionmedia.com/category/Software_Adobe"><img src="http://www.motionmedia.com/email/mm-news/vendorimages/4.jpg" 

style="border-style: none;"></a>
<a href="http://www.motionmedia.com/category/Software_ChaosGroup-%28Vray%29"><img 

src="http://www.motionmedia.com/email/mm-news/vendorimages/5.jpg" style="border-style: none;"></a>
<a href="http://www.motionmedia.com/category/Hardware_AJA"><img src="http://www.motionmedia.com/email/mm-news/vendorimages/6.jpg" 

style="border-style: none;"></a>
<a href="http://www.motionmedia.com/category/Software_Foundry"><img src="http://www.motionmedia.com/email/mm-news/vendorimages/7.jpg" 

style="border-style: none;"></a>
<a href="http://www.motionmedia.com/category/Hardware_Matrox"><img src="http://www.motionmedia.com/email/mm-news/vendorimages/8.jpg" 

style="border-style: none;"></a>
<a href="http://www.motionmedia.com/category/Software_Pixologic--%28Zbrush%29"><img 

src="http://www.motionmedia.com/email/mm-news/vendorimages/9.jpg" style="border-style: none;"></a>
<a href="http://www.motionmedia.com/category/Software_Eyeon"><img src="http://www.motionmedia.com/email/mm-news/vendorimages/10.jpg" 

style="border-style: none;"></a>
<a href="http://www.motionmedia.com/category/Hardware_Wacom"><img src="http://www.motionmedia.com/email/mm-news/vendorimages/11.jpg" 

style="border-style: none;"></a>
<a href="http://www.motionmedia.com/C121000"><img src="http://www.motionmedia.com/email/mm-news/vendorimages/12.jpg" style="border-style: 

none;"></a>





</span>
</td>
</tr>
</table>



</table>
<table style='background-color:#631917; margin-top:2px; -moz-border-radius-bottomleft:8px; -moz-border-radius-bottomright:8px; 

-webkit-border-bottom-left-radius:8px; -webkit-border-bottom-right-radius:8px;' width='671px'>
<tr>
<td style='font-family: Helvetica, Arial, sans-serif;; color:#ffffff; font-weight:700; font-size:12px; text-align:center; line-height:16px; 

padding:10px;'>
Email us:
<a href="mailto:brad@motionmedia.com" style="color: #ffffff;" title="Email Motion Media Support">brad@motionmedia.com</a>
&nbsp;&nbsp;&nbsp; Call us: (310) 450-4000&nbsp;&nbsp;
<span style='font-weight:normal; font-size:9px;'>
Monday - Friday 9:00am - 5:00pm PST
</span>
</td>
</tr>
</table>
</div>
</body>
</html>

New code started but not testing well in Gmail already

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head><META NAME="ROBOTS" CONTENT="NOINDEX, NOFOLLOW">
<title>Motion Media - Get the Latest product news & updates</title>
<meta content='text/html; charset=utf-8' http-equiv='Content-Type' />
</head>

<body style='padding:10px; width:720px; margin:auto;'>

<style type='text/css'>


body {font-family:Helvetica, Arial, sans-serif; color:#000;}
a { color: #8f0302; text-decoration:none;}
a:hover { color: #bb2120; text-decoration:none; }
p { line-height: 1.5em; }
#email_writeup h3 {color:#000000;}
.side_deal_content h3, .side_deal_content h4 {font-size:14px; margin:5px 0 10px 0;}
.announcement_ad_content p, .side_deal_content p {font:12px Helvetica, Verdana, Tahoma, sans-serif; line-height:17px;}
.announcement_ad_content h3 {font:14px Helvetica, Verdana, Tahoma, sans-serif; line-height:17px;font-weight:bold;}
.announcement_ad_content h4 {margin:0;padding:0;font:10px Verdana, Tahoma, sans-serif;font-weight:bold;color:#777777;line-height:17px;}
.announcement_ad_content h5 {margin:0;padding:0;font:12px Helvetica, Verdana, Tahoma, sans-serif;;font-weight:bold;color:#777777;}
blockquote { margin:10px; text-decoration: italic; }
blockquote ul { list-style:none; padding:0; }
img.pics {   margin: 0px 0 0 0;   padding: 0 0 0px 0; border:0; float:left;}
img.pics a {   margin: 0px 0 0 0;   padding: 0 0 0px 0; border:0; float:left;}

</style>

<table cellpadding='0' cellspacing='0' width='720px'>
<tr>
<td>
<p style='text-align:center;font-size:11px; font-family: Helvetica, Arial, sans-serif;; color:#929292; 

margin-top:0px;margin-right:0px;margin-bottom:0px;margin-left:0px;'>
Be sure to add
<a href="mailto:brad@motionmedia.com" style="color: #0981be;" title="Newsletter Email">brad@motionmedia.com</a>
to your address book or safe sender list so our emails get to your inbox.
<a href="http://www.motionmedia.com/whitelist.php" style="color: #0981be;">Learn how</a>
</p><br>
</td>
</tr>
</table>

<table width=720 cellspacing=0 cellpadding=0 border=0>
<tr>
<td>
<a href=http://www.motionmedia.com><img class="pics" src=http://www.motionmedia.com/email/images/topleft.jpg></a>
<a href=http://www.facebook.com/motionmediallc><img class="pics" src=http://www.motionmedia.com/email/images/top1.jpg></a>
<a href=http://www.twitter.com/motionmediallc><img class="pics" src=http://www.motionmedia.com/email/images/top2.jpg></a>
<a href=http://www.linkedin.com/briangorne><img class="pics" src=http://www.motionmedia.com/email/images/topright.jpg></a><br>
<img class="pics" src=http://www.motionmedia.com/email/images/midorange.jpg>
</td></tr></table>
<table width=720 cellspacing=0 cellpadding=0 border=0>
<tr valign=top>
<td width=5 bgcolor=#631917><img class="pics" src=http://www.motionmedia.com/images/tr.gif height=100% width=5></td>
<td width=20 bgcolor=#9c2f2d><img src=http://www.motionmedia.com/images/tr.gif width=20 height=100%></td>
<td width=400 style="padding:20px; font:12px Helvetica, Verdana, Tahoma, sans-serif;">
Hello.
</td>
<td width=280 height=100% cellpadding=10><p>Hi, What the hell is going to go here? I don't know but lets hope this fricking thing works.</p>


</td>
<td width=20 bgcolor=#9c2f2d><img src=http://www.motionmedia.com/images/tr.gif width=20 height=100%></td>
<td width=5 bgcolor=#631917><img class="pics" src=http://www.motionmedia.com/images/tr.gif height=100% width=5></td>

</tr></table>
<table width=720 cellpadding=0 cellspacing=0><tr><td>
<img class="pics" src=http://www.motionmedia.com/email/images/footer.jpg>
</td></tr></table>
</body></html>
fyredefyre fyredefyre, 6 years ago

I'd suggest you highlight what's wrong with your email and provide a screenshot for a answer on this, otherwise you may not get any answers here.


www.phenom.com.au - Everything Email.
Email: jordan.hunt@phenom.com.au Skype: fyredefyre
niphal niphal, 6 years ago

To start, can I suggest putting all of your CSS inline?

I tried it out in Gmail but I can't get the template structure to break - what is the problem that you can see? As Fryredefyre said, a screen shot would be great.


Andrew Beeston
Brown Box email design & management.
BThies BThies, 6 years ago

A good amount of the code is incompatible with several e-mail clients.

Things to note:
• Padding, margin and height are not fully compatible with all e-mail clients.
• Your </i> is outside of your block quote when it should be on the inside.
• Quotes are missing around the link for Win an Intensity Pro!  Also missing closing on the same line for the <h3>
• In the line "Email Newsletter", you having padding in the style without any padding specified
• There are & symbols which should be &amp; in your code
• There are " symbols which should be &quot; in your code
• <p> tags in several locations without closing </p> tags

There are many other issues, but in any case it looks like it'd need a complete overhaul.

Without an original document I wouldn't be able to re-code this for you.  Can you shoot me a working document (PDF, PSD, etc.)?  (E-mail address below)


Brian Thies
Professional Email Developer
Thies Publishing
motionmedia, 6 years ago

Sorry for the delay, thanks for responding.  Well I have new code now and I'll put some screenshots here as well. I am trying to use tables and more images but it still is looking horrible.

Any help would be appreciated. This is what the email should look like & the original code: Here

Screenshots of New Code: Gmail & Outlook 2007

New Code:

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head><META NAME="ROBOTS" CONTENT="NOINDEX, NOFOLLOW">
<title>Motion Media - Get the Latest product news & updates</title>
<meta content='text/html; charset=utf-8' http-equiv='Content-Type' />
</head>

<body style='padding:10px; width:720px; margin:auto;'>

<style type='text/css'>


body {font-family:Helvetica, Arial, sans-serif; color:#000;}
a { color: #8f0302; text-decoration:none;}
a:hover { color: #bb2120; text-decoration:none; }
p { line-height: 1.5em; }
#email_writeup h3 {color:#000000;}
.side_deal_content h3, .side_deal_content h4 {font-size:14px; margin:5px 0 10px 0;}
.announcement_ad_content p, .side_deal_content p {font:12px Helvetica, Verdana, Tahoma, sans-serif; line-height:17px;}
.announcement_ad_content h3 {font:14px Helvetica, Verdana, Tahoma, sans-serif; line-height:17px;font-weight:bold;}
.announcement_ad_content h4 {margin:0;padding:0;font:10px Verdana, Tahoma, sans-serif;font-weight:bold;color:#777777;line-height:17px;}
.announcement_ad_content h5 {margin:0;padding:0;font:12px Helvetica, Verdana, Tahoma, sans-serif;;font-weight:bold;color:#777777;}
blockquote { margin:10px; text-decoration: italic; }
blockquote ul { list-style:none; padding:0; }
img.pics {   margin: 0px 0 0 0;   padding: 0 0 0px 0; border:0; float:left;}
img.pics a {   margin: 0px 0 0 0;   padding: 0 0 0px 0; border:0; float:left;}

</style>

<table cellpadding='0' cellspacing='0' width='720px'>
<tr>
<td>
<p style='text-align:center;font-size:11px; font-family: Helvetica, Arial, sans-serif;; color:#929292; margin-top:0px;margin-right:0px;margin-bottom:0px;margin-left:0px;'>
Be sure to add
<a href="mailto:brad@motionmedia.com" style="color: #0981be;" title="Newsletter Email">brad@motionmedia.com</a>
to your address book or safe sender list so our emails get to your inbox.
<a href="http://www.motionmedia.com/whitelist.php" style="color: #0981be;">Learn how</a>
</p><br>
</td>
</tr>
</table>

<table width=720 cellspacing=0 cellpadding=0 border=0>
<tr>
<td>
<a href=http://www.motionmedia.com><img class="pics" src=http://www.motionmedia.com/email/images/topleft.jpg></a>
<a href=http://www.facebook.com/motionmediallc><img class="pics" src=http://www.motionmedia.com/email/images/top1.jpg></a>
<a href=http://www.twitter.com/motionmediallc><img class="pics" src=http://www.motionmedia.com/email/images/top2.jpg></a>
<a href=http://www.linkedin.com/briangorne><img class="pics" src=http://www.motionmedia.com/email/images/topright.jpg></a><br>
<img class="pics" src=http://www.motionmedia.com/email/images/midorange.jpg>
</td></tr></table>
<table width=720 cellspacing=0 cellpadding=0 border=0>
<tr valign=top>
<td width=5 bgcolor=#631917><img class="pics" src=http://www.motionmedia.com/images/tr.gif height=100% width=5></td>
<td width=20 bgcolor=#9c2f2d><img src=http://www.motionmedia.com/images/tr.gif width=20 height=100%></td>
<td width=400 style="padding:20px; font:12px Helvetica, Verdana, Tahoma, sans-serif;">
Hello.
</td>
<td width=280 height=100% cellpadding=10><p>Hi, What the hell is going to go here? I don't know but lets hope this fricking thing works.</p>


</td>
<td width=20 bgcolor=#9c2f2d><img src=http://www.motionmedia.com/images/tr.gif width=20 height=100%></td>
<td width=5 bgcolor=#631917><img class="pics" src=http://www.motionmedia.com/images/tr.gif height=100% width=5></td>

</tr></table>
<table width=720 cellpadding=0 cellspacing=0><tr><td>
<img class="pics" src=http://www.motionmedia.com/email/images/footer.jpg>
</td></tr></table>
</body></html>
BThies BThies, 6 years ago

on it.


Brian Thies
Professional Email Developer
Thies Publishing
BThies BThies, 6 years ago

Replied via e-mail.


Brian Thies
Professional Email Developer
Thies Publishing

Join 200,000 companies around the world that use Campaign Monitor to run email marketing campaigns that deliver results for their business.

Get started for free
1-888-533-8098