1

I am trying to send an HTML email though C# code. Everything works fine. I can send the email with a logo and icons. The only issue, I am facing is that formatting of the Header is lost when I send the email to Outlook. below is my code:

 <div class="container">
        <div class="logo">
          
            <img src="Images/delete.png" alt="RAC" width="80" height="80" />
           
        </div>
        <div class="names">
      
            <div class="name1">This is City Name</div>
            <div class="name2">This is company Name</div>
        </div>
    </div>

This is the style sheet:

<style>

        .container {
            display: flex;
            align-items: center;
            padding: 10px;
            background-color: #335970;
            width:100%;
        }

        .logo {
            margin-right: 10px;
        
        }

        .names {
            display: flex;
            flex-direction: column;
        }

        .name1 {
            font-size: 25px;
            color: #e9c46a;
           
        }

        .name2 {
            font-size: 25px;
            color: white;
        }
    </style>

This is how the screen looks like on HTML page:

enter image description here

when I send the email to Outlook then the screen looks like this:

enter image description here

Both the company name and city name moves underneath the icon. I tried changing the flex Direction to Row, but that did not fix anything. I also tried outlook zoom setting and it is set to 100%. This is the C# code to send the email:

SmtpClient client = new SmtpClient();

        client.Credentials = new NetworkCredential("test", EmailPass);
        client.Port = 200;
        client.EnableSsl = true;
        client.Host = "smtp.office365.com";
        client.DeliveryMethod = SmtpDeliveryMethod.Network;
        
         MailMessage mail = new MailMessage();
       
        mail.IsBodyHtml = true;
        mail.From = test;

        mail.To.Add(new MailAddress("t@t.com"));
        mail.Subject = "test";
        using(StreamReader reader = new StreamReader(Server.MapPath("~/EmailTemplate.html")))
        {
            body = reader.ReadToEnd();
        }

        mail.Body = body;

        client.Send(mail);

Any help why the formatting of the header is lost in HTML will be highly appreciated. I also tried using table tag like this:

 <table style="background-color: #335970;width:100%;padding:10px">
        <tr>
            <td rowspan="3">
                <img src="Images/delete.png" height="80" width="80" />
            </td>
        </tr>
        <tr>
            <td class="name1">This is City Name</td>
        </tr>
        <tr>
            <td class="name2">This is company Name</td>
        </tr>
    </table>

That way, there is a huge space between image and text. Please see below screen shot:

enter image description here

My question is not related to HTML styling, it is related to outlook. Why I cant see the changes in outlook email. Nathan answered my question.

rimi
  • 624
  • 5
  • 15
  • Outlook is intentionally very primitive in its implementation of CSS. I'm not convinced it understands `display: flex` at all. You should be able to simulate this using `float:left`, however. – Tim Roberts Jul 30 '23 at 06:06
  • Can you show me how can this be done using float:left. Just the CSS part to align the City and comapny name underneath each other – rimi Jul 30 '23 at 06:34
  • I don't understand how you could know about `display: flex` and not know about `float: left`. Did you copy this all from somewhere? Just add `float: left` to the `.logo` block – Tim Roberts Jul 30 '23 at 07:04
  • yes, I am not a CSS person, I got the existing CSS from one of the forums. – rimi Jul 30 '23 at 11:22
  • 1
    Does this answer your question? [Best practices for styling HTML emails](https://stackoverflow.com/questions/4829254/best-practices-for-styling-html-emails) – Tu deschizi eu inchid Jul 30 '23 at 16:07

1 Answers1

0

Outlook uses MS Word to render the emails, not a web standard parser.

Divs, flex, and most of just about everything are not going to work: https://www.caniemail.com/clients/outlook/#windows

You need to use a table layout for this. And inline all your styles - don't use a <style> block.

Nathan
  • 4,358
  • 2
  • 10
  • 26