Saturday, 15 June 2013

css - Double margin when padding images in HTML email with vspace/hspace -


I'm coding an HTML email (eug!) And because padding / margin / borders are not respected on Outlook images I'm using vsspace and hspace instead. In the question, the image can optionally be removed from the template, so I need the text that is ready to keep its own margin. To achieve this, I have not applied padding in the box, but a margin for H2 and P tags that follow the image.

Although in Outlook 2007 and 2010 I end up with a double margin in Outlook 2013 everything is a fine one.

This is my inline code from Outlook 2010:

  & lt; Td class = "box" width = "50%" style = "border-fall: collapse; margin-top: 0; margin-bottom: 0; margin-right: 0; margin-left: 0; padding-top: 0; Padding-down: 0; padding-right: 0; padding-left: 0; background color: # F8F8F8; vertical-align: top; "& Gt; & Lt; Img src = "http://placehold.it/110x110" width = "110" align = "left" hspace = "10" vspace = "10" style = "outline-style: none; text-decoration: none ; MS-interpolation mode: bicubic, "/ & gt; & Lt; H2 style = "color: # 254485! Important; margin-top: 10px; margin-down: 0; margin-right: 10px; margin-left: 10px; padding-top: 0; padding-down: 0; padding -OK Is: 0; padding-left: 0; font-size: 18px; line-height: general, "& gt; Dialer Bibendum Mallis & lt; / H2 & gt; & Lt; P style = "line-height: general; margin-top: 10px; margin-bottom: 10px; margin-right: 10px; margin-left: 10px;" & Gt; Fuse can be used as dipibes, conveyors and consultants, which can be used for noodles. For any time, you are not aware of either the marriage or the hairdressing new hairstyles for hair loss to break or break, it is not that they can be used easily, nor can they be used as a portraitist , Has been selected for the East Lescenia Audios. Nullam ID id id IDs with colleagues and those working extensively, enough drive to use as AIT. & Lt; / P & gt; & Lt; / TD & gt;  

And as a result, I'm getting Outlook 2007 and 2010:

Note the double margin on the left side of the image, it appears that applies to hspace, but then inheritors of applied margins on H2 and P tag also received Are there. Instead of using verbspace and HSPS, wrap the image in the table and apply padding in the table:

:

  & lt; Table & gt; & Lt; Tr & gt; & Lt; Td square = "box" width = "50%" style = "border-fall: collapse; margin head: 0; margin-bottom: 0; margin-right: 0; margin-left: 0; paddle-top: 10px; Padding-bottom: 10px; padding-right: 10px; padding-left: 10px; background color: # F8F8F8; vertical-align: top; "& Gt; & Lt; Table cell area = "0" cell padding = "0" border = "0" align = "left"> gt; & Lt; Tr & gt; & Lt; Td valign = "top" style = "padding: 0 10px 10px 0" & gt; ; Img src = "http://placehold.it/110x110" width = "110" align = "left" style = "outline-style: none; text-decoration: none; -ms-interpolation-mode: bicubic;" / & Gt; & Lt; / TD & gt; & Lt; / TR & gt; & Lt; / Table & gt; & Lt; H2 style = "color: # 254485! Important; margin-top: 0; margin-bottom: 0; margin-right: 10px; margin-left: 0; padding-top: 0; padding-down: 0; padding right: 0; padding-left: 0; font-size: 18px; line-height: normal; boundary-left: 10px solid # f8f8f8 "& gt; Dialer Bibendum Moulis & lt; / H2 & gt; & Lt; P style = "line-height: general; margin-top: 10px; margin-bottom: 0; margin-right: 10px; margin-left: 0;" & Gt; Fuse can be used as dipibes, conveyors and consultants, which can be used for noodles. For any time, you are not aware of either the marriage or the hairdressing new hairstyles for hair loss to break or break, it is not that they can be used easily, nor can they be used as a portraitist , Has been selected for the East Lescenia Audios. Sapphire ID Delivery ID and LT as ID Elite with those working with colleagues and those who work extensively. / P & gt; & Lt; / Td> & Lt; / Tr & gt; & Lt; / Table & gt;  

No comments:

Post a Comment