CODEWITHSUNDEEP
htmlcssoutlookoffice365html-email
s33b
s33b

Reputation: 19

Outlook 365, windows - why my images are cutting off?

I would like to know why my icons/images are cut off in outlook 365 on windows

 <tr style='mso-yfti-irow:1;height:112px;'>
   <td valign="bottom" style='text-align: center'>
    <table border=0 cellspacing=0 cellpadding=0 width=19 height="112"
           style='height: 112px;mso-element-wrap:none;mso-table-lspace: 0pt; mso-table-rspace: 0pt;' align="center">
     <tr>
      <td width="19" >
       <table border="0" cellpadding="0" cellspacing="0" >
        <tr style="height:22px">
         <td valign="bottom">
           <a href="libk-here" target="_blank" rel="noopener">
            <img border="0" width="19" height="22" src="link-here" alt="LI" style="display: block;" nosend="1" moz-do-not-send="true">
           </a>
         </td>
        </tr>
        <tr style="height:22px">
         <td valign="bottom">
           <a href="libk-here" target="_blank" rel="noopener">
            <img border="0" width="19" height="22" src="link-here" alt="LI" style="display: block;" nosend="1" moz-do-not-send="true">
           </a>
         </td>
        </tr>

image have 3px empty space from top

I try to remove line-height or height/width in parent element

On every element, there is empty space empty space

Upvotes: 1

Views: 449

Answers (1)

Nathan
Nathan

Reputation: 5214

Try line-height and font-size and border on your <a> and/or <td>, i.e. style="line-height:0;font-size:0;border:0;".

Remove all styles on the <tr> and put in the <td>.

For Outlook, it generally favours the attributes (width="111") rather than inline styles (style="xxxxx"). So to target Outlook, use the attributes consistently. But you generally do NOT need to specify overall heights and widths because tables tend to expand to fit content (Outlook, however, is a print-based solution that expects a singular non-responsive layout so I wouldn't say no to this - but think of mobile email clients at the same time).

Reset all tables at once with this code in your <head> (then you can remove it inline):

<!--[if mso]>
  <style type="text/css">
  table {
    border-collapse: collapse;
    mso-table-lspace: 0pt;
    mso-table-rspace: 0pt;
  }
  </style>
<![endif]-->

Upvotes: 1

Related Questions