Best inline style format for HTML email?

Question

Which inline style format better for an HTML email template:

<table height="800"></table>
<table bgcolor="#000000"></table>

or

<table style="height:800px;"></table>
<table style="background:#000000;"></table>

Brad · Accepted Answer · 2014-03-20T18:08:53.470

5

height="800px" is invalid. You would want height="800" (no px in height attribute). The CSS version should work in many clients, but @John reports that there is not 100% compatibility with it.

By far the best thing to do with e-mails is to not set a height at all though, since it doesn't really work. Let your content flow.

edited Mar 20 '14 at 18:08

answered Mar 20 '14 at 16:55

Brad

159,648
54
349
530

Thanks Brad, I was just using height as an example! – Malka S Mar 20 '14 at 17:06
@WesleyMurch This isn't about being in the stone age, it's about compatibility. IE 3.0 doesn't know how to handle a non-numeric height attribute. You need to just use a numeric value for that attribute if you go that route. – Brad Mar 20 '14 at 17:12
@Brad `height="800"` works 100% in all clients when applied to table/td elements, it is only `height:800px;` that doesn't work consistently. You should update the answer as it is not technically correct. – John Mar 20 '14 at 17:44
@John Interesting... It's been awhile since I've done an e-mail template. Do you know what clients had trouble with CSS height? I don't recall seeing any issues in Litmus, but I suppose it may have changed since then. – Brad Mar 20 '14 at 17:54
@Brad Not sure, I haven't checked recently as I remember it to be spotty and `height=""` is an easy alternative. My guess would be one of the Outlooks. I could be wrong on that - I'll have to check. I guess what I'm trying to say is that `height=""` is a 100% supported solution vs your comment about height in general not working. – John Mar 20 '14 at 18:02
@John Thanks. The answer has been edited with the information you have provided. – Brad Mar 20 '14 at 18:09

Petar Vasilev · Answer 2 · 2014-03-20T17:19:10.123

1

You can use both nowadays. However, if you want to be bullet proof use height="800" which works better for some older clients

edited Mar 20 '14 at 17:19

answered Mar 20 '14 at 16:55

Petar Vasilev

4,281
5
40
74

do you mean height="800" or the CSS? – Malka S Mar 20 '14 at 17:10
1

@MahaliaSamuels:height="800" – Sajad Karuthedath Mar 20 '14 at 17:15
1

Yes, definitely meant height="800" – Petar Vasilev Mar 20 '14 at 17:19

score 0 · Answer 3 · edited Mar 20 '14 at 16:56

0

the first one

<table height="800"></table>

edited Mar 20 '14 at 16:56

Adriano Repetti

65,416
20
137
208

answered Mar 20 '14 at 16:56

Sajad Karuthedath

14,987
4
32
49

@Brad just was in a hurry – Sajad Karuthedath Mar 20 '14 at 16:57
1

Thank you. Could you please explain why? – Malka S Mar 20 '14 at 17:11
@MahaliaSamuels: check these answers -- http://stackoverflow.com/questions/18870705/setting-tr-and-td-width-and-height-for-email-and-browser – Sajad Karuthedath Mar 20 '14 at 17:14
@MahaliaSamuels:http://stackoverflow.com/questions/20989897/image-style-height-and-width-not-taken-in-outlook-mails – Sajad Karuthedath Mar 20 '14 at 17:14

John · Answer 4 · 2014-03-20T17:47:34.263

height="800" works in all clients and is the way you should do it. height:800px; does not.

Same for background, the 100% supported method is bgcolor="#000000", but only in <table> or <td> elements.

You should always use the top examples if you expect to get consistency across email clients.

This rule also applies to align="left" (correct) vs text-align:left; or float:left;, and valign="top" also works where vertical-align:top; is useless.

Best inline style format for HTML email?

4 Answers4