...

View Full Version : layout changes in emailer - please help



jarv
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">
<head>
<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; }
-->
</style>

</head>

<body>
<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>
<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:
</p>
<ul>
<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>
</ul>
<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>
<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.
</p>
</div>
<div id="footer"><img src="footer.gif" border="0" alt="Footer" /></div>

</div>
</body>
</html>

this is what the bottom of the email looks like in a browser:
http://www.wildfire-digital.com/images/Picture1.png

this is the outcome at the bottom of the design in an emailer:
http://www.wildfire-digital.com/images/Picture2.png

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

jarv
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?!

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

http://www.wildfire-digital.com/images/Picture3.png

* 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?

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

http://www.wildfire-digital.com/images/Picture4.png



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum