Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Image style height and width not taken in outlook mails

I have a following dom structure in html content I am sending as email.

<a href="http://content.mindmatrix.net/email/814xjqjmpj5r/b59tqx7tzz2x7"  target="_new"> <span style='text-decoration:none;text-underline:none'> <img border=0 id="_x0000_i1026"  src="http://dev.mindmatrix.net/page/e7c9cf53-bae8-4024-a561-355f950cb26b/635246986810000000/original.jpeg?userid=cozmwz91irkm1"  style='border-bottom-color:black;border-bottom-style:solid;border-bottom-width:  1px;border-left-color:black;border-left-style:solid;border-left-width:1px;  border-right-color:black;border-right-style:solid;border-right-width:1px;  border-top-color:black;border-top-style:solid;border-top-width:1px;  height:150px;width:120px'> </span></a> 

I am giving style height:150px;width:120px to image for making it of size thumbnail. Actual height and width of this image is very large. Problem is, this style is not taken when mail goes in outlook inbox. So my questions are -

1)How can i make the css work for setting height and width.

2) Image appears blur in Windown live mail. I am not sure whether it will persist in outlook when i will succeed in fixing style of height and width. so how can i fix this

like image 608
Milind Anantwar Avatar asked Jan 08 '14 07:01

Milind Anantwar


People also ask

Does Outlook recognize CSS?

Outlook doesn't support these CSS properties, so we use MSO tags to create “ghost tables” that apply a fixed width just for Outlook. Outlook can't render the CSS in this DIV but other email clients can, so we wrap this in a ghost table that replicates the DIV's desktop style.

Why does my HTML email look different in Outlook?

Outlook versions use the Microsoft Word engine to render HTML emails. Email service providers such as Outlook interpret HTML code in different ways which can cause your email to look different in Outlook than what it looks like in your email marketing platform.


1 Answers

Put the width and height in separate attributes, with no unit:

<img style="margin: 0; border: 0; padding: 0; display: block;" src="images/img.jpg" width="120" height="150"> 

Another Option:

<!--[if gte mso 9]> <style type="text/css"> img.header { width: 600px; } /* or something like that */ </style> <![endif]--> 
like image 200
Anup Avatar answered Oct 01 '22 11:10

Anup