We are currently facing an issue with the rendering of a mail element in Outlook 2016. While it displays correctly in Outlook 2013 and other email clients, as well as in browser previews, we are stumped on how to resolve this particular problem for Outlook 2016.
The layout concept for this element involves a centered white background box with a width of 600px that should contain the content. The first element within this "content box" is meant to be a white text inside a black box positioned in the top left corner. The width of the black background box should ideally match the length of the text (which typically consists of just a few words in a single line).
Despite all other email clients adjusting the size of the black background box based on the text string, Outlook 2016 consistently displays this box at around three-quarters of the element's width (600px), even when the text is just one letter.
Below is a snippet of the code we are using:
<!--[if (gte mso 9)|(IE)]>
<table align="center" border="0" cellspacing="0" cellpadding="0" width="600" bgcolor="#FFFFFF">
<tr>
<td align="center" valign="top" width="600">
<![endif]-->
<table border="0" cellpadding="0" cellspacing="0" width="100%" bgcolor="#FFFFFF" style="max-width:600px;">
<tr>
<td>
<table border="0" cellspacing="0" cellpadding="0" style="max-width: 600px;">
<tbody>
<tr>
<td bgcolor="#000000" align="left" style="width: 0px; font-family: 'Helvetica', Arial, sans-serif; color:#FFFFFF; font-weight: 500; font-size: 14px; text-transform: uppercase; padding: 5px 10px;">Boxcontent</td>
</tr>
</tbody>
</table>
</td>
</tr>
</table>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
You may notice that some styling tags are repeated within the code. Although we apply this code in various other contexts without encountering any rendering issues, pinpointing the exact cause for the resizing of the black background box specifically in Outlook 2016 has been challenging.
Any insights or suggestions you can provide would be greatly appreciated!
Sincerely,
Joerg