0

I'm trying to send a mail with html through C# code but it is not rendering correctly on Gmail. Can some let me know what i'm doing wrong..

 MailMessage msg = new MailMessage();

        msg.From = new MailAddress("no.reply.checkarr@gmail.com");
        msg.To.Add(ReciverMail);
        msg.Subject = title;


        String bodyBuilder = "";

        bodyBuilder += "<div style = \"font - family: Calibri, Arial; background - image: url('https://www.aqeqah.com/wp-content/uploads/pattern-07.jpg'); background - color: transparent; background - position: center center; background - repeat: repeat; background - attachment: fixed; position: fixed; width: 100 %; height: 100 %; left: 0; top: 0; \">";
        bodyBuilder += "    <div style = \"margin: 0 auto; width: 90 %; border: 1px solid grey; text - align: center; background - color: white; border - radius: 5px; margin - top: 5 %; box - shadow: 0 16px 26px 0 rgba(0, 0, 0, 0.2), 0 6px 26px 0 rgba(0, 0, 0, 0.19); \">";
        bodyBuilder += "        <h1 style = \"color: #ff1017;\">Checkarr</h1>";
        bodyBuilder += "        <p style = \"padding - left: 5 %; padding - right: 5 %; \">We are sending this mail to you to inform about important updates for your account</p>";
        bodyBuilder += "        <h2>Account Verification</h2>";
        bodyBuilder += "        <p style = \"padding - left: 5 %; padding - right: 5 %; \">It looks like it's a great time to verify your account. Verified account are subjected to get best out of our services. Either use the following code to verify your account or click the button.</p>";
        bodyBuilder += "        <h3 style=\"color: grey; border: 3px dashed #ff1017; width: 100px; height: 30px;margin:0 auto; padding-top: 10px; border-radius: 5px\">ASDF32</h3>";
        bodyBuilder += "        <p style = \"color: grey\"> OR</p>";
        bodyBuilder += "        <button style=\"background - color: #ff1017;border: none;color: white;padding: 20px;text-align: center;text-decoration: none;display: inline-block;font-size: 16px;margin: 4px 2px;border-radius: 5px;cursor: pointer;\">Verify Account</button>";
        bodyBuilder += "    <p>Stay awesome!</p><br/><br/>";
        bodyBuilder += "    <p style = \"color: grey; font - size: 10px\">This is auto generated mail. Please don't reply</p>";
        bodyBuilder += "    <p style = \"color: grey; font - size: 10px\">Checkarr © - Islamabad, Pakistan </br>www.checkarr.pk</p>";
        bodyBuilder += "    </div>";
        bodyBuilder += "</div>";



        msg.Body = bodyBuilder;
        msg.IsBodyHtml = true;
        SmtpClient client = new SmtpClient();
        client.UseDefaultCredentials = true;
        client.Host = "smtp.gmail.com";
        client.Port = 587;
        client.EnableSsl = true;
        client.DeliveryMethod = SmtpDeliveryMethod.Network;
        client.Credentials = new NetworkCredential("no.reply.checkarr@gmail.com", "/*PASS REMOVED*/");
        client.Timeout = 20000;
        try
        {
            client.Send(msg);
            System.Diagnostics.Debug.WriteLine("Mail has been successfully sent!");
        }
        catch (Exception ex)
        {
            System.Diagnostics.Debug.WriteLine("Exception while sending mail" + ex.Message);
        }
        finally
        {
            msg.Dispose();
        }

How it looks on gmail

outcome

** html view from browser-- how it should be **

enter image description here

Nouman Arshad
  • 101
  • 1
  • 2
  • 10
  • some good tips here https://stackoverflow.com/questions/17602400/html-email-in-gmail-css-style-attribute-removed – mjw Jul 16 '18 at 20:53
  • check this [https://developers.google.com/gmail/design/css](https://developers.google.com/gmail/design/css) maybe it is useful in your case – piraces Jul 16 '18 at 20:55

2 Answers2

0

There was some formatting issue in the bodyBuilder string. E.g "font - family" i changed them to like "font-family" and it resolved issue. I think i should get sleep :3

Nouman Arshad
  • 101
  • 1
  • 2
  • 10
0

Posting your c# code makes it a lot harder to decipher your issues. Here are a few of your issues:

background-image do not work with all versions of Gmail and do not work with Outlook:

rgba-colors work with Gmail, but not with any version of Outlook.

adding spaces between css values might work in some email clients, but it's not standard. Using this: background - color instead of background-color could also contribute to your issues.

gwally
  • 3,349
  • 2
  • 14
  • 28