Wednesday, March 2, 2011

style="display:block;"

I get so annoyed when I receive newsletters to my gmail account and the images have weird spacing, most of the time completely breaking the layout of the email. It's super easy to solve, but just makes me think that these people aren't testing their newsletters.

The way that I do it, I build out the html, then do a find and replace. I find img src, and replace with
img style="display:block" src, it's really a good idea to just train yourself to do this for every email you build. The two clients that experience issues are hotmail, and gmail.

3 comments:

  1. Hi Email Dude. I appreciate your posts. Thanks for sharing. I've learned to use display:block; to fix image gaps in gmail, but have recently discovered what appears to be the same type of image gap in Outlook 2013. Display:block; is obviously not the solution because I've already incorporated this into my code. Have you encountered this problem and are you aware of a solution for it?

    ReplyDelete
  2. The first thing that comes to mind specifically w/ outlook 2013 is the lack of being able to define space using a simple height attribute. Outlook 2013 ignores this. There's a few different work arounds, the one that I use primarily is instead of a height on a TD for spacing, I'll use a style="padding-bottom:12px;" if there should be 12 px below a td.

    I've also found sometimes where when I'll add padding to a td w/in a column that that will add space to the TD beside it vs only that specific TD. Work around here is to nest a table w/in that TD and then add the padding to the TD w/in the TD in that table. That only adds spacing specific to that table, and leaves the column next to it alone (from a padding perspective).

    Hope this helps, if not, maybe you could send me an example and I'll have a look.

    ReplyDelete
  3. Thanks for the response. I've found another solution you might like to try if you encounter a similar problem:
    for the TD that contains the image, I've added in-line CSS with a line-height that matches the height of the image itself, followed by the mso-line-height-rule attribute.

    Example:

    <td colspan="3" align="left" valign="top" style="line-height:12px;mso-line-height-rule:exactly;"><img src="http://ezines.nurse.com/ezine/nurses/2011RedesignTemplate/bottomMid.gif" alt="" width="327" height="12" border="0" style="display:block;" /></td>

    Can't remember where I found this in all my digging around recently, but if I stumble across the source again, I'll come back and give them the credit they deserve.

    ReplyDelete