CODEWITHSUNDEEP
htmlcssemailoutlook
Sergey Kolchinskiy
Sergey Kolchinskiy

Reputation: 83

HTML signature is resizing only some images in Outlook

I made an email signature in HTML that seems to follow most guidelines (tables, inline styles, etc.) and it looks pretty decent on most clients. However, it must look weird on Outlook, bc this is how it was returned to my email client after getting a reply from Outlook:

The logo is perfectly fine, but the social logos got reaaaaally scaled. The, but here's what the code for the images look like:

<td valign="middle" style="padding: 0px 8px 0px 0px; border: 0px; outline: none;">
  <div style="margin: 0px; padding: 0px; border: 0px; outline: none; float: left;">
    <img width="110" height="60" src="https://i.imgur.com/FjK5XfG.png" style="border: none; vertical-align: middle;">
  </div>
</td>

Upvotes: 4

Views: 6942

Answers (2)

Aziz
Aziz

Reputation: 7783

It seems that Outlook (and possibly other applications) ignore the height and width properties when you add the px unit to the value. The spec is not 100% clear on this, however, by default integer values are considered pixels and you can add a % suffix for a percentage value.

According to the spec, the value must be a non-negative integer and does not mention a requirement to add the px suffix:

The width and height attributes on img, iframe, embed, object, video, and, when their type attribute is in the Image Button state, input elements may be specified to give the dimensions of the visual content of the element (the width and height respectively, relative to the nominal direction of the output medium), in CSS pixels. The attributes, if specified, must have values that are valid non-negative integers.

Further reading:

To conclude, the valid code should be:

<img src="url" width="7" height="15">

Upvotes: 3

Fernando Torres
Fernando Torres

Reputation: 470

I was the same problem sending HTML templates to Outlook and Gmail in a responsive mode. There gonna be always problems with this components of CSS and how to Outlook will read your styles. So, at this point, you can save too al your styles at the top of your HTML code and then inherit in your tags. Then, you can visit this page:

http://templates.mailchimp.com/resources/inline-css/

This page was saved me and helped me for this problem, because all your code are gonna be in Iliner mode but too you will have at the same time your styles code in the top of your HTML code for Google. Outlook does'nt read always as a far as I know, styles within HTML tags. Greetings.

Upvotes: 0

Related Questions