Dreaded borders for html emails


I’m struggling again with html email and getting a border to the right and left of content.

Here’s what I have so far: http://sakeenaheducationcentre.com/wp-content/uploads/2013/07/sec_template.html

Where you see the [newscontent] I need a border to match the above red spotty border and have it extend however much content is put in there.
I’m struggling to know where and how to place this?

I’d be very thankful for the help.

I see you are still going where angels fear to tread!

HTML email is way behind web design, and background images aren’t well supported, though that’s what you would need for that.

I know, it’s awful but it’s the only form email clients accept, if I have background images to go to the right and left of the " [newscontent] ie one for the right and one for the left where should I place the <img> tags and are they in a new <tr> or just a <td>?

Despite the poor CSS support in various email clients, people have come up with some pretty nice designs that are well tested, so perhaps check those out. E.g.:

Some of those layouts use pretty fancy stuff, so I assume they are designed with progressive enhancement in mind (or graceful degradation, as the case may be). Have a look at how they handle background images.

For example:

<td style="background-image: url(images/left-side.jpg); background-repeat: repeat;" background="images/left-side.jpg" bgcolor="#d4d1cd" valign="top" width="22"></td>

thanks for the link!, it’s really useful and I am going to work through them in the future.

and I applied that method and it’s worked for the left but I have some questions:

 why are we using style="background-image" and background="image" and how do I apply the same border on the left?

see how I have it now with the new background image and color:


sorry an edit for the above instead of how do I appy the same border to the "left " I mean how do I apply the same border to the " right "

You have to break the design into a lot more cells than that. I pulled that code from one of the CampaignMonitor templates, but that was just one of many cells in a row across the page. You need a little cell on the left and one on the right.

They use background=“” because it works better on some email clients—even though it is very outdated code. :rolleyes:

I’ve tried adding more <td> but i’m not getting it right. Where and what should I be adding and should I be adding it as a background also on the left?

hantaah, we’ve done this before :slight_smile:

OK. If you can convert a CSS styled image-based table into an inline styled table for e-mail, then the code example in the following post may help.

Although it’s billed as “fluid”, you assign any fixed width you wish, instead, and the repeating images will adapt.

Either follow ronpat’s link, or have a look at the example I pulled that code from. I can’t link directly to the example, but in my link above, it’s the last example on the fourth line (“Grunge Grinders”).

ok finally did it!

Thanks for all your help
Finished Newsletter template