In my attempt to display a logo and text together in an Outlook page, I encountered an issue. The content from the HTML page appears different when sent to MS Outlook. Despite not using flexbox in my HTML code, Outlook interprets it differently. I am uncertain which stylesheet adjustments I need to make for the logo and text to match those on the HTML page.
Here is the HTML page image: https://i.sstatic.net/Apz5C.png
And here is how the logo and text appear in Outlook: https://i.sstatic.net/8CxUA.png
The picture extends beyond the blue background color, and the second text "This is Text2" appears as black instead of the specified white. How can I resolve this issue? See below for my style sheet and HTML code:
.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;
}
<div class="container">
<table style="background-color: cadetblue;width:100%;">
<tr>
<td rowspan="3" width="100">
<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>Below is the C# code used to send the HTML to Outlook:
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("[email protected]"));
mail.Subject = "test";
using(StreamReader reader = new StreamReader(Server.MapPath("~/EmailTemplate.html")))
{
body = reader.ReadToEnd();
}
mail.Body = body;
client.Send(mail);
Any assistance would be greatly appreciated.