Getting a ton of white space at the end of my HTML email.
obviously, outlook is the worst? Any help? Attached is the code & a screen shot.
http://danielmdesigns.com/test/Screen%20Shot%202014-12-09%20at%205.59.55%20PM.png
http://codepen.io/dwmaldonado/full/Byjbao
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <meta name="viewport" content="width=device-width, initial-scale=1.0"/> <title>eCommission - Get your Golden Ticket Today!</title> <style type="text/css"></style> <style type="text/css"> /* CLIENT-SPECIFIC STYLES */
#outlook a { padding:0; } .ReadMsgBody { width:100%; } .ExternalClass { width:100%; } .ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div { line-height: 100%; } body, table, td, a {
-webkit-text-size-adjust:100%; -ms-text-size-adjust:100%; } table, td { mso-table-lspace:0pt; mso-table-rspace:0pt; } img {
-ms-interpolation-mode:bicubic; }
/* RESET STYLES */ body { height:100% !important; margin:0; padding:0; width:100% !important; } img { border:0; height:auto; line-height:100%; outline:none; text-decoration:none; } table { border-collapse:collapse !important; }
/* iOS BLUE LINKS */ .apple-link a { color:#999999 !important; text-decoration: none !important; } </style> </head>
<body>
<table border="0" cellpadding="20" cellspacing="0" border-collapse="collapse" width="100%" height="1000" bgcolor="#ededed">
<tr style="page-break-before: always">
<td>
<!-- Header Logo & Image -->
<table border="0" cellpadding="0" cellspacing="0" width="600" align="center" bgcolor="#ffffff">
<tr>
<td colspan="3" height="200">
<img border="0" src="https://echo3.bluehornet.com/cimages/056f203db71e325409aa569351f79757/eCommission_GoldenTicketHeader.png" alt="eCommission - This Golden Ticket gets you your commissions before closing" style="display:block;">
</td>
</tr>
<!-- Content -->
<tr>
<td width="600" style="margin:100px; margin-left:100px; margin-right:100px; padding:10px; font-family:arial; font-size:12px; line-height:22px;">
<p style="margin:30px 30px;">There is nothing better than spending the holidays knowing your business has access to cash at any time. A commission advance from <b>eCommission</b> lets you control when you get paid, by advancing your commissions from pending sales and active listings whenever you want them.</p>
<p style="margin:30px 30px;">Using <b>eCommission</b> is fast, easy, and confidential:
<br>
• Apply on-line in minutes <br>
• Request up to $15,000 <br>
• Receive and sign your documents electronically <br>
• Have your funds wired in 1 business day <br>
• No Credit Check <br> </p>
<p style="margin:30px 30px;"> <b><span style="color:#ff8d06;">*Special Holiday Offer*</span></b> New customers get <b><span style="color:#ff8d06;">50%</span></b> off the advance fee, an average savings of $350!* Code will automatically apply on your first transaction.</p>
<p style="margin:30px 30px;"> Get started today at eCommission.com or call toll free at 877-882-4368.</p>
</td>
</tr>
</table>
<!-- Button -->
<table border="0" cellpadding="0" cellspacing="0" width="600" align="center" bgcolor="#ffffff">
<tr>
<td width="200"></td>
<td align="center" width="200" height="50" bgcolor="#ff8d06" font-color="#ffffff" style="-webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; color: #ffffff; display: block;"><span style="color:#ffffff;">Get Started</span></td>
<td width="200"></td>
</tr>
</table>
<!-- Disclaimer Information -->
<table border="0" cellpadding="0" cellspacing="0" width="600" align="center" bgcolor="#ffffff">
<tr>
<td style="padding:20px 10px 20px 10px; font-family:arial; font-size:9px; line-height:12px; color:#808080;"><i>*Savings of $350 based on a commission advance of $4,000 closing within 40 days. Certain underwriting restrictions apply. Hurry, offer expires December 31, 2014. Copyright 2014 eCommission Financial Services, Inc. 11612 Bee Caves Rd. Bldg. 2, Suite 200, Austin, Texas 78738</i></td>
</tr>
</table>
<!-- Footer Logos -->
<table border="0" cellpadding="0" cellspacing="0" width="600" align="center" bgcolor="#ffffff">
<tr>
<td width="2%"></td>
<td width="25%"><img border="0" src="https://echo3.bluehornet.com/cimages/056f203db71e325409aa569351f79757/logo_bbb.gif" alt="BBB A+ Acredited Business" style="display:block;"></td>
<td width="25%"><img border="0" src="https://echo3.bluehornet.com/cimages/056f203db71e325409aa569351f79757/logo_verify.png" alt="Verified & Secured, Verify Security" style="display:block;"></td>
<td width="48%"></td>
</tr>
</table>
</td>
</tr>
</table>
</body> </html>
Any help is greatly appreciated!
After much research, I found that the issue was actually because of the email test service i am using. they provide additional white space within their screen shots to make sure the full length of the email is captured. This is a limitation of the email capturing process, and not an issue with my email =)
Related
I set up a simple 2-column (on desktop screens) HTML Email based on code I got from a manual (course I did some time ago). When I tested the email I found it displayed correctly on Android mobile phones (the 2-column display changes to a 1-column display as required), however, when viewed in iPhone 5 (haven't tried iPhone 6 or greater) the email does not behave responsively i.e. the 2-column display does not change to a single column display as it should.
See email code CSS/ HTML below. I've also set up a CodePen at:
https://codepen.io/Ben10/pen/GvGgZo
I wonder if anyone can point out what is wrong with (or missing from) the CSS/HTML code. How can I fix this problemo? I've checked around the web but I'm now more confused than ever. HTML email seems to be a minefield of problems.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Date Night Exclusive Picks Inlined Complete</title>
<style>
#media only screen and (max-width:680px){
/*.wrapper{*/
table[class="wrapper"]{
max-width:680px !important;
width:100% !important;
}
td[class="deviceWidth"]{
display:block !important;
padding:0 !important;
width:100% !important;
}
td[class="row"]{
padding:15px 10px !important;
}
[class="deviceWidth"] p{
font-size:16px !important;
}
a[class="bookLink"]{
font-size:16px !important;
}
/*.resImg{*/
img[class="resImage"]{
height:auto !important;
width:100% !important;
}
/*h1{*/
[class="wrapper"] h1{
font-size:24px !important;
}
[class="wrapper"] h2{
margin-top:15px !important;
}
} /* close media query max-width:680px */
#media only screen and (max-width:480px){
td[class="mobileBanner"]{
background-image:url(http://www.nobledesktop.com/nl-date-
night/img/header-mobile#2x.png) !important;
background-repeat:no-repeat !important;
background-position:center top !important;
background-size:cover !important;
}
[class="mobileBanner"] img{
display:none !important;
}
[class="mobileBanner"] a{
display:block !important;
padding-top:43.333% !important;
}
} /* close media query max-width:480px */
</style>
</head>
<body style="margin: 0;">
<table class="wrapper" align="center" border="0" cellpadding="0"
cellspacing="0" width="680">
<tr>
<td class="mobileBanner" align="center" width="100%">
<p class="preheader" style="color: #ffffff;font-family: Helvetica,
Arial, sans-serif;font-size: 2px;line-height: 140%;margin-bottom:
0;margin-top: 0;display: none;">Punch-drunk in love? Go boxing with your
sweetheart. This and more great dates inside!</p>
<a href="#" target="_blank"><img class="resImage"
src="http://www.nobledesktop.com/nl-date-night/img/header.png"
width="680" alt="Date Night" style="display: block;border: none;" moz-do-
not-send="true"></a>
</td>
</tr>
<tr>
<td align="center" width="100%">
<!-- NESTED TABLE -->
<table align="center" border="0" cellpadding="0" cellspacing="0"
width="100%">
<tr>
<td class="mainContent" align="center" width="100%"
style="padding: 20px;border-bottom: 10px solid #e64a33;">
<h1 style="color: #69655c;font-family: Arial, Helvetica,
sans-serif;font-size: 40px;font-weight: bold;margin: 0;">This Week’s
Exclusive Picks</h1>
<!-- LISTING ONE -->
<table align="center" border="0" cellpadding="0"
cellspacing="0" width="100%">
<tr>
<td class="row" align="center" width="100%"
style="padding:20px;">
<table align="center" border="0"
cellpadding="0" cellspacing="0" width="100%">
<tr>
<!-- LEFT COLUMN -->
<td class="deviceWidth" align="left"
width="50%" valign="top" style="padding-right:10px;">
<a href="#" target="_blank"><img
class="resImage" src="http://www.nobledesktop.com/nl-date-
night/img/couple-boxing#2x.jpg" width="290" alt="Couple Fighting"
style="display: block;border: none;" moz-do-not-send="true"></a>
</td>
<!-- RIGHT COLUMN -->
<td class="deviceWidth" align="left"
width="50%" valign="top" style="padding-left:10px;">
<h2 style="color: #696969;font-
family: Helvetica, Arial, sans-serif;font-size: 16px;line-height:
140%;margin-top: 0;margin-bottom: 0;">OUT OF THE BOX DATES: BOXING
FOR TWO</h2>
<p style="color: #363636;font-family: Helvetica, Arial, sans-serif;font-
size: 12px;line-height: 140%;margin-bottom: 0;margin-top: 0;">If you
enjoyed our punny joke, you’ll love our selection of unique and out
of the box dates. They’re designed to ignite a budding relationship
or bring some new spark to an old flame. Dinner and drinks is
yesterday’s news, so get geared up and fight it out in the ring or
take it down a level with lazy river meditation. Expect to see a new and
exciting date added to the date book every week. <a class="bookLink"
href="#" target="_blank" style="color: #e74b34; font-size: 10px; font-
weight: bold;">Book Now</a></p>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!-- LISTING TWO -->
<table align="center" border="0" cellpadding="0"
cellspacing="0" width="100%">
<tr>
<td class="row" align="center" width="100%"
style="padding:20px;" bgcolor="#eeeeee">
<table align="center" border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<!-- LEFT COLUMN -->
<td class="deviceWidth" align="left"
width="50%" valign="top" style="padding-right:10px;">
<a href="#" target="_blank"><img
class="resImage" src="http://www.nobledesktop.com/nl-date-night/img/beer-
bar-label#2x.jpg" width="290" alt="Open Bar" style="display: block;border:
none;" moz-do-not-send="true"></a>
</td>
<!-- RIGHT COLUMN -->
<td class="deviceWidth" align="left"
width="50%" valign="top" style="padding-left:10px;">
<h2 style="color: #696969;font-
family: Helvetica, Arial, sans-serif;font-size: 16px;line-height:
140%;margin-top: 0;margin-bottom: 0;">NEW BAR CRAWL PACKAGE—ALSO AS
A DOUBLE DATE!</h2>
<p style="color: #363636;font-family: Helvetica, Arial, sans-serif;font-
size: 12px;line-height: 140%;margin-bottom: 0;margin-top: 0;">You asked
and we delivered! Introducing our first optional double date package, the
Couples’ New York Bar Crawl. Spend a Friday or Saturday night
exploring the nightlife in a new area with your loved one and friends.
You’ll visit five different bars in close proximity to each
other—no cabs or transportation required. Most importantly, the
first drink at every bar is on us! Check it out now for the special grab a
date price! <a class="bookLink" href="#" target="_blank" style="color:
#e74b34;font-size: 10px;font-weight: bold;">Book Now</a></p>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!-- LISTING THREE -->
<table align="center" border="0" cellpadding="0"
cellspacing="0" width="100%">
<tr>
<td class="row" align="center" width="100%"
style="padding:20px;">
<table align="center" border="0"
cellpadding="0" cellspacing="0" width="100%">
<tr>
<!-- LEFT COLUMN -->
<td class="deviceWidth" align="left"
width="50%" valign="top" style="padding-right:10px;">
<a href="#" target="_blank"><img
class="resImage" src="http://www.nobledesktop.com/nl-date-night/img/milan-
canal#2x.jpg" width="290" alt="Canal Cruise - Milan" style="display:
block;border: none;" moz-do-not-send="true"></a>
</td>
<!-- RIGHT COLUMN -->
<td class="deviceWidth" align="left"
width="50%" valign="top" style="padding-left:10px;">
<h2 style="color: #696969;font-
family: Helvetica, Arial, sans-serif;font-size: 16px;line-height:
140%;margin-top: 0;margin-bottom: 0;">DELUXE WEEKEND: FAR-FLUNG AND
ROMANTIC</h2>
<p style="color: #363636;font-family: Helvetica, Arial, sans-serif;font-
size: 12px;line-height: 140%;margin-bottom: 0;margin-top: 0;">You two are
so busy that a 7-day work week is all too familiar. Time to de-stress and
take a weekend to remember why you work so hard. Put your routine on pause
and enjoy a short vacation to an enchanted location. Choose from over 15
exotic remote and not-so-remote locations. Weekend date prices include a
hotel for two, a bottle of wine, and a planned activity. <a
class="bookLink" href="#" target="_blank" style="color: #e74b34;font-size:
10px;font-weight: bold;">Book Now</a></p>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
First of all a table get responsive. Responsiveness only works upto some extend. you should use div and give float property to them. For example
<style>
.div1 {
max-width:680px !important;
width:100% !important;
}
.div1 > img {
max-width:200px !important;
width:100% !important;
float: left;
}
.div1 > .text-div {
max-width:480px !important;
width:100% !important;
float: right;
}
.clear-fix
{
content: " "; /* Older browser do not support empty content */
visibility: hidden;
display: block;
height: 0;
clear: both;
}
</style>
<div class="div1">
<img src=""/>
<div class="text-div">
<h5>OUT OF THE BOX DATES: BOXING FOR TWO</h5>
<p>If you enjoyed our punny joke, you’ll love our selection of unique and out of the box dates.
They’re designed to ignite a budding relationship or bring some new spark to an old flame.
Dinner and drinks is yesterday’s news, so get geared up and fight it out in the ring or take it down a level with lazy river meditation.
Expect to see a new and exciting date added to the date book every week.</p>
</div>
</div>
And don't forget to add this meta tag in your head tag
<meta name="viewport" content="width=device-width, initial-scale=1">
you can find about clear-fix here:
What is a clearfix?
I have a problem with my email signature. It gets messed up when replying in Outlook.
What is happening: When I send an email with the signature from Outlook 2016 (on Mac) to Outlook 2007 (on Windows) it looks good. When replying to that email it still looks good. When replying to that email the signature gets messed up. Screenshot: enter image description here
My code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title></title>
<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;
}
/* 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. */
#backgroundTable {
margin: 0;
padding: 0;
width: 100% !important;
line-height: 100% !important;
}
img {
outline: none;
text-decoration: none;
border: none;
-ms-interpolation-mode: bicubic;
}
a img {
border: none;
}
.image_fix {
display: block;
}
p {
margin: 0px 0px !important;
}
table td {
border-collapse: collapse;
}
table {
border-collapse: collapse;
mso-table-lspace: 0pt;
mso-table-rspace: 0pt;
}
/*##############################################*/
/*IPHONE STYLES*/
/*##############################################*/
#media only screen and (max-width: 480px) {
table {
position: relative;
}
table[class="fluid-table"], td[class="fluid-cell"]{
width: 100% !important;
}
}
</style>
</head>
<body>
<div class="block">
<!-- Start of name, function title and logo -->
<table border="0" cellpadding="0" cellspacing="0" class="fluid-table">
<tbody>
<tr>
<td style="display:block; border:none; outline:none; text-decoration:none; color:#000; font-size:14px; text-align:left; font-family: Open Sans, Arial, Verdana, sans-serif;" border="0">
<span style="text-align: left; color: #9C1C27;font-size: 15px; font-weight: bold">Voornaam en Achternaam</span><br/>
<span style="text-align: left; color: #B5987F; font-weight: normal; font-style:italic; font-size: 14px;">Functie titel</span><br/>
</td>
</tr>
<tr>
<td>
<img src="http://www.deleeuwhides.com/img/logo.png" nosend="1" border="0" style="width:179px; height:111px; padding: 10px 0 5px 0;" alt="De Leeuw Hides logo" title="De Leeuw Hides logo" />
</td>
</tr>
</tbody>
</table>
<!-- End of name, function and logo -->
<table cellpadding="0" cellspacing="0" border="0" width="100%">
<tr>
<td><table cellpadding="0" cellspacing="0" border="0" width="600" class="fluid-table">
<tr>
<!-- Start of first column -->
<td><table width="175" align="left" border="0" cellpadding="0" cellspacing="0" class="fluid-table">
<tbody>
<tr>
<td width="175" style=" border:none; text-decoration:none; color:#B5987F; font-size:14px; text-align:left; font-family: Open Sans, Arial, Verdana, sans-serif;" border="0">
<strong style="color:#9C1C27;">Location Nijmegen</strong><br/>
Lindenhoutseweg 69<br/>
6545 AH Nijmegen <br/>
The Netherlands
</td>
</tr>
</tbody>
</table>
<!-- End of first column -->
<!-- Start of second column -->
<table width="175" align="left" border="0" cellpadding="0" cellspacing="0" class="fluid-table">
<tbody>
<tr>
<td width="175" style="border:none; text-decoration:none; color:#B5987F; font-size:14px; text-align:left; font-family: Open Sans, Arial, Verdana, sans-serif;" border="0">
<strong style="color:#9C1C27;">Location Winterswijk</strong><br/>
Industrieweg 2a<br/>
7102 DZ Winterswijk<br/>
The Netherlands
</td>
</tr>
</tbody>
</table>
<!-- End of second column -->
<!-- Start of third column -->
<table width="175" align="left" border="0" cellpadding="0" cellspacing="0" class="fluid-table">
<tbody>
<tr>
<td width="175" style="border:none; text-decoration:none; color:#B5987F; font-size:14px; text-align:left; font-family: Open Sans, Arial, Verdana, sans-serif;" border="0">
T:0031-024-3775233 <br/>
<span style="text-decoration:none">F: 0031-024-3779316</span> <br/>
<a style="text-decoration:none; color:#9C1C27;" href="mailto:sales#deleeuwhides.nl"><span style="text-decoration:none; color:#9C1C27;">sales#deleeuwhides.nl</span></a><br/>
<a style="text-decoration:none; color:#9C1C27;" href="http://www.deleeuwhides.com"><span style="text-decoration:none; color:#9C1C27;">www.deleeuwhides.com</span></a>
</td>
</tr>
</tbody>
</table>
<!-- End of third column -->
</td>
</tr>
</table>
<!-- Start of branding identity elements -->
<table cellpadding="0" cellspacing="0" border="0" width="100%" class="fluid-table">
<tr>
<td style="height:3px; width:100%; background-color:#B5987F;">
</td>
</tr>
</table>
<table cellpadding="0" cellspacing="0" border="0" width="100%"class="fluid-table">
<tr>
<td style="height:2px; width:100%; background-color:#fff;">
</td>
</tr>
</table>
<table cellpadding="0" cellspacing="0" border="0" width="100%" class="fluid-table">
<tr>
<td valign="middle" style="height:30px; width:100%; background-color:#9C1C27;"><center><img style="display:block;" src="http://www.deleeuwhides.com/img/slogan-footer.png" alt="slogan"></center>
</td>
</tr>
</table>
<!-- End of branding identity elements-->
</td>
</tr>
</table>
</div>
</body>
</html>
Why is this happening and how can I fix this?
I sent your message to me from http://putsmail.com to my Outlook address, replied to my gmail and then replied back to my Outlook and got this:
When I replied back to gmail, it looked fine.
My suggestion is to add valign="top" to your tr and td cells in the table in question. This will force the table cells to align.
`
<!-- Start of first column -->
<td valign="top">
<table width="175" align="left" border="0" cellpadding="0" cellspacing="0" class="fluid-table">
<tbody>
<tr valign="top">
<td valign="top" width="175" style=" border:none; text-decoration:none; color:#B5987F; font-size:14px; text-align:left; font-family: Open Sans, Arial, Verdana, sans-serif;" border="0">
<strong style="color:#9C1C27;">Location Nijmegen</strong><br/>
Lindenhoutseweg 69<br/>
6545 AH Nijmegen <br/>
The Netherlands
</td>
</tr>
</tbody>
</table>
<!-- End of first column -->
<!-- Start of second column -->
<table width="175" align="left" border="0" cellpadding="0" cellspacing="0" class="fluid-table">
<tbody>
<tr valign="top">
<td valign="top" width="175" style="border:none; text-decoration:none; color:#B5987F; font-size:14px; text-align:left; font-family: Open Sans, Arial, Verdana, sans-serif;" border="0">
<strong style="color:#9C1C27;">Location Winterswijk</strong><br/>
Industrieweg 2a<br/>
7102 DZ Winterswijk<br/>
The Netherlands
</td>
</tr>
</tbody>
</table>
<!-- End of second column -->
<!-- Start of third column -->
<table width="175" align="left" border="0" cellpadding="0" cellspacing="0" class="fluid-table">
<tbody>
<tr valign="top">
<td valign="top" width="175" style="border:none; text-decoration:none; color:#B5987F; font-size:14px; text-align:left; font-family: Open Sans, Arial, Verdana, sans-serif;" border="0">
T:0031-024-3775233 <br/>
<span style="text-decoration:none">F: 0031-024-3779316</span> <br/>
<a style="text-decoration:none; color:#9C1C27;" href="mailto:sales#deleeuwhides.nl"><span style="text-decoration:none; color:#9C1C27;">sales#deleeuwhides.nl</span></a><br/>
<a style="text-decoration:none; color:#9C1C27;" href="http://www.deleeuwhides.com"><span style="text-decoration:none; color:#9C1C27;">www.deleeuwhides.com</span></a>
</td>
</tr>
</tbody>
</table>
<!-- End of third column -->
</td>
</tr>
</table>
<!-- Start of branding identity elements -->
<table cellpadding="0" cellspacing="0" border="0" width="100%" class="fluid-table">
<tr>
<td style="height:3px; width:100%; background-color:#B5987F;">
</td>
</tr>
</table>
<table cellpadding="0" cellspacing="0" border="0" width="100%"class="fluid-table">
<tr>
<td style="height:2px; width:100%; background-color:#fff;">
</td>
</tr>
</table>
<table cellpadding="0" cellspacing="0" border="0" width="100%" class="fluid-table">
<tr>
<td valign="middle" style="height:30px; width:100%; background-color:#9C1C27;"><center><img style="display:block;" src="http://www.deleeuwhides.com/img/slogan-footer.png" alt="slogan"></center>
</td>
</tr>
</table>
<!-- End of branding identity elements-->
</td>
</tr>
`
Solved it! I first removed all align attributes which helped to put the columns next to each other. I then removed all the tables and made one "wrapper" table with a table nested in to this wrapper table which contains everything. Hope I'm describing this clearly, lol. Anyway this solved all my problems!
This is my code for anyone who is interested or has the same problems I did:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title></title>
<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;
}
/* 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. */
#backgroundTable {
margin: 0;
padding: 0;
width: 100% !important;
line-height: 100% !important;
}
img {
outline: none;
text-decoration: none;
border: none;
-ms-interpolation-mode: bicubic;
}
a img {
border: none;
}
.image_fix {
display: block;
}
p {
margin: 0px 0px !important;
}
table td{
border-collapse: collapse;
border-spacing:0;
mso-table-lspace: 0pt;
mso-table-rspace: 0pt;
}
/*##############################################*/
/*IPHONE STYLES*/
/*##############################################*/
#media only screen and (max-width: 480px) {
table {
position: relative;
}
table[class="fluid-table"], td[class="fluid-cell"]{
width: 100% !important;
}
}
</style>
</head>
<body>
<div class="block">
<!-- Start of wrapper table -->
<table cellpadding="0" cellspacing="0" border="0" width="100%">
<tr>
<td>
<table cellpadding="0" cellspacing="0" border="0" width="600" class="fluid-table">
<!-- Start of name, function title and logo -->
<tr>
<td style="padding-bottom:3px; outline:none; text-decoration:none; color:#000; font-size:14px; text-align:left; font-family: Open Sans, Arial, Verdana, sans-serif;">
<strong style="color: #9C1C27;font-size: 15px;">Voornaam en Achternaam</strong><br/>
<em style="color: #B5987F; font-weight: normal; font-size: 14px;">Functie titel</em><br/>
</td>
</tr>
<tr>
<td style="padding-bottom:5px;">
<img src="http://www.deleeuwhides.com/img/logo.png" nosend="1" border="0" style="display:block; width:179px; height:111px;" alt="De Leeuw Hides logo" title="De Leeuw Hides logo" />
</td>
</tr>
<!-- End of name, function and logo -->
<!-- Contact info and Start of first column -->
<tr>
<td width="200" style="padding-bottom:3px; text-decoration:none; color:#B5987F; font-size:14px; font-family: Open Sans, Arial, Verdana, sans-serif;">
<strong style="color:#9C1C27;">Location Nijmegen</strong><br/>
Lindenhoutseweg 69<br/>
6545 AH Nijmegen <br/>
The Netherlands
</td>
<!-- End of first column -->
<!-- Start of second column -->
<td width="200" style="padding-bottom:3px; text-decoration:none; color:#B5987F; font-size:14px; font-family: Open Sans, Arial, Verdana, sans-serif;">
<strong style="color:#9C1C27;">Location Winterswijk</strong><br/>
Industrieweg 2a<br/>
7102 DZ Winterswijk<br/>
The Netherlands
</td>
<!-- End of second column -->
<!-- Start of third column -->
<td width="200" style="padding-bottom:3px; text-decoration:none; color:#B5987F; font-size:14px; font-family: Open Sans, Arial, Verdana, sans-serif;">
T:0031-024-3775233 <br/>
<span style="text-decoration:none">F: 0031-024-3779316</span> <br/>
<a style="text-decoration:none; color:#9C1C27;" href="mailto:sales#deleeuwhides.nl"><span style="text-decoration:none; color:#9C1C27;">sales#deleeuwhides.nl</span></a><br/>
<a style="text-decoration:none; color:#9C1C27;" href="http://www.deleeuwhides.com"><span style="text-decoration:none; color:#9C1C27;">www.deleeuwhides.com</span></a>
</td>
</tr>
</table>
<!-- End of third column and contact info -->
<!-- Start of branding identity elements -->
<tr>
<td bgcolor="#B5987F" style="height:3px; width:100%;"></td>
</tr>
<tr>
<td bgcolor="#ffffff" style="height:3px; width:100%;"></td>
</tr>
<tr>
<td valign="middle" bgcolor="#9C1C27" style="height:30px; width:100%;">
<center>
<img style="display:block;"src="http://www.deleeuwhides.com/img/slogan-footer.png" alt="slogan" />
</center>
</td>
</tr>
<!-- End of branding identity elements -->
</td>
</tr>
</table>
<!-- end of wrapper table -->
</div>
</body>
</html>
Welll, as they say: "Email is hard".
In general, it is a good practice to inline the CSS styles when doing stuff for emails. I use this tool from Litmus, and they also have a pretty good article about the pitfalls of developing HTML content that looks good for emails (gmail specifically).
I have made an email signature for a client which works perfectly on everything except Gmail. When I try to use the signature in Gmail it somehow centers it. This is only on the browser version. When I view the signature in the mail app on the iPhone it looks good. When I send the signature to Gmail from, for example, Outlook it looks good too. A screenshot of the problem: click .
I have no idea why this happens so I hope someone here has the answer for me. My code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>3-column layout</title>
</head>
<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;
}
/* 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. More on that: http://www.emailonacid.com/forum/viewthread/43/ */
#backgroundTable {
margin: 0;
padding: 0;
width: 100% !important;
line-height: 100% !important;
}
img {
outline: none;
text-decoration: none;
border: none;
-ms-interpolation-mode: bicubic;
}
a img {
border: none;
}
.image_fix {
display: block;
}
p {
margin: 0px 0px !important;
}
table td {
border-collapse: collapse;
}
table {
border-collapse: collapse;
mso-table-lspace: 0pt;
mso-table-rspace: 0pt;
}
/*##############################################*/
/*IPHONE STYLES*/
/*##############################################*/
#media only screen and (max-width: 480px) {
table {
position: relative;
}
table[class="fluid-table"], td[class="fluid-cell"]{
width: 100% !important;
padding: 0 20px 0 20px!important;
}
}
</style>
<body style="padding:0; margin:0">
<!--
/*##############################################*/
3 column
/*##############################################*/
-->
<table align="left" border="0" cellpadding="0" cellspacing="0" class="fluid-table">
<tbody>
<tr>
<td align="left" style="display:block; border:none; outline:none; text-decoration:none; color:#000; font-size:14px; text-align:left; font-family: Open Sans, Arial, Verdana, sans-serif;" border="0">
<span style="text-align: left; color: #9C1C27;font-size: 14px; font-weight: bold">Voornaam en Achternaam</span><br>
<span style="text-align: left; margin-top: 0px; margin-bottom: 0px; color: #B5987F; font-weight: normal; font-style:italic; font-size: 12px;">Functie titel</span><br>
</td>
</tr>
<tr>
<td valign="top" style="padding-left: 0px; padding-top: 7px; padding-bottom: 10px; padding-right: 0px; width:100%; height:100%;">
<img src="http://www.deleeuwhides.com/img/logo.png" nosend="1" border="0" style="width:179px; height:111px;" alt="De Leeuw Hides logo" title="De Leeuw Hides logo">
</td>
</tr>
</tbody>
</table>
<div class="block">
<table cellpadding="0" cellspacing="0" border="0" width="100%" align="left">
<tr>
<td><table cellpadding="0" cellspacing="0" border="0" width="600" align="left" class="fluid-table">
<tr>
<!-- Start of first column -->
<td><table width="175" align="left" border="0" cellpadding="0" cellspacing="0" class="fluid-table">
<tbody>
<tr>
<td width="175" align="left" style=" border:none; text-decoration:none; color:#B5987F; font-size:14px; text-align:left; font-family: Open Sans, Arial, Verdana, sans-serif;" border="0">
<strong style="color:#9C1C27;">Location Nijmegen</strong><br>
Lindenhoutseweg 69<br>
6545 AH Nijmegen <br>
The Netherlands
</td>
</tr>
</tbody>
</table>
<!-- End of first column -->
<!--[if mso]></td><td valign="top"><![endif]-->
<!-- Start of second column -->
<table width="175" align="left" border="0" cellpadding="0" cellspacing="0" class="fluid-table">
<tbody>
<tr>
<td width="175" align="left" style="border:none; text-decoration:none; color:#B5987F; font-size:14px; text-align:left; font-family: Open Sans, Arial, Verdana, sans-serif;" border="0">
<strong style="color:#9C1C27;">Location Winterswijk</strong><br>
Industrieweg 2a<br>
7102 DZ Winterswijk<br>
The Netherlands
</td>
</tr>
</tbody>
</table>
<!-- End of second column -->
<!--[if mso]></td><td valign="top"><![endif]-->
<!-- Start of third column -->
<table width="175" align="left" border="0" cellpadding="0" cellspacing="0" class="fluid-table">
<tbody>
<tr>
<td width="175" align="left" style="border:none; text-decoration:none; color:#B5987F; font-size:14px; text-align:left; font-family: Open Sans, Arial, Verdana, sans-serif;" border="0">
<font>T:</font> 0031-024-3775233 <br>
F: 0031-024-3779316 <br>
<a style="text-decoration:none; color:#9C1C27;" href="mailto:sales#deleeuwhides.nl">sales#deleeuwhides.nl</a><br>
<a style="text-decoration:none; color:#9C1C27;" href="http://www.deleeuwhides.com">www.deleeuwhides.com</a>
</td>
</tr>
</tbody>
</table>
<!-- End of third column --></td>
</tr>
</table>
<table cellpadding="0" cellspacing="0" border="0" width="100%" align="left" style="margin-top:5px; margin-bottom:3px;" class="fluid-table">
<tr>
<td style="padding: 0 0 2px 0; height:1px; width:100%; background-color:#B5987F;">
</td>
</tr>
</table>
<table cellpadding="0" cellspacing="0" border="0" width="100%" align="left" class="fluid-table">
<tr>
<td valign="top"bgcolor="#9C1C27" style="height:30px; width:100%; background-color:#9C1C27;"><img style="display:block; margin:auto; padding:8px 0 0 0;" src="http://www.deleeuwhides.com/img/slogan-footer.png" alt="slogan">
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
</body>
</html>
Thanks in advance!
Somehow I fixed this by starting to build the code line for line in a new .html document. Testing it every time in Gmail until the centering would occur again, but it never did. So now it is working like it should!
Have you tried float left in your outer table which has a class of fluid-table?
If that doesn't fix it, give the below a shot and let me know if it works.
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td style="width:100%; max-width:600px;">[signature content here]</td>
<td> </td>
</tr>
</tbody>
</table>
I have created a table with two columns, first column has max width of 600px and the second doesn't have a width. Place all the content into the first column. I have placed the style inline, you can move it to a class if you want to.
Cheers
I had the same issue and solved it by applying "margin:0 !important" to the signature main container.
I'm coding a responsive email, and I'm running onto some troubles with the behavior of some its tables. Please check the attached picture, for the desired effect.
https://dl.dropboxusercontent.com/u/58655025/mail_scenario.jpg
(left: "normal" behavior; right: responsive behavior, when the view width is <= 320px)
I'm not exactly sure of how many elements these blocks (both rectangular and the square ones; number of block elements and contents are dynamic) will have in total, so I want to keep the HTML as dynamic as possible. So, every time a new element is added to each block, it's placed at the right of the previous one and when they cannot fit on that line (due to email's max-width of 620px), I'd like for them to continue below.
And that's the part I'm not able to do. Instead of breaking below, the elements keep growing in the same line, ignoring the email's max-width property.
I'd like for the implementation to be table-based only, in order to guarantee the maximum email-client support as possible.
What can I do to achieve this? Any other suggestion?
Please, check this fiddle for a live example: http://jsfiddle.net/afe33fhv/
Or the HTML code, as required:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Title</title>
<style type="text/css">
/* Client-specific Styles */
#outlook a {padding:0;}
body {width:100% !important; -webkit-text-size-adjust:100%; -ms-text-size-adjust:100%; margin:0; padding:0; color:#756d85; font-family:Helvetica, Arial, sans-serif;}
body.outlook img { width: auto !important; max-width: none !important;}
.ExternalClass {width:100%;}
.ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div {line-height:100%;}
.backgroundTable {margin:0; padding:0; width:100% !important; line-height:100% !important;}
img {outline:none; text-decoration:none; border:none; -ms-interpolation-mode:bicubic;}
a img {border:none;}
.image_fix {display:block;}
p {margin: 0px 0px !important;}
table td {border-collapse: collapse;}
table { border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt; }
a {color: #756d85;text-decoration: none;text-decoration:none!important;}
table[class=full] { width: 100%; clear:both; }
/*IPAD STYLES*/
#media only screen and (max-width: 640px) {
a[href^="tel"], a[href^="sms"] {
text-decoration: none;
color: #000;
pointer-events: none;
cursor: default;
}
table[class=devicewidth] {width:440px !important; text-align:center !important;}
table[class=devicewidthinner] {width:420px !important; text-align:center !important;}
table[class=devicewidthsocial] {width:200px! important; text-align:center !important;}
img[class=banner] {width:440px !important; height:220px !important;}
img[class=colimg2] {width:440px !important; height:220px !important;}
}
/*IPHONE STYLES*/
#media only screen and (max-width: 480px) {
a[href^="tel"], a[href^="sms"] {
text-decoration: none;
color: #000;
pointer-events: none;
cursor: default;
}
table[class=devicewidth] {width:300px !important; text-align:center !important;}
table[class=devicewidthinner] {width:260px !important; text-align:center !important;}
table[class=devicewidthsocial] {width: 200px!important; text-align:center !important;}
img[class=banner] {width: 280px!important; height:140px!important;}
img[class=colimg2] {width: 280px!important; height:140px!important;}
td[class=mobile-hide]{display:none !important;}
}
</style>
</head>
<body leftmargin="0" marginwidth="0" topmargin="0" marginheight="0" offset="0">
<center>
<!-- | Horizontal blocks | -->
<table width="100%" cellpadding="0" cellspacing="0" border="0" class="backgroundTable">
<tbody>
<tr>
<td>
<table width="620" cellpadding="0" cellspacing="0" border="0" align="center" class="devicewidth" bgcolor="#f2f2f2">
<tbody>
<tr>
<!-- Element 1 -->
<td>
<table width="300" height="100" cellpadding="0" cellspacing="0" border="0" align="center">
<tbody>
<tr>
<td>
<table width="300" height="80" cellpadding="0" cellspacing="0" border="0" align="center" bgcolor="#7c84ca">
<tbody>
<tr><td width="100%">1</td></tr>
</tbody>
</table>
</td>
</tr>
<tr><td width="100%" height="10" style="font-size:1px; line-height:1px; mso-line-height-rule:exactly;"> </td></tr>
</tbody>
</table>
</td>
<!-- Element 2 -->
<td>
<table width="300" height="100" cellpadding="0" cellspacing="0" border="0" align="center">
<tbody>
<tr>
<td>
<table width="300" height="80" cellpadding="0" cellspacing="0" border="0" align="center" bgcolor="#bdaabf">
<tbody>
<tr><td width="100%">2</td></tr>
</tbody>
</table>
</td>
</tr>
<tr><td width="100%" height="10" style="font-size:1px; line-height:1px; mso-line-height-rule:exactly;"> </td></tr>
</tbody>
</table>
</td>
<!-- Element 3 -->
<td>
<table width="300" height="100" cellpadding="0" cellspacing="0" border="0" align="center">
<tbody>
<tr>
<td>
<table width="300" height="80" cellpadding="0" cellspacing="0" border="0" align="center" bgcolor="#d26ec1">
<tbody>
<tr><td width="100%">3</td></tr>
</tbody>
</table>
</td>
</tr>
<tr><td width="100%" height="10" style="font-size:1px; line-height:1px; mso-line-height-rule:exactly;"> </td></tr>
</tbody>
</table>
</td>
<!-- Element 4 -->
<td>
<table width="300" height="100" cellpadding="0" cellspacing="0" border="0" align="center">
<tbody>
<tr>
<td>
<table width="300" height="80" cellpadding="0" cellspacing="0" border="0" align="center" bgcolor="#d85c79">
<tbody>
<tr><td width="100%">4</td></tr>
</tbody>
</table>
</td>
</tr>
<tr><td width="100%" height="10" style="font-size:1px; line-height:1px; mso-line-height-rule:exactly;"> </td></tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<!-- | Square blocks | -->
<table width="100%" cellpadding="0" cellspacing="0" border="0" class="backgroundTable">
<tbody>
<tr>
<td>
<table width="620" cellpadding="0" cellspacing="0" border="0" align="center" class="devicewidth" bgcolor="#f2f2f2">
<tbody>
<tr>
<!-- Element 1 -->
<td>
<table width="140" height="140" cellpadding="0" cellspacing="0" border="0" align="center" bgcolor="#8eb7c2">
<tbody>
<tr><td>1</td></tr>
</tbody>
</table>
</td>
<!-- Element 2 -->
<td>
<table width="140" height="140" cellpadding="0" cellspacing="0" border="0" align="center" bgcolor="#8ec296">
<tbody>
<tr><td>2</td></tr>
</tbody>
</table>
</td>
<!-- Element 3 -->
<td>
<table width="140" height="140" cellpadding="0" cellspacing="0" border="0" align="center" bgcolor="#636a34">
<tbody>
<tr><td>3</td></tr>
</tbody>
</table>
</td>
<!-- Element 4 -->
<td>
<table width="140" height="140" cellpadding="0" cellspacing="0" border="0" align="center" bgcolor="#c17b01">
<tbody>
<tr><td>4</td></tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</center>
</body>
</html>
You probably want to scrap the tables. Set all the blocks to display: inline-block; and they will automatically wrap around to the next line if the parent container hasn't got enough width left.
By using media queries, you can make sure the boxes parent container can only take on certain widths, creating your desired effect.
Here is a jsfiddle demonstrating: http://jsfiddle.net/spkzj05b/2/
Here is a list of css features supported in popular email clients: https://www.campaignmonitor.com/css/
Here is a tool to test the rendering in different email clients: https://litmus.com/email-testing
i want to create a newsletter compatitable with Outlook. I'm getting a huge gap on the left only on Outlook clients. It's written in HTML.
http://www.nikosdelig.com/eurasia-newsletter-russian.html
In outlook, especially Outlook 2013, you have to specify any table data (<td>) which has heigh lower than 12px by: style="font-size: 1px; line-height: 1px;". For example:
<td height="1" bgcolor="#000000" style="font-size: 1px; line-height: 1px;"> </td>
Instead of trying to debug, I'll offer you a simplified and stable framework to use instead. As you can see, you don't need a lot of the extra stuff you have in your code, particularly the nested tables and <tbody> tags.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title></title>
<style type="text/css">
/* Client-specific Styles */
#outlook a {padding:0;}
body{width:100% !important; -webkit-text-size-adjust:100%; -ms-text-size-adjust:100%; margin:0; padding:0;} /* force default font sizes */
.ExternalClass {width:100%;} .ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div {line-height: 100%;} /* Hotmail */
#backgroundTable {margin:0; padding:0; width:100% !important; line-height: 100% !important;}
table td {border-collapse: collapse;}
</style>
</head>
<body style="margin: 0px; padding: 0px; background-color: #FFFFFF;" bgcolor="#FFFFFF"><table bgcolor="#f1f1f1" width="100%" border="0" align="center" cellpadding="0" cellspacing="0"><tr><td><table width="600" border="0" align="center" cellpadding="0" cellspacing="0"><tr><td valign="top" style="padding-top:30px; padding-bottom:30px;">
<table width="100%" border="0" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF">
<tr>
<td width="150">
LOGO
</td>
<td width="450" style="padding:20px;">
HEADER TEXT
</td>
</tr>
</table>
<table width="100%" border="0" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF">
<tr>
<td width="150" valign="bottom">
COLUMN
</td>
<td width="450" style="padding:20px;">
BODY<br>
...<br>
...<br>
...<br>
...<br>
</td>
</tr>
</table>
</td></tr></table></td></tr></table></body></html>