AdriannaNYNY
03-15-2010, 05:42 PM
Hi,
So I've been building my first e-mail template, and it has been much more difficult than I imagined. Right now I am trying to apply a width to a table but when I check in the Outlook e-mail client (if the person had no images selected in that client) The linked text displayed inside the broken image, breaks my width styles and the template displays at 100% the width available.
Here Is My Code:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>PSI Digital Imaging Solutions</title>
</head>
<body width="600" style="width:600px;">
<table border="0" cellpadding="20" cellspacing="0" style="font-family:arial;">
<tr>
<a href="http://www.plottersupplies.com/"><p><img src="images/psilogo.gif" alt="PSI Digital Imaging Solutions" border="0" /></p>
</a>
</tr>
<tr>
<td style="vertical-align:top;" width="200" >
<h4 style="display:inline;" >PSI Digital Imaging Solutions</h4>
<!-- This starts the NAVIGATION list on the left hand side -->
<ul style="color:#000000; font-size:12px;" >
<li><a style="color:#ff9900;" href="http://www.plottersupplies.com/">Large Format Printers</a></li>
<li><a style="color:#ff9900;" href="http://www.plottersupplies.com/">Laser Printers</a></li>
<li><a style="color:#ff9900;" href="http://www.plottersupplies.com/">Scanners</a></li>
<li><a style="color:#ff9900;" href="http://www.plottersupplies.com/">Laminators</a></li>
<li><a style="color:#ff9900;" href="http://www.plottersupplies.com/">Rip Software</a></li>
<li><a style="color:#ff9900;" href="http://www.plottersupplies.com/">Ink, Media, Laminators</a></li>
<li><a style="color:#ff9900;" href="http://www.plottersupplies.com/">Laser Toners</a></li>
</ul>
<!-- This ENDS THE NAV -->
<!-- This begins a space for any misc links or offers -->
<h4 style="display:inline;">Additional Offers</h4>
<p>
<a style="color:#ff9900; font-size:12px;" href="http://www.plottersupplies.com/"
title="Sign Up Now">Sign Up Now</a>
</p>
<p>
<a style="color:#ff9900; font-size:12px;" href="http://www.plottersupplies.com/"
title="Follow Us">Follow Us</a>
</p>
<p style="text-align:center; font-size:12px;" >...</p>
<p style="text-align:center; font-size:12px;">800.365.3305</p>
<p style="text-align:center; font-size:12px;">303.450.2900</p>
<p style="text-align:center; font-size:12px;">Plotter Supplies Is a Company that Supplies Digital Imaging Solutions for Smart Businesses. We Offer Next Day Service and 25 years of experience serving your needs, day in, and day out.</p>
<p style="text-align:center; font-size:12px;" >...</p>
<a style="color:#ff9900; font-size:12px;" href="http://www.plottersupplies.com/"
title="Unsubscribe">Unsubscribe</a>
<!-- This ENDS FOOTER AND LEFT COLUMN -->
</td>
<!-- This begins OFFERS/RIGHT COLUMN -->
<td width="310" style="border:3px solid #d1d1d1;" >
<h4 style="display:inline;">New Member Introductory Offers</h4>
<a href="http://www.plottersupplies.com/"><img src="images/paperolls.gif" alt="Paper Roll Image" border="0" style="padding-top:15px;" /></a>
<p><h4><a style="color:#ff9900;" href="http://www.plottersupplies.com/">300 for the Price of 100</a></h4></p>
<p style="font-size:12px;">Heavy Weight 36# - Waterfast Coated Bond - Get 300' for the price of H-P's 100'</p>
<p style="font-size:12px;">Compatible with machines that use 300' rolls.</p>
<p style="font-size:12px;">Designed for high volume CAD and Graphic Applications. Superior coating optimized for HP, Epson and Encad-type printers using dye and pigment ink. Waterfast image, crisp lines, dense black, and vivid colors combined with fast dry times.</p>
<p><a style="color:#ff9900; font-size:12px;" href="http://www.plottersupplies.com/">- Coated-Inkjet-Bond 36X</a></p>
<p><a style="color:#ff9900; font-size:12px;" href="http://www.plottersupplies.com/">- Coated-Inkjet-Bond 42X</a></p>
<img src="images/spacer.gif" />
<a href="http://www.plottersupplies.com/"><img src="images/scanner.gif" alt="Scanner Image" border="0" /></a>
<p><h4><a style="color:#ff9900;" href="http://www.plottersupplies.com/">Color Scanning Discount</a></h4></p>
<p style="font-size:12px;">Color Large Format Scanning starting at $3,899.00</p>
<img src="images/spacer.gif" />
<a href="http://www.plottersupplies.com/"><img src="images/hpInkImage.gif" alt="HP Advertisement" border="0" /></a>
<img src="images/spacer.gif" />
<a href="http://www.plottersupplies.com/"><img src="images/hplogo.gif" alt="HP Logo" border="0" /></a>
<p><h4><a style="color:#ff9900;" href="http://www.plottersupplies.com/" >HP Cash In & Trade Up</a></h4></p>
<p style="font-size:12px;">
Want to save cash and trade up your old functional HP technology for the brand new? Participate in HP DesignJet Cash In and Trade Up Promotion.
</p>
<!-- This ENDS OFFERS on the right hand side -->
</td>
</tr>
</table>
</body>
Thank you so much for your help. I've recently picked up a contract job, and if I do well with a few new things (such as this template) they promised to throw me all the work I could handle.
Adrianna
So I've been building my first e-mail template, and it has been much more difficult than I imagined. Right now I am trying to apply a width to a table but when I check in the Outlook e-mail client (if the person had no images selected in that client) The linked text displayed inside the broken image, breaks my width styles and the template displays at 100% the width available.
Here Is My Code:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>PSI Digital Imaging Solutions</title>
</head>
<body width="600" style="width:600px;">
<table border="0" cellpadding="20" cellspacing="0" style="font-family:arial;">
<tr>
<a href="http://www.plottersupplies.com/"><p><img src="images/psilogo.gif" alt="PSI Digital Imaging Solutions" border="0" /></p>
</a>
</tr>
<tr>
<td style="vertical-align:top;" width="200" >
<h4 style="display:inline;" >PSI Digital Imaging Solutions</h4>
<!-- This starts the NAVIGATION list on the left hand side -->
<ul style="color:#000000; font-size:12px;" >
<li><a style="color:#ff9900;" href="http://www.plottersupplies.com/">Large Format Printers</a></li>
<li><a style="color:#ff9900;" href="http://www.plottersupplies.com/">Laser Printers</a></li>
<li><a style="color:#ff9900;" href="http://www.plottersupplies.com/">Scanners</a></li>
<li><a style="color:#ff9900;" href="http://www.plottersupplies.com/">Laminators</a></li>
<li><a style="color:#ff9900;" href="http://www.plottersupplies.com/">Rip Software</a></li>
<li><a style="color:#ff9900;" href="http://www.plottersupplies.com/">Ink, Media, Laminators</a></li>
<li><a style="color:#ff9900;" href="http://www.plottersupplies.com/">Laser Toners</a></li>
</ul>
<!-- This ENDS THE NAV -->
<!-- This begins a space for any misc links or offers -->
<h4 style="display:inline;">Additional Offers</h4>
<p>
<a style="color:#ff9900; font-size:12px;" href="http://www.plottersupplies.com/"
title="Sign Up Now">Sign Up Now</a>
</p>
<p>
<a style="color:#ff9900; font-size:12px;" href="http://www.plottersupplies.com/"
title="Follow Us">Follow Us</a>
</p>
<p style="text-align:center; font-size:12px;" >...</p>
<p style="text-align:center; font-size:12px;">800.365.3305</p>
<p style="text-align:center; font-size:12px;">303.450.2900</p>
<p style="text-align:center; font-size:12px;">Plotter Supplies Is a Company that Supplies Digital Imaging Solutions for Smart Businesses. We Offer Next Day Service and 25 years of experience serving your needs, day in, and day out.</p>
<p style="text-align:center; font-size:12px;" >...</p>
<a style="color:#ff9900; font-size:12px;" href="http://www.plottersupplies.com/"
title="Unsubscribe">Unsubscribe</a>
<!-- This ENDS FOOTER AND LEFT COLUMN -->
</td>
<!-- This begins OFFERS/RIGHT COLUMN -->
<td width="310" style="border:3px solid #d1d1d1;" >
<h4 style="display:inline;">New Member Introductory Offers</h4>
<a href="http://www.plottersupplies.com/"><img src="images/paperolls.gif" alt="Paper Roll Image" border="0" style="padding-top:15px;" /></a>
<p><h4><a style="color:#ff9900;" href="http://www.plottersupplies.com/">300 for the Price of 100</a></h4></p>
<p style="font-size:12px;">Heavy Weight 36# - Waterfast Coated Bond - Get 300' for the price of H-P's 100'</p>
<p style="font-size:12px;">Compatible with machines that use 300' rolls.</p>
<p style="font-size:12px;">Designed for high volume CAD and Graphic Applications. Superior coating optimized for HP, Epson and Encad-type printers using dye and pigment ink. Waterfast image, crisp lines, dense black, and vivid colors combined with fast dry times.</p>
<p><a style="color:#ff9900; font-size:12px;" href="http://www.plottersupplies.com/">- Coated-Inkjet-Bond 36X</a></p>
<p><a style="color:#ff9900; font-size:12px;" href="http://www.plottersupplies.com/">- Coated-Inkjet-Bond 42X</a></p>
<img src="images/spacer.gif" />
<a href="http://www.plottersupplies.com/"><img src="images/scanner.gif" alt="Scanner Image" border="0" /></a>
<p><h4><a style="color:#ff9900;" href="http://www.plottersupplies.com/">Color Scanning Discount</a></h4></p>
<p style="font-size:12px;">Color Large Format Scanning starting at $3,899.00</p>
<img src="images/spacer.gif" />
<a href="http://www.plottersupplies.com/"><img src="images/hpInkImage.gif" alt="HP Advertisement" border="0" /></a>
<img src="images/spacer.gif" />
<a href="http://www.plottersupplies.com/"><img src="images/hplogo.gif" alt="HP Logo" border="0" /></a>
<p><h4><a style="color:#ff9900;" href="http://www.plottersupplies.com/" >HP Cash In & Trade Up</a></h4></p>
<p style="font-size:12px;">
Want to save cash and trade up your old functional HP technology for the brand new? Participate in HP DesignJet Cash In and Trade Up Promotion.
</p>
<!-- This ENDS OFFERS on the right hand side -->
</td>
</tr>
</table>
</body>
Thank you so much for your help. I've recently picked up a contract job, and if I do well with a few new things (such as this template) they promised to throw me all the work I could handle.
Adrianna