CODEWITHSUNDEEP
html-email
gabrjan
gabrjan

Reputation: 3049

Sending an email with html from C# is displaying extra white spaces

I'm trying to send an email with the MailDefinition class from my program. It works fine when I embed some simple html. My code is as follows:

   MailDefinition md = new MailDefinition();
        md.From = "me";
        md.IsBodyHtml = true;
        md.Subject = "Test of MailDefinition";

        string body = System.IO.File.ReadAllText(@"C:\my.html");

        MailMessage msg = md.CreateMailMessage("[email protected]", replacements, body, new System.Web.UI.Control());
        NetworkCredential loginInfo = new NetworkCredential("me.mail", "password");
        SmtpClient smtp = new SmtpClient("smtp.gmail.com", 587);
        smtp.EnableSsl = true;
        smtp.UseDefaultCredentials = false;
        smtp.Credentials = loginInfo;
        smtp.Send(msg);

Like I said, that seems to be working fine. But when I try to send a bit more complex html that looks fine in a browser I get a bit different look. My html:

 <body>
<table cellspacing="0" cellpadding="0" style="width: 640px;">
    <tr>
    <td colspan="3"><img src=srctop.png /></td>
    </tr>
    <tr>
    <td colspan="3"><img src=srcbellowtop.png /></td>
    </tr>
<tr>
    <td><img src=srcleft.png /></td>
    <td valign="top"><p>Lorem ipsum</p>
    </td>
    <td><img align="right" src=srcright.png style="height:675px;"/></td>
</tr>
<tr>
<td colspan=3><img src=srccontinuous.png /></td>
</tr>
<tr>
<td colspan=3><img src=srcfooter.png /></td>
</tr>
</table>
 </body>

The problem is that in this email I get a white space between the top picture and bellowtop picture. Also there is white spaces betwen bellowtop and the left & right picture. Actually there is white spaces between all images :S

Any ideas what is causing that and how to fix it?

links: in gmail http://shrani.si/f/22/OJ/1kNF0emE/ingmail.png in browser http://shrani.si/f/20/Eu/3PrPlUnw/inbrowser.png

excpect element in browser :

table[Attributes Style] {
border-top-width: 0px;
border-right-width: 0px;
border-bottom-width: 0px;
border-left-width: 0px;
border-spacing: 0px;
}
user agent stylesheettable {
white-space: normal;
line-height: normal;
font-weight: normal;
font-size: medium;
font-variant: normal;
font-style: normal;
color: -webkit-text;
text-align: -webkit-auto;
}
user agent stylesheettable {
display: table;
border-collapse: separate;
border-spacing: 2px;
border-color: gray;
}

and in gmail:

element.style {
width: 640px;
}
Matched CSS Rules
table[Attributes Style] {
border-top-width: 0px;
border-right-width: 0px;
border-bottom-width: 0px;
border-left-width: 0px;
border-spacing: 0px;
}
user agent stylesheettable {
display: table;
border-collapse: separate;
border-spacing: 2px;
border-color: gray;
}

Upvotes: 0

Views: 2681

Answers (1)

James
James

Reputation: 82096

As you have clarified the problem is happening in Gmail, the best thing you can do is inspect the HTML/CSS being applied to the email using the relevant developer tools for the various browsers you plan on supporting e.g.

IE - How to use F12 Developer Tools to Debug your Webpages

Chrome - Chrome Developer Tools

Firefox - Firebug

This will allow you to narrow down the problem and determine whether it's your own styling or if it's styling being added by the browser/client.

Update

Looking at your source, it appears the issue is your images are being treated as inline-block by the browser, setting them to display: block should fix this.

Upvotes: 2

Related Questions