CODEWITHSUNDEEP
outlookjakarta-mail
George
George

Reputation: 509

Outlook Ignores Width attribute or css property

I've seen this problem touched on in many questions but none have been specific enough to help me. So I hope it offends no one if I simplify it and ask again. Hope springs eternal!

Is it really IMPOSSIBLE to control the width of an image embeded in an email when Outlook renders it? I.e. control the width of an image for which the html code is 

 <img src="cid:seal">

I.e. when the html code expects an embedded image instead of one stored elsewhere.

[Note: "seal" is the content ID I assigned when creating the MimeBodyPart with the embedded image].

Details: I use a Javamail application to send a multi-part email message. The body part is an html document. Another MimeBodyPart carries the image used in the html doc. I've simplified the html test to nothing more than a two column table with the left column for the image and the right column for text.

And absolutely NOTHING I have tried has been able to control the size of the image when opened in OUTLOOK.

The image is always what I assume must be some native size for the image ... which is too big ... so it forces the first cell to be more than 15% wide. Or if I give the cell a fixed width the image overflows the box, i.e. get's clipped.

I put the basic code stripped of all font styling colors etc. below.

I have tried every combination of using width attributes and css style properties on the img tag. I've wrapped the image in another table ... or wrapped it in a div block inside the main table cell ... and even wrapped it in a div block inside a table cell inside the parent table cell. And I've tried specifying widths in fixed pixels and %'s.

It would really be nice if we all knew for sure if this is simply IMPOSSIBLE with Outlook.

Or if it is possible possible, to publish sample code that works. [It's hugely attractive to have the email open its images immediately, and not rely on the reader downloading them.]

NOTE: I seem able to control width when I load the image from an outside source afterwards, i.e. Thanks for any help. 

<html>
  <head>
    <meta name="viewport" content="width=980, initial-scale=1">
    <title>Test Email</title>
  </head>
  <body style="width:100%; border:0;margin:0;padding:0;">
    <table align="center" 
           style="width:980px; border-collapse:collapse;
                  margin-left:auto; margin-right:auto;">
      <tr  style="border:0; margin:0; padding:0;">
        <td style="width:15%; border:0; margin:0; padding:0;">
          <img src="cid:seal" 
               style="width:6em; height:auto;">
         </td>
         <td    style="width:85%; margin:0; padding:.5em 0em 0em 0em; border:0;">
           Some Titles and stuff
         </td>
       </tr>
  <tr>
    <td colspan="2" style="border:0; margin:0; padding:1em 1em 0em .5em;">
      <p> 1st paragraph
      ....
      <p> last paragraph
    </td>
  </tr>
</table>

Upvotes: 2

Views: 5742

Answers (2)

George
George

Reputation: 509

With help from Eugene above, I discovered at least one good solution. 

<img src="cid:seal" width="300"  or "300px"  of "15%"> DOES NOT WORK.

But when I ditched the quotes this worked

<img src="cid:seal" width=300 height=300>

It does of course mean setting width in % is still a problem since it requires quotes.

But I'll take what I can get. Email now pops open with logo without the user needing to download pictures. AND ... this css body selector also works rendering the background with an embedded image. [I stored the background image with a Content ID of"bkg".]

AGAIN ... unlike the img attribute src="cid:id" that uses quotes, url() requires the id w/o quotes. 

<body style="background-image:url(cid:bkg);
             background-repeat:repeat; 
             width:100%;
             generic-family:Sans-serif;
             font-family:Verdana;
             border:0;margin:1em 0 1em 0;padding:0;">

Upvotes: 4

Eugene Astafiev
Eugene Astafiev

Reputation: 49397

Outlook uses Word as an email editor. The following series of articles provides reference documentation related to supported and unsupported HTML elements, attributes, and cascading style sheets properties:

You can design the page in Word and then save the resulted document as a web page. Thus, you will find the required HTML markup to use.

Upvotes: 0

Related Questions