2

I am trying to send an email with html content but I am observing displaying issues. The following does not get displayed properly in width by Microsoft Office Outlook, any hint? 

<div style="width: 650px; border: 1px solid blue">hello</div>
matteo
  • 1,635
  • 1
  • 15
  • 26

3 Answers3

3

use tables, and on <td> use width="" propery and also style="width:" ... for some clients are reading the width property and others reads the style property

Gigi Ionel
  • 248
  • 1
  • 10
2

You must reconsider to change the email template to be tables within table and with inline styling here is a sub link to problem which you may encounter
How to align several tables in td in center

Community
  • 1
  • 1
Sirmais
  • 118
  • 13
0

HTML divs and spans don't work particuarly well in office outlook. You are better off using tables for this display. Reference: "...The best way to combat these issues would be to use a table-based layout." https://litmus.com/blog/a-guide-to-rendering-differences-in-microsoft-outlook-clients

Here is some further information taken from another answer:

"- JavaScript - completely off limits. If you try, you'll probably go straight to email hell (a.k.a. spam folder). This means that LESS is also out of bounds, although you can obviously use the resulting CSS styles if you want to. - Inline CSS is much safer to use than any other type of CSS (embedded is possible, linked is a definite no). Media queries are possible, so you can have some kind of responsive design. However, there is a long list of CSS attributes that don't work - essentially, the box model is largely unsupported in email clients. You need to structure everything with tables.

There are loads of answers on SO, and lots of other links on the internet at large.

Reference: Has anyone gotten HTML emails working with Twitter Bootstrap?

Community
  • 1
  • 1
trees_are_great
  • 3,881
  • 3
  • 31
  • 62
  • What won't work? using tables? I have used them before in outlook with success and the articles suggest that it would work. – trees_are_great Dec 12 '14 at 10:40
  • ah right, sure, I wasn't suggesting the use of bootstrap. The top answer to that question gives a lot of information which is useful to HTML in outlook - aka, it is not only relevant to the bootstrap css and javascript libraries, but also to general html, css and javascript – trees_are_great Dec 12 '14 at 10:48
  • it is mostly targeting the Gmail Yahoo HotMail and phone mails on different platforms since the question is related to outlook problem it will only confuse the reader and regarding of result he/she will spend lot of time reading not related info, but it is useful. – Sirmais Dec 12 '14 at 10:53
  • Good point. I have update the answer. Thanks for your feedback. – trees_are_great Dec 12 '14 at 13:59