htmlcsshtml-email
HTML email, tables and content are cropped/collapsed on themselves(Outlook)
I am working on an HTML email for work. I haven't done this in 10+ years and for the life of me, after reading up and re-learning the "how" of html emails(sorta), I cant figure out why my HTML tables are collapsing in on themselves.
I've checked on different devices and desktop apps and so far so good EXCEPT Outlook.
On outlook, my email shows up squished. it shows up like this
Here is a part of the email. (I removed some stuff because of work privacy stuff but its essentially all there)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<title>TITLE HERE</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<!--[if !mso]><!-->
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<!--<![endif]-->
<style type="text/css">
table td {border: 0px solid #DDDDDD;}
.ReadMsgBody { width: 100%; background-color: #F1F1F1; }
.ExternalClass { width: 100%; background-color: #F1F1F1; }
body { width: 100%; background-color: #f6f6f6; margin: 0; padding: 0; -webkit-font-smoothing: antialiased; font-family: Arial, Times, serif }
*[class*="mobileOn"] { display: none !important; max-height: none !important; }
@-ms-viewport{ width: device-width; }
.smdWidth{width:600px;}
.smdPadding{padding-left:10px; padding-right:10px;}
@media only screen and (max-width: 639px){
.wrapper{ width:100%; padding: 0 !important; }
}
@media only screen and (max-width: 480px){
p{padding:10px;}
.wrapper, .smdWidth{ width:320px; padding: 0 !important; }
.centerClass{ margin:0 auto !important; }
.imgClass{width:100% !important; height:auto;}
.container{ width:300px; padding: 0 !important; }
.mobile{ width:300px; display:block; padding: 0 !important; text-align:center; }
.mobile50{ width:300px; padding: 0 !important; text-align:center; }
*[class="mobileOff"] { width: 0px !important; display: none !important; }
*[class*="mobileOn"] { display: block !important; max-height: none !important; }
table, td{width:320px !important; text-align:center !important; margin:0px auto;}
}
</style>
<!--[if gte mso 15]>
<style type="text/css">
table { font-size:1px; line-height:0; mso-margin-top-alt:1px;mso-line-height-rule: exactly; }
* { mso-line-height-rule: exactly; }
</style>
<![endif]-->
</head>
<body marginwidth="0" marginheight="0" leftmargin="0" topmargin="0" yahoo="fix" style="background-color:#F2F2F2; font-family:Arial,serif;margin:0;padding:0;min-width: 100%; -webkit-text-size-adjust:none;-ms-text-size-adjust:none;">
<!-- Start Background -->
<table width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td width="100%" valign="top" align="center">
<!-- Start Wrapper -->
<table width="600" cellpadding="0" cellspacing="0" border="0" class="wrapper smdWidth" bgcolor="#FFFFFF" align="center">
<tr>
<td align="center">
<!-- Start Container -->
<table width="600" cellpadding="0" cellspacing="0" border="0" class="container smdWidth">
<tr>
<td width="550" class="mobile" style="font-size:12px; line-height:18px;">
<img src="IMAGE SOURCE HERE" alt="">
</td>
<td width="50" class="mobile" style="font-size:12px; line-height:18px;">
<a href="LINK HERE"><img src="IMAGE SOURCE HERE" alt=""></a>
</td>
<td width="50" class="mobile" style="font-size:12px; line-height:18px;">
<a href="LINK HERE"><img src="IMAGE SOURCE HERE" alt=""></a>
</td>
</tr>
</table>
<!-- Start Container -->
</td>
</tr>
</table>
<!-- End Wrapper -->
<!-- Start Wrapper -->
<table width="600" cellpadding="0" cellspacing="0" border="0" class="wrapper smdWidth" bgcolor="#FFFFFF" align="center" >
<tr>
<td align="center">
<!-- Start Container -->
<table width="600" cellpadding="0" cellspacing="0" border="0" class="container smdWidth">
<tr>
<td width="600" height="199" class="mobile smdWidth" style="font-size:12px; line-height:18px;">
<img style="width:100%; height:199px; display:block;" class="smdBanner" src="IMAGE SOURCE HERE" alt="">
</td>
</tr>
</table>
<!-- Start Container -->
</td>
</tr>
</table>
<!-- End Wrapper -->
</td>
</tr>
</table>
<!-- End Background -->
</body>
</html>
I've tried setting hard heights to the table (TD), I've tried setting heights via css inline, ... nothing.
Solution
I have a feeling its the line height thats causing the issue. I have removed it from your code and its below. Let me know if it worked for you.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<title>TITLE HERE</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<!--[if !mso]><!-->
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<!--<![endif]-->
<style type="text/css">
table td {border: 0px solid #DDDDDD;}
.ReadMsgBody { width: 100%; background-color: #F1F1F1; }
.ExternalClass { width: 100%; background-color: #F1F1F1; }
body { width: 100%; background-color: #f6f6f6; margin: 0; padding: 0; -webkit-font-smoothing: antialiased; font-family: Arial, Times, serif }
*[class*="mobileOn"] { display: none !important; max-height: none !important; }
@-ms-viewport{ width: device-width; }
.smdWidth{width:600px;}
.smdPadding{padding-left:10px; padding-right:10px;}
@media only screen and (max-width: 639px){
.wrapper{ width:100%; padding: 0 !important; }
}
@media only screen and (max-width: 480px){
p{padding:10px;}
.wrapper, .smdWidth{ width:320px; padding: 0 !important; }
.centerClass{ margin:0 auto !important; }
.imgClass{width:100% !important; height:auto;}
.container{ width:300px; padding: 0 !important; }
.mobile{ width:300px; display:block; padding: 0 !important; text-align:center; }
.mobile50{ width:300px; padding: 0 !important; text-align:center; }
*[class="mobileOff"] { width: 0px !important; display: none !important; }
*[class*="mobileOn"] { display: block !important; max-height: none !important; }
table, td{width:320px !important; text-align:center !important; margin:0px auto;}
}
</style>
<!--[if gte mso 15]>
<style type="text/css">
table { font-size:1px; mso-margin-top-alt:1px;mso-line-height-rule: exactly; }
* { mso-line-height-rule: exactly; }
</style>
<![endif]-->
</head>
<body marginwidth="0" marginheight="0" leftmargin="0" topmargin="0" yahoo="fix" style="background-color:#F2F2F2; font-family:Arial,serif;margin:0;padding:0;min-width: 100%; -webkit-text-size-adjust:none;-ms-text-size-adjust:none;">
<!-- Start Background -->
<table width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td width="100%" valign="top" align="center">
<!-- Start Wrapper -->
<table width="600" cellpadding="0" cellspacing="0" border="0" class="wrapper smdWidth" bgcolor="#FFFFFF" align="center">
<tr>
<td align="center">
<!-- Start Container -->
<table width="600" cellpadding="0" cellspacing="0" border="0" class="container smdWidth">
<tr>
<td width="550" class="mobile" style="font-size:12px;">
<img src="IMAGE SOURCE HERE" alt="">
</td>
<td width="50" class="mobile" style="font-size:12px;">
<a href="LINK HERE"><img src="IMAGE SOURCE HERE" alt=""></a>
</td>
<td width="50" class="mobile" style="font-size:12px;">
<a href="LINK HERE"><img src="IMAGE SOURCE HERE" alt=""></a>
</td>
</tr>
</table>
<!-- Start Container -->
</td>
</tr>
</table>
<!-- End Wrapper -->
<!-- Start Wrapper -->
<table width="600" cellpadding="0" cellspacing="0" border="0" class="wrapper smdWidth" bgcolor="#FFFFFF" align="center" >
<tr>
<td align="center">
<!-- Start Container -->
<table width="600" cellpadding="0" cellspacing="0" border="0" class="container smdWidth">
<tr>
<td width="600" height="199" class="mobile smdWidth" style="font-size:12px;">
<img style="width:100%; height:199px; display:block;" class="smdBanner" src="IMAGE SOURCE HERE" alt="">
</td>
</tr>
</table>
<!-- Start Container -->
</td>
</tr>
</table>
<!-- End Wrapper -->
</td>
</tr>
</table>
<!-- End Background -->
</body>
</html>- Setting the background of an input element as a combination of three colors
- jQuery button click not showing/hiding content
- How to style SVG with external CSS?
- How to Make an SVG Image Dynamically Match the Height (1em) and the Baseline of Surrounding Text?
- How can I count and show Unicode Characters when insert onclick to textarea?
- How to find my images in my folders using the picture element in HTML?
- How to Position an Image on Different Sides of a Container Using CSS?
- How remove border around image in css?
- HTML canvas not drawing image
- Show a message if a text is copied successfully(alternative to alert)
- Should I use the .htm or .html file extension? Which one is correct?
- TailwindCSS: SVG icon won't resize properly
- Float CSS attribute causing parent div not to inherit height?
- Save canvas in grayscale
- svg path not drawing for single point on chrome surface
- Any Way to Reduce File Size Using wkhtmltopdf?
- How to load a gzip compressed javascript without a webserver?
- How simulate CTRL+V keystrokes (paste) using C#
- How to get the value of a selected radio button
- Show text outside the div with clip-path
- Flask/Jinja content not centering
- How to create a scalable document element inside a container in HTML
- Custom directive and [ngClass] on same element does not work
- How can mock a component child to test the parent standalone component in Angular
- How to add Font Awesome icon into <input> button?
- I can't set text after modifying the text
- Change / Hack style of Facebook 'Like it' button
- Selector :last-child not working as expected?
- Convert an array of objects into an unordered HTML list with nested list items
- Why does this strange space start appearing at the bottom of the page only on mobile?