Community Forum

Over the years we have built up a community of email marketers, coders and designers that live and breathe email.

Use the Email on Acid Forum like your virtual water cooler: Stop by to discuss email code, quirky clients and fixes and post your issues (with an example of the code) for our community to offer its assistance.

 
   
Outlook.com wrapping image in display:inline-block. Need image to display Inline

josheanes

Newbie
Total Posts:  4
Posted: 28 March 2017 10:36 AM

Hey all! I have a left aligned image which text wraps around. It’s working perfect everywhere but Outlook.com. Apparently this a new bug where Outlook.com wraps all iamges in a div and changes it’s display to inline-block.

This pushes my text beneath my left aligned image.

There is a bit of conversation about this bug here - https://litmus.com/community/discussions/6314-gap-under-images-on-office-365-and-outlook-com , but the fixes are mainly for fixing gaps underneath images.

I tried implementing the fixes from the above conversation but instead of display block, I used display:inline; But no luck. Any ideas? Thank you very much for your time!

<tr>
<td valign=“top” width=“100%” style=“text-align: left; font-family: sans-serif, Arial, Helvetica; font-size: 16px; color: #333333; line-height: 24px; font-weight: 400;” class=“opensans pad20”>

<!—[if mso]>
<table border=“0” cellpadding=“0” cellspacing=“0” width=“160” align=“left” style=“width:180px;”><tr><td style=“padding:0 20px 20px 5px;mso-table-rspace:5pt;border-collapse:collapse;border:1px solid #ffffff;”>
<![endif]—>
images/180x180.png
<!—[if mso]>
</td></tr></table>
<![endif]—>

<multiline label=“headshot with text wrap inner”>

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta, aut eligendi dignissimos, illum eaque ut architecto quisquam! Odio, aliquam eligendi iste tempore beatae, deserunt! Officia temporibus at, debitis excepturi porro mollitia aspernatur labore unde dolores quae blanditiis dignissimos error aut iure magnam sed placeat impedit incidunt praesentium natus dolorum. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque, expedita deserunt omnis, sunt quo itaque minima consequatur laudantium vitae adipisci, quis dolorem doloribus impedit veritatis minus voluptate nisi saepe vero. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi atque modi dolores cumque consequatur rem provident! Consequuntur facere, fugit hic autem unde molestiae pariatur quos.

</multiline>

</td>
</tr>


 

marjoleinverheij

Avatar
Jr. Member
Total Posts:  31
Posted: 05 April 2017 03:15 AM
[ # 1 ]

I’m also fighting Outlook.com at the moment but with a different problem.

This code works for me for floating images:

<table width=“600” border=“0” cellspacing=“0” cellpadding=“0” class=“content-wrapper-small” align=“center”>
  <tr>
  <td class=“content” align=“left” style=“font-family:Arial; font-size:14px; line-height:18px; color:#000001;”><table width=“290” cellspacing=“0” cellpadding=“0” border=“0” align=“left” class=“full-width”>
      <tr>
      <td class=“full-width-img” style=“mso-table-rspace:6pt;border-collapse:collapse;border-left:1px solid #ffffff;”>http://placehold.it/290x200</td>
      </tr>
    </table>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer consectetur convallis leo nec gravida. Vestibulum scelerisque ultricies lorem id fermentum. adipiscing elit. Integer consectetur. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut abore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Sed do eiusmod tempo incididunt ut labore et dolore magna aliqua. Sed do eiusmod tempor incididunt ut abore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu.</td>
  </tr>
</table>

Hope you can use it to make it work for you smile