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 adding divs around images and the problems my reset causes

marjoleinverheij

Avatar
Jr. Member
Total Posts:  31
Posted: 04 April 2017 08:30 PM

Alright, so we know outlook.com (at least in combination with an hotmail.com address) adds a div (and a button if the image isn’t linked) around images.

That div inherits a font-size of 15px from somewhere in the outlook.com stylesheet:
._rp_o5 {
  font-size: 15px;
}

Which result in a 4px empty space below the image. Which we don’t want, because some images should align against another element.

As a fix I thought I could create the reset:
div { font-size: 0;}

As all text in our code always has font sizes set this wouldn’t be a problem. However, the mail tool we’re working with adds a div around text if you click the alignment option in the editor <div style=“text-align: center;”> </div>.
So suddenly text that is centered disappears because the font-size is set to zero in the stylesheet. As the editor doesn’t add the font-size or line-height to that tag.

Is there anyway to only set the font-size to zero for divs that include an image? I googled but found no solutions.
Or maybe you guys know of a different way to target those specific divs and leave the others alone.


 

marjoleinverheij

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

Can’t delete this post but I got the solution from somewhere else.

Added
div, button {
  display: block !important;
}

as reset seems to do the trick.