View Full Version : layout changes in emailer - please help

02-17-2009, 05:37 PM
here is my code for my emailer:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Communicate 365</title>
<style type="text/css">
#wrapper{width:660px; background-color:#c3c2a4; height:100%;}
#toplogoholder{width:624px; background-color:#FFFFFF; height:146px; padding:38px 36px 0px 0px; text-align:right;}
#toppic{width:660px; height:406px; border-bottom:#FFFFFF 6px solid; }
#maintext{width:660px; height:100%; background-color:#c3c2a4; }
#textonright{ color:#7692a8; font-family:Arial, Helvetica, sans-serif; font-size:24px; text-align:center; float:right; margin:10px 100px 0px 0px;}
#smallpic{ height:192px; width:192px; float:left; margin-left:30px;}
#footer{ height:99px; width:660px; }
li { margin-left:40px; font-family:Arial, Helvetica, sans-serif; font-size:18px; color:#FFFFFF;}
hr {color: sienna}
p {margin-left: 20px}
body {margin: auto 0px; background-color:#FFFFFF; }


<div id="wrapper">
<div id="toplogoholder"><img src="logo.gif" alt="Company logo" border="0" /></div>
<div id="toppic"><img src="picture.gif" alt="Company logo" border="0" /></div>
<div id="maintext"><p style="color: white; margin:40px 20px 20px 20px; font-family:Arial, Helvetica, sans-serif; font-size:24px; font-style:italic;">
Do you want to significantly raise your company’s profile with customers and the media from just 750?
<p style="color: #7692a8; margin:20px 30px 20px 30px; font-family:Arial, Helvetica, sans-serif; font-size:20px;">
Communicate365 International specialises in working with local businesses in the Sussex area and is currently offering a full–service media relations campaign, which includes:
<li>Producing one news announcement a month</li>
<li>Creating targeted media lists</li>
<li>Issuing the release to the press</li>
<li>Following-up with key journalists, papers and magazines</li>
<li>Tracking relevant forth-coming features </li>
<li>Pack-shot photography</li>
<li>Full press office management</li>
<div id="smallpic"><img src="smallpic.gif" border="0" alt="small picture" /></div>
<div id="textonright">To get yourself heard <br /><br /><a href="#" title="Link"><img src="click-here.gif" border="0" alt="click here" /></a><br /><br />or call 01273 728287</div>
<p style="color: #FFFFFF; margin:40px 20px 10px 20px; font-family:Arial, Helvetica, sans-serif; font-size:24px; text-align:right; clear:both;">
Your brand is the most<br />important asset your business has
<p style="color: #FFFFFF; margin-right:20px; font-family:Arial, Helvetica, sans-serif; font-size:34px; text-align:right; ">
Create it, build it, nuture it.
<div id="footer"><img src="footer.gif" border="0" alt="Footer" /></div>


this is what the bottom of the email looks like in a browser:

this is the outcome at the bottom of the design in an emailer:

here is the URL: http://www.wildfire-digital.com/emailers/communicate365/index.html

02-17-2009, 06:25 PM
ok so I sort of fixed it, now the text half way down next to the small pic has no margin and is completely floating to the right?!

02-18-2009, 10:05 AM
ok, so I have to get it working in Outlook 2007 and here is how it looks:


* Outlook 2007 doesn't show the CSS style: clear
* Outlook 2007 doesn't support title tags for any html elements
* Outlook 2007 doesn't support alt tags for images

can someone please help?

02-18-2009, 10:15 AM
ok, so I just fixed Outlook 2007 for now
my problem now is mac mail: