HTML Help

craig721 · Joined: 05 Nov 2009 Posts: 1

In my e-flyers that I sent out to my customer base, I use basic HTML and the horizontal and vertical divider lines display perfectly when viewed as a web page, but I can't get them to display in Microsoft Outlook 2007. All graphics display perfectly also when viewed as a web page and in Outlook. For some reason the divider lines don't display in outlook. Not sure if I have an HTML problem or simply a problem with outlook?

Here's the basic code for the divider's: <TD WIDTH="798">
<P><CENTER><TABLE WIDTH="100%" BACKGROUND="http://www.martin-capital.com/graphics/bg_red.gif"
BORDER="0" CELLSPACING="0" CELLPADDING="0" HEIGHT="1">
<TR>
<TD WIDTH="100%" BACKGROUND="http://www.martin-capital.com/graphics/bg_red.gif">
<P><CENTER><IMG SRC="http://www.martin-capital.com/graphics/bg_red.gif"
ALIGN="BOTTOM" BORDER="0"></CENTER></TD>

If anyonehas any ideas, I would appreciate some feedback.

Thanks!

PayneLess Designs · Joined: 28 Feb 2007 Posts: 3593 Location: Biloxi, MS

Well, not sure of the effect you are after since the image is a 1X1 pixel and is a background image. A border effect will need a width/height, but play with this code and see if it gets you closer to what you want:
Code: <table width="100%" style="background: url(http://www.martin-capital.com/graphics/bg_red.gif) repeat top left scroll; border: 0; margin: 0; padding: 0;">
<tr>
<td width="100%" style="background: url(http://www.martin-capital.com/graphics/bg_red.gif) repeat top left scroll; text-align: center; color: #ffffff;"><p>Text here.</p></td>
</tr>
</table>

I added the bottom tags to keep from getting errors reported because tags are not closed. Not exactly sure where you were needing a horizontal and vertical divider line as you can use the "border" property or try setting the <hr> tag with CSS styling.

Another way with "dividers":
Code: <table style="width:100%; background: url(http://www.martin-capital.com/graphics/bg_red.gif) repeat-y top left scroll; border: 0; margin: 0; padding: 0;">
<tr>
<td style="width:100%; height: 10px; background: url(http://www.martin-capital.com/graphics/bg_red.gif) repeat-x top left scroll; text-align: center; color: #000000;"><p>Text here.</p></td>
</tr>
</table>