0

I'm creating a mail, and I put some HTML code within a string (the body of the mail) that will be sent to an AlternativeView (which is set into the MailMessage).

The problem is that within an image I add the style attribute for a margin-bottom, and it doesn't have any effect in the received mail (Gmail).

After inspection of the image object into Gmail, the attribute style seems to has disappeared.

This is the html content (generated by my test application) got in a debug state by a breakpoint before the sending of the mail :

<h2><strong>Ratio :</strong> 80%<br><strong>Total Tests Count :</strong> 5<br /><strong>Total Tests Pass&nbsp;:</strong> 4</h2>
<br>
<hr>
<br>
<h2> <img src='cid:imgUITPR' width="16" height="16"/><strong> UITestPlan </strong > 'AssignHoursProfileToDriver' (TestSuites : 3) : <font color='#FF5252'>Failed</font></h2>
<h3> <img src='cid:imgUITSR' width="16" height="16" style='margin-bottom: -2px;' /><strong > UITestSuite </strong > 'CreateDriver' (Tests : 4) : <font color='#FF5252'>Failed</font></h3>
<h4> <img style='margin-bottom: -3px;' src='cid:imgUITG' width="16" height="16"  /><strong > UITest </strong > 'OpenDriversModule' (Steps : 1) : <font color='#4CAF50'>Pass</font></h4>
<h4> <img style='margin-bottom: -3px;' src='cid:imgUITG' width="16" height="16"  /><strong > UITest </strong > 'ClickOnCreateDriver' (Steps : 1) : <font color='#4CAF50'>Pass</font></h4>
<h4> <img style='margin-bottom: -3px;' src='cid:imgUITG' width="16" height="16"  /><strong > UITest </strong > 'FillNewDriverDetails' (Steps : 4) : <font color='#4CAF50'>Pass</font></h4>
<h4> <img style='margin-bottom: -3px;' src='cid:imgUITR' width="16" height="16"  /><strong > UITest </strong > 'ClickOnValidate' (Steps : 1) : <font color='#FF5252'>Failed</font></h4>
<h3> <img src='cid:imgUITS' width="16" height="16" style='margin-bottom: -2px;' /><strong > UITestSuite </strong > 'CreateHoursProfile' (Tests : 1) : <strong>Ignored</strong></h3>
<h4> <img style='margin-bottom: -3px;' src='cid:imgUIT' width="16" height="16"  /><strong > UITest </strong > 'OpenConfigurationModule' (Steps : 1) : <strong>Ignored</strong></h4>
<h3> <img src='cid:imgUITS' width="16" height="16" style='margin-bottom: -2px;' /><strong > UITestSuite </strong > 'AssignProfileToDriver' (Tests : 0) : <strong>Ignored</strong></h3>

Edit: I used negative margin, Gmail as Outlook and Yahoo doesn't support negative margin.

Syfer
  • 4,262
  • 3
  • 20
  • 37
Sauveur Dominguez
  • 57
  • 1
  • 6
  • Use your browser's F12 Developer Tools to check the styles that were actually applied to your message. Your code can't do anything if GMail removes negative margins or if it applies extra styles that prevent your images from showing properly – Panagiotis Kanavos Feb 18 '19 at 11:17
  • CSS support varies wildly across email clients. _Disclaimer - I work at a company that helps you design and send HTML emails._ – mjwills Feb 18 '19 at 11:40

1 Answers1

0

I have seen in this blog post on point 9 :

Gmail does not allow negative CSS margin values

It seems webmail clients tend to ignore margin completely.

spidyx
  • 1,067
  • 9
  • 16