Hey,

I have a problem with this template when it is rendered in Outlook 2016.

I have looked it up, and me and my colleague has the same edition of both Outlook and Word.
But when this code is shown in my Outlook it looks like in the browser - even heights for the side by side blocks, and even widths all the way down. The hero is more narrow than the rest. When showed on my colleagues it has wrong height on the text tile on the side by side blocks, wrong width on the hero compared to the side by side and blocks with width 100%.

I both hope for an explanation on, why the width and height acts different on two computeres with the same versions of Outlook (and Word - should be used as rendering engnine?) and both running 32 bit. And then of course I hope someone can tell me what to do to fix it.

Thank you.

Mikkel

ILLUSTRATIONS:

https://pasteboard.co/I084q0O.png
https://pasteboard.co/I084Gb6.png
https://pasteboard.co/I084Pxj.png

CODE:

<html>

<head>
<link href="https://fonts.googleapis.com/css?family=Lato:400,700" rel="stylesheet">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="format-detection" content="telephone=no">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="agavailability" content="email">
<meta name="x-apple-disable-message-reformatting">
<title>Master Template</title>
<style type="text/css" agactive="runtime">
/* Reset */
body {
height: 100% !important;
margin: 0;
padding: 0;
}

body,
table,
td,
th,
a {
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}

table {
border-collapse: collapse !important;
border-spacing: 0;
}

td,
th {
border-collapse: collapse !important;
}

table,
td,
th {
mso-table-lspace: 0pt;
mso-table-rspace: 0pt;
}

img {
border: 0;
line-height: 100%;
outline: none;
text-decoration: none;
-ms-interpolation-mode: bicubic;
}

button {
margin: 0 !important;
padding: 0 !important;
display: block !important;
}

a[x-apple-data-detectors] {
color: inherit !important;
text-decoration: none !important;
font-size: inherit !important;
font-family: inherit !important;
font-weight: inherit !important;
line-height: inherit !important;
}

#outlook a {
padding: 0;
}

.ExternalClass {
width: 100%;
}

.ExternalClass,
.ExternalClass p,
.ExternalClass span,
.ExternalClass font,
.ExternalClass td,
.ExternalClass div {
line-height: 100%;
}

span.MsoHyperlink {
mso-style-priority: 99;
color: inherit;
}

span.MsoHyperlinkFollowed {
mso-style-priority: 99;
color: inherit;
}

u+#body a {
color: inherit;
text-decoration: none;
font-size: inherit;
font-family: inherit;
font-weight: inherit;
line-height: inherit;
}

[style*="Lato"] {
font-family: 'Lato', Calibri, sans-serif !important
}

th {
font-weight: normal;
padding: 0;
}

ul {
color: #000000;
margin: 0;
padding-left: 20px;
}

li {
text-align: -webkit-match-parent;
display: list-item;
}
</style>
<style>
v:* {
behavior: url(#default#VML);
display: inline-block;
}

.main-table {
padding: 0;
Margin: 0;
max-width: 530px;
}

.footer-table {
border: 0;
padding-top: 5px;
padding-bottom: 5px;
color: #fff;
}

.footer-table td {
padding: 0;
Margin: 0;
vertical-align: middle;
}

.footer-table a {
color: #ffffff;
}

/* Media queries need !important, or they can (and will) be ignored due to inlining */
@media screen and (max-width: 500px) {
.mobileCollapse {
height: auto !important;
padding: 25px 15px !important;
}

.mobileLogo {
width: 150px !important;
padding-bottom: 5px !important;
}

.narrowPadding {
padding-left: 25px !important;
padding-right: 25px !important;
}

.mobileHeaderLarge {
font-size: 40px !important;
}
}
</style>
<!-- What it does: Makes background images in 72ppi Outlook render at correct size. -->
<!--[if (gte mso 9)|(IE)]>
<xml>
<o:OfficeDocumentSettings>
<o:AllowPNG/>
<o:PixelsPerInch>96/o:PixelsPerInch
/o:OfficeDocumentSettings
</xml>
<![endif]-->
</head>

<body bgcolor="#eeeeee">
<table align="center" border="0" cellpadding="0" cellspacing="0">
<tr>
<td style="background-color: #ffffff;" bgcolor="#ffffff" height="100%" valign="top" width="100%">
<table agblockgroup="on" agid="egdefault_group_1" align="center" border="0" cellpadding="0" cellspacing="0"
width="100%" style="max-width:630px;">

<!-- HEADER : BEGIN -->
<tr agrepeatingblock="on" agid="egdefault_group_1_block_1">
<td style="max-width:630px" width="630">
<!--[if (gte mso 9)|(IE)]>
<table border="0" cellpadding="0" cellspacing="0" width="630" style="width: 630px;">
<tr>
<td>
<![endif]-->
<table bgcolor="#c4122f" width="100%">
<tr>
<td style="padding-top: 25px">
<table align="left" border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td ageditable="*" agid="egdefault_group_1_block_1_field_1" height="25"
width="315" align="left" valign="top" style="font-family: 'Lato', Calibri, sans-serif;font-size:8px;line-height:8px;color:#ffffff;font-weight:400; text-align: left">
Her kommer preheaderen til at stå! Husk at skifte farven til
samme tone som
baggrunden. Farvekoden er #C4122F.
</td>
<td aglanguage="English" height="25" width="290" align="left" valign="top"
style="padding:10px 0px 0px; text-align: right">
<a href="webcopy://show?evt=Webcopy" style="font-family: 'Lato', Calibri, sans-serif;font-size:12px;line-height:14px;color:#ffffff;font-weight:400;">Read
the newsletter in your browser
</a>
</td>
<td width="25"></td>
</tr>
<tr>
<td ageditable="image" agid="egdefault_group_1_block_1_field_3" height="50"
width="315" align="left" valign="middle" style="padding-left: 25px">
<img src="http://placehold.it/220x50" alt="" title="" border="0"
style="display:block;" width="220" class="mobileLogo">
</td>
<td ageditable="*" agid="egdefault_group_1_block_1_field_4" height="50"
width="290" align="right" valign="bottom" style="padding:10px 0px 20px;font-family: 'Lato', Calibri, sans-serif;font-size:12px;line-height:16px;color:#ffffff;font-weight:400; text-align: right">
<persondata>DAY_OF_MONTH</persondata>

<persondata>MONTH</persondata>
 
<persondata>YEAR</persondata>
</td>
<td width="25"></td>
</tr>
</table>
</td>
</tr>
</table>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
<!-- HEADER : END -->

<!-- BLOCK START - NAV BAR BLUE -->
<tr agrepeatingblock="on" agid="egdefault_group_1_block_2">
<td dir="ltr" align="right" style="font-size: 0px; vertical-align: top;" width="630">
<!--[if (gte mso 9)|(IE)]>
<table border="0" cellpadding="0" cellspacing="0" width="630" style="width: 630px;">
<tr>
<td>
<![endif]-->
<table bgcolor="#082a36" border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td align="right">
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td height="30" width="auto">
<a href="" style="font-family: 'Lato', Calibri, sans-serif; color: #FFFFFF; font-size: 14px; text-decoration: none;">
Club Universe
</a>
</td>
<td width="25"></td>
<td height="30" width="auto" align="center">
<a href="https://www.universe.dk/booking" style="font-family: 'Lato', Calibri, sans-serif; color: #FFFFFF; font-size: 14px; text-decoration: none;">
Book
</a>
</td>
<td width="25"></td>
<td height="30" width="auto" align="center">
<a aglanguage="English" href="https://www.universe.com/schedule"
style="font-family: 'Lato', Calibri, sans-serif; color: #FFFFFF; font-size: 14px; text-decoration: none;">
Other
</a>
</td>
<td width="20"></td>
</tr>
</table>
</td>
</tr>
</table>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
<!-- BLOCK END - NAV BAR BLUE -->

<!-- BANNER -->
<tr agrepeatingblock="on" agid="egdefault_group_1_block_3">
<td ageditable="image" agid="egdefault_group_1_block_3_field_1" width="630">
<img src="http://placehold.it/630x245" alt="" title="" width="100%" height="auto" border="0"
style="display:block;">
</td>
</tr>

<!-- HERO : BEGIN -->
<tr agrepeatingblock="on" agid="egdefault_group_1_block_34">
<td>
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td background="http://placehold.it/630x400" align="center" valign="top" style=" text-align: center; background-position: center center !important; background-size: cover !important;"
height="400">
<!--[if (gte mso 9)|(IE)]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" width="630" height="400" style="width:630px; height:400px; background-position: center center !important;">
<v:fill type="frame" src="http://placehold.it/630x400" color="#222222" />
<v:textbox inset="0,0,0,0">
<![endif]-->

<!--[if (gte mso 9)|(IE)]>
<table role="presentation" border="0" cellspacing="0" cellpadding="0" align="center" width="630" height="400">
<tr>
<td align="center" valign="middle" width="550" style="padding-bottom:25px">
<![endif]-->
<table role="presentation" border="0" cellpadding="0" cellspacing="0" align="center"
width="100%" style="max-width:550px; margin: auto;" height="400">
<tr>
<td valign="top" align="center" style="padding-top:20px;">
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td valign="top" style="text-align: center; padding: 0px 0 10px 20px;">
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td align="center" valign="bottom">
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td style="text-align: center; padding: 60px 0 50px 20px;">
</td>
</tr>
<tr>
<td align="center" style="text-align: center; padding: 15px 0px 15px 0px;">
</td>
</tr>
<tr>
<td ageditable="*" agid="egdefault_group_1_block_4_field_1"
class="mobileHeaderLarge" style="padding: 0px 20px 60px; font-family: 'Lato', sans-serif; font-size: 48px; line-height: 52px; color: #ffffff; font-weight: bold; text-align:center">
Vi glæder os til at<br> byde dig velkommen
</td>
</tr>
</table>
</td>
</tr>
</table>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
<!--[if (gte mso 9)|(IE)]>
/v:textbox
/v:rect
<![endif]-->
</td>
</tr>
</table>
</td>
</tr>
<!-- HERO : END -->

<!-- BLOCK START BLUE S -->
<tr agrepeatingblock="on" agid="egdefault_group_1_block_9">
<td bgcolor="#eeeeee" dir="rtl" align="center" style="font-size: 0px; vertical-align: top; max-width:630px;">
<!--[if (gte mso 9)|(IE)]>
<table border="0" cellpadding="0" cellspacing="0" width="630" style="width: 630px;">
<tr>
<td valign="top" width="315" height="315" style="width: 315px; height: 315px" align="left">
<![endif]-->
<div dir="ltr" style="display: inline-block; vertical-align: top;">
<table height="315px" align="left" border="0" cellpadding="0" cellspacing="0" width="100%"
style="max-width:315px;">
<tr>
<td ageditable="image" agid="egdefault_group_1_block_9_field_1" align="center"
valign="bottom" width="315"><img src="http://placehold.it/315x315" width="315"
style="display: block; border: 0px;">
</td>
</tr>
</table>
</div>
<!--[if (gte mso 9)|(IE)]>
</td>
<td valign="top" width="315" height="315" style="width: 315px; height: 315px" align="left">
<![endif]-->
<div dir="ltr" style="display: inline-block; vertical-align: top;">
<table align="left" border="0" bgcolor="#082a36" cellpadding="0" cellspacing="0" width="100%"
style="max-width:315px;">
<tr>
<td width="315" height="315" bgcolor="#082a36" align="left" style="padding: 0 25px"
class="mobileCollapse">
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td ageditable="*" agid="egdefault_group_1_block_9_field_2" style="padding-bottom: 25px; font-family: 'Lato', Calibri, sans-serif;font-size:20px;line-height:24px;color:#ffffff;font-weight:bold;">
Text | Picture
</td>
</tr>
<tr>
<td ageditable="*" agid="egdefault_group_1_block_9_field_3" style="padding-bottom: 25px; font-family: 'Lato', Calibri, sans-serif;font-size:14px;line-height:18px;color:#ffffff;font-weight:400;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Pellentesque vel ligula
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
<!-- BLOCK SEPERATOR -->
<tr agrepeatingblock="on" agid="egdefault_group_1_block_10">
<td bgcolor="#eeeeee" dir="ltr" align="center" style="font-size: 0px; vertical-align: top; max-width:630px;">
<!--[if (gte mso 9)|(IE)]>
<table border="0" cellpadding="0" cellspacing="0" width="630" style="width: 630px;">
<tr>
<td valign="top" width="315" height="315" style="width: 315px; height: 315px" align="left">
<![endif]-->
<div dir="ltr" style="display: inline-block; vertical-align: top;">
<table height="315" align="left" border="0" cellpadding="0" cellspacing="0" width="100%"
style="max-width:315px;">
<tr>
<td ageditable="image" width="315" agid="egdefault_group_1_block_10_field_1"
align="center" valign="bottom"><img src="http://placehold.it/315x315" width="315"
style="display: block; border: 0px;">
</td>
</tr>
</table>
</div>
<!--[if (gte mso 9)|(IE)]>
</td>
<td valign="top" width="315" height="315" style="width: 315px; height: 315px" align="left">
<![endif]-->
<div dir="ltr" style="display: inline-block; vertical-align: top;">
<table align="left" bgcolor="#082a36" border="0" cellpadding="0" cellspacing="0" width="100%"
style="max-width:315px;">
<tr>
<td width="315" height="315" bgcolor="#082a36" align="left" style="padding: 0 25px"
class="mobileCollapse">
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td ageditable="*" agid="egdefault_group_1_block_10_field_2" style="padding-bottom: 25px; font-family: 'Lato', Calibri, sans-serif;font-size:20px;line-height:24px;color:#ffffff;font-weight:bold;">
Picture | Text
</td>
</tr>
<tr>
<td ageditable="*" agid="egdefault_group_1_block_10_field_3" style="padding-bottom: 25px; font-family: 'Lato', Calibri, sans-serif;font-size:14px;line-height:18px;color:#ffffff;font-weight:400;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Pellentesque vel ligula
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
<!-- BLOCK END BLUE S -->

<!-- FOOTER : BEGIN -->
<tr agrepeatingblock="on" agid="egdefault_group_1_block_23">
<td style="max-width:630px" width="630">
<table border="0" cellpadding="0" cellspacing="0" bgcolor="#c4122f" width="100%">
<tr>
<td style="padding-top: 25px">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td width="20%"></td>
<td>
<a href="#">
<center><img src="http://placehold.it/45x45" width="45"></center>
</a>
</td>
<td>
<a href="#">
<center><img src="http://placehold.it/45x45" width="45"></center>
</a>
</td>
<td>
<a href="#">
<center><img src="http://placehold.it/45x45" width="45"></center>
</a>
</td>
<td width="20%"></td>
</tr>
<tr aglanguage="English">
<td width="20%"></td>
<td>
<a style="
font-family: 'Lato', Calibri, sans-serif;font-size:12px;line-height:14px;color:#ffffff;font-weight:400;"
href="#">
<center>facebook</center>
</a>
</td>
<td>
<a style="
font-family: 'Lato', Calibri, sans-serif;font-size:12px;line-height:14px;color:#ffffff;font-weight:400;"
href="#">
<center>Your profile</center>
</a>
</td>
<td>
<a style="
font-family: 'Lato', Calibri, sans-serif;font-size:12px;line-height:14px;color:#ffffff;font-weight:400;"
href="#">
<center>Contact</center>
</a>
</td>
<td width="20%"></td>
</tr>
</table>
</td>
</tr>
</table>
<table border="0" cellpadding="0" cellspacing="0" width="100%" bgcolor="#c4122f">
<tr>
<td height="5"></td>
</tr>
<tr>
<td style="padding: 0px 75px" width="470" class="narrowPadding">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr aglanguage="Danish">
<td style="
font-family: 'Lato', Calibri, sans-serif;font-size:11px;line-height:15px;color:#ffffff;font-weight:400;
text-align: center; padding-bottom: 10px">
Du modtager denne e-mail, fordi du er medlem af Company's
kundeklub,
Club
Universe.<br>
Vi behandler naturligvis dine brugeroplysninger fortroligt.
</td>
</tr>
</table>
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr aglanguage="Danish">
<td width="100%" style="text-align: center">
<a href="" style="font-family: 'Lato', Calibri, sans-serif; font-size:10px;line-height:16px;color: white">Afmeld
e-mails
fra
Club Universe</a>
</td>
</tr>

</table>
</td>
</tr>
</table>
<table border="0" cellpadding="0" cellspacing="0" bgcolor="#c4122f" width="100%">
<tr>
<td align="center" style="padding: 0px 75px 15px 60px" class="narrowPadding">
<table border="0" cellpadding="0" cellspacing="0" width="100%" height="25">
<tr>
<td valign="bottom" width="50%" style="
font-family: 'Lato', Calibri, sans-serif;font-size:10px;line-height:14px;color:#ffffff;font-weight:400; text-decoration: none; text-align: left">
<img src="http://placehold.it/200x40" width="200">
</td>
<td valign="bottom" width="50%" style="
font-family: 'Lato', Calibri, sans-serif;font-size:10px;line-height:14px;color:#ffffff;font-weight:400; text-decoration: none; text-align: right; padding-bottom: 10px">

Company,
<br>

Zip Code and City
<br>


Copyright 2019
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<!-- FOOTER : END -->
</table>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
</table>
</body>

</html>