When I insert the HTML file into outlook and then view it, it looks all stretched vertically, but when viewing it on the browser it looks perfect.
When I view the email signature in the outlook "Signatures and Stationary" window it also looks right but when inserting it into the body of the email message it gets stretched.
Taken all the height property out of HTML code.
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Wagma E-Signature</title>
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Raleway:100,200,400,500,600,700,800,900" />
<style type="text/css">
/* Client-Specific styles */
#outlook a { padding:0; } /* Force Outlook to provide a "view in browser" menu link. */
body { width:100% !important; -webkit-text-size-adjust:100%; -ms-text-size-adjust:100%; margin:0; padding:0; border:0; }
/* Prevent Webkit and Windows Mobile platforms from changing default font sizes, while not breaking desktop design. */
.ExternalClass { width:100%; } /* Force Hotmail to display emails at full width */
.ExternalClass,
.ExternalClass p,
.ExternalClass span,
.ExternalClass font,
.ExternalClass td,
.ExternalClass div { line-height:100%; } /* Force Hotmail to display normal line spacing.*/
img { outline:none; text-decoration:none;border:none; -ms-interpolation-mode:bicubic; }
a img { border:none; text-decoration:none;border:none; -ms-interpolation-mode:bicubic; }
p { margin:0px 0px !important; }
table { border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt; }
table td { border-collapse:collapse; }
/* iPad Styles */
@media only screen and (max-width: 640px) {
a[href^="tel"], a[href^="sms"] {
text-decoration:none;
color:#000000;
pointer-events:none;
cursor:default;
}
.mobile_link a[href^="tel"], .mobile_link a[href^="sms"] {
text-decoration:default;
color:#000000 !important;
pointer-events:auto;
cursor:default;
}
}
/* iPhone Styles */
@media only screen and (max-width: 480px) {
a[href^="tel"], a[href^="sms"] {
text-decoration:none;
color:#000000;
pointer-events:none;
cursor:default;
}
.mobile_link a[href^="tel"], .mobile_link a[href^="sms"] {
text-decoration:default;
color:#000000 !important;
pointer-events:auto;
cursor:default;
}
}
/* Responsive styles */
@media only screen and (max-width: 480px) {
td[class=wrapper] {
padding-top:0 !important;
padding-left:0 !important;
padding-right:0 !important;
}
table[class=mobile-view], td[class=mobile-view], img[class=mobile-view] {
width:320px !important;
height:auto !important;
}
td[class=clump] {
display:block !important;
padding-left:0 !important;
padding-right:0 !important;
width:100% !important;
}
td[class=aligncenter] {
width:300px !important;
height:auto !important;
text-align:center !important;
}
}
</style>
</head>
<body>
<table width="490" border="0" cellspacing="0" cellpadding="0" class="mobile-view" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;">
<tbody>
<tr>
<td>
<table width="490" border="0" cellspacing="0" cellpadding="0" class="mobile-view" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;">
<tbody>
<tr>
<td width="130" align="left" valign="top" class="clump" style="padding:0 0 10px 0; background:#eff1f6;">
<!-- Add your Avatar -->
<img src="image/LOGO-WAGMA 320 X 320.png" alt="Avatar" border="0" width="120" style="padding:10px 0 0 10px; display:block; border:0; outline:none;" />
</td>
<td width="360" align="left" valign="top" class="clump" style="padding:10px 0 0 0; background:#eff1f6;">
<table width="100%" border="0" cellspacing="0" cellpadding="0" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;">
<tbody>
<tr>
<td style="padding:0 10px 0 15px;" align="left">
<table width="100%" border="0" cellspacing="0" cellpadding="0" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;">
<tr>
<!-- Edit your Name or Title -->
<td style="font-family:'Raleway', sans-serif, Arial; font-size:18px; line-height:24px; font-weight:900; color:#2f3542; padding:10px 0 0 0;">Andrew Magombedze</td>
</tr>
<tr>
<!-- Edit your job title or subtitle -->
<td style="font-family:'Raleway', sans-serif, Arial; font-size:12px; line-height:18px; font-weight:500; color:#6e7482; padding:0 0 10px 0;">SHEQ Consultant</td>
</tr>
<!-- Edit your job title or subtitle -->
<tr>
<td style="font-family:'Raleway', sans-serif, Arial; font-size:10px; line-height:12px; font-weight:400; color:#6e7482; padding:0 0 10px 0;">Bsc (Hons) Enviro, SAMTRAC<br>ISO 14001, 18001 Implementation<br>ISO 14001, 18001 Internal Auditor<br>Sacpcmp - CanCHSM</td>
</tr>
<tr>
<!-- Edit your Address -->
<td style="font-family:'Raleway', sans-serif, Arial; font-size:12px; line-height:18px; font-weight:600; color:#2f3542; padding:5px 0 0 0;">Office 192 Woodlands Gardens, 92 Bellairs Drive, Northriding, Randburg</td>
</tr>
<tr>
<!-- Edit your website's URL -->
<td style="font-family:'Raleway', sans-serif, Arial; font-size:16px; line-height:30px; font-weight:800; color:#60d853; padding:0 0 10px 0;"><a href="https://wagma-sheq.co.za" target="_blank" style="text-decoration:none; color:#60d853;">Wagma-SHEQ.co.za</a></td>
</tr>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>
<table width="490" border="0" cellspacing="0" cellpadding="0" class="mobile-view" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;">
<tbody>
<tr>
<td width="63%" style="padding:12px 0 5px 10px; background:#e1e4ed;">
<table width="100%" border="0" cellspacing="0" cellpadding="0" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;">
<tbody>
<tr>
<td width="50%" class="clump">
<table width="100%" border="0" cellspacing="0" cellpadding="0" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;">
<tbody>
<tr>
<td width="25" valign="top"><img src="image/icon_green_phone.png" alt="Phone" border="0" width="22" style="display:block; border:0; outline:none;" /></td>
<!-- Edit your Phone number -->
<td width="" valign="top" align="left" style="font-family:'Raleway', sans-serif, Arial; font-size:12px; line-height:24px; font-weight:600; color:#2f3542;"> +27 78 762 7712</td>
</tr>
</tbody>
</table>
</td>
<td width="50%" class="clump">
<table width="100%" border="0" cellspacing="0" cellpadding="0" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;">
<tbody>
<tr>
<td width="25" valign="top"><img src="image/icon_green_email.png" alt="Email" border="0" width="22" style="display:block; border:0; outline:none;" /></td>
<!-- Edit your Email address -->
<td width="" valign="top" align="left" style="font-family:'Raleway', sans-serif, Arial; font-size:12px; line-height:24px; font-weight:600; color:#2f3542;"><a href="mailto:[email protected]" style="text-decoration:none; color:#2f3542;">[email protected]</a></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</body>
</html>
