I am trying to show a logo and a text side by side in an outlook page. I have a picture and logo on an HTML page. When I send the content of the HTML page to the MS outlook, the page looks different. I am not using any flexbox in my HTML code, but outlook translates it differently. I am not sure what style sheet, I can change to make the logo and text same as HTML.
Below is the HTML page:
and below is what the logo and text looks like in the outlook:
The picture displays outside the blue background color and the second text: "This is text2" is black color. Although, I specified in my code that second text is white color.
How can I fix this issue?
Below is my style sheet and HTML code:
HTML
<div class="container">
<table style="background-color: cadetblue; width: 100%;">
<tr>
<td rowspan="3">
<img src="https://placekitten.com/200/300" class="logo" />
</td>
</tr>
<tr>
<td class="name1">This is Text1</td>
</tr>
<tr>
<td class="name2">This is Text2</td>
</tr>
</table>
</div>
CSS
.logo { transform: translateX(2em); }
.name1 { font-size: 25px; color: #e9c46a; }
.name2 { font-size: 25px; color: #ffffff; }
.container { padding-bottom: 40px; }
.container img { width: 50px; height: 50px; }
.small-image img { width: auto; height: 40px; }
.collapse-border table { border-collapse: collapse; border-spacing: 0; }
.font-aligned .name1 { vertical-align: bottom; }
.font-aligned .name2 { vertical-align: top; }
Code
below is the C# code that sends the HTML to outlook
C#
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 will be apprecaited.