0

I'm trying to code an HTML email newsletter by hand (using MailChimp). It's supposed to look similar to viastedebouw.nl/newsflash/2013-06/ which was created with an app (and therefore does not have very nice looking code).

The problem that I'm having is that one of the table cells has a width set in HTML and CSS, but it does not correspond to either. The code is:

HTML

<td width="140" class="logo">

CSS

.logo { width: 140px; height: 140px; }

However, what ends up happening is that the logo td is 614px wide, for some reason, as illustrated by this screenshot:

The full code for the email can be found here: https://gist.github.com/Flobin/5849501

Edit: I'm now realizing I got the entire table wrong in the first place, d'oh! Most rows have 1 cell, but some have 2. I forgot to add colspan="2" to the cells that span the entire width of the table.

Brian Tompsett - 汤莱恩
  • 5,753
  • 72
  • 57
  • 129
Flobin
  • 626
  • 1
  • 10
  • 26
  • To start you off, the markup is invalid. Use a validator. – jeremy Jun 24 '13 at 11:59
  • 1
    The row with the logo has 2 cells, whereas the first and remainder only have one. – Alex K. Jun 24 '13 at 12:03
  • @AlexK. your comment just made me realize the error is not some obscure CSS rule for email, I've got the entire table wrong in the first place. D'oh! – Flobin Jun 24 '13 at 12:14

2 Answers2

1

You need to put colspan="2" in each cell if it is in a row by itself. As you have a row with 2 cells, all rows need to add up to 2.

Also, at the very top of your table you should also put an empty row with 2 cells to enforce the desired widths in Outlook. See this technique for more info

Community
  • 1
  • 1
John
  • 11,985
  • 3
  • 45
  • 60
  • I was indeed missing `colspan="2"`! I didn't know about the empty row with the two cells. Thank you very much! – Flobin Jun 24 '13 at 12:52
0

You cannot apply stylesheets to HTML newsletters, it needs to be inline styles!

This:

<td width="140" class="logo">

Needs to be this:

<td width="140"><img src="http://yourdomain.com/images/logo.png" width="140px" height="140px" /></td>

Or:

 <td width="140"><img src="http://yourdomain.com/images/logo.png" style="width:140px;height:140px;" /></td>

Read this thoroughly, to help you in future http://www.sitepoint.com/code-html-email-newsletters/

Edit

I see the inline styles!

It looks like the table width's need to be defined in order for the td's to pick up the maximum width etc.

designtocode
  • 2,215
  • 4
  • 21
  • 35