1

HTML email newbie here. Cannot believe how hard a simple thing can be in this arena...

I need a left-aligned, 1 pixel high, 350 pixels wide, colored line that I can put between lines of text in an HTML email.

Something like <hr align="left" style="height: 1px; width: 350px; color: #ff0000;" /> but of course that doesn't work in various versions of Outlook (I need to support 2003+) and Entourage (I need to support 2004+). (Other clients aren't giving me the same sort of grief, of course.)

Actual <hr>s are apparently untweakable in Entourage, so I've tried all sorts of things, including 1px high <p>s with a background color. Everything I try breaks somewhere.

Anyone have a bulletproof way to produce this simple line w/o resorting to an image?

matthewn
  • 149
  • 1
  • 6
  • You've got to do it in tables. There's a great resource here about what you can and can't to in HTML emails -> http://www.emailology.org/ – SpaceBeers May 23 '12 at 15:03

2 Answers2

0

There is no way around not using an image for this.

What you need to do is add a spacer image and a background color.

Im not sure how you have your email laid out, but if this was for me i would do something like this:

http://jsfiddle.net/ZsCwX/

<table cellpadding="0" cellspacing="0" width="600">
  <tr>
    <td height="1px" width="350px" style="background-color:#F00;"><img src="image/spacer.gif" alt="" width="350" height="1" style="display:block" border="0" /></td>
    <td height="1px" width="250px"><img src="image/spacer.gif" alt="" width="250" height="1" style="display:block" border="0" /></td>
  </tr>
</table>​
Undefined
  • 11,234
  • 5
  • 37
  • 62
  • No need for the spacer images - they can actually be harmful, as they increase the spam score and some clients can have problems with them. Also, the `height` and `width` HTML attributes do **not** have `px` after them. You only use a unit if it's `%`. – Dan Blows May 23 '12 at 22:05
  • There is lots of need for spacer images! Especially for cross client comparability in Outlook 2007 + 2010. – Undefined May 23 '12 at 22:38
  • Have you tested that? I've built 100s of emails that worked fine in all major email clients (inc Outlook 2007 + 2010) without spacer gifs. I just wrote a Q+A on this so we can debate outside comments - http://stackoverflow.com/questions/10732164/do-i-need-to-use-spacer-images-when-coding-html-emails – Dan Blows May 24 '12 at 06:22
0

Try this:

<tr>
        <td style="padding-top:30px;padding-bottom:30px;">
            <table border="0" cellpadding="0" cellspacing="0" width="350">
                <tbody>
                    <td align="left" bgcolor="#ff0000" style="font-size: 1px; line-height:1px; color:#ff0000">&zwnj;</td>
                </tbody>
            </table>
        </td>
</tr>
robb
  • 294
  • 2
  • 14