My page is centered horizontally and vertically, the page works in all browsers but for IE the page works only in IE11 (Latest). In IE 10, 9 and 8 the table is vertical aligned at the top of the page. How can I make the vertical align work in IE 10,9 and 8, what do I need to change?
Html
<body>
<div class="container">
<div class="content">
<table width="350px">
<tr>
<td>
<img border='0' src='https://upload.wikimedia.org/wikipedia/commons/a/a5/Information_example_page2_300px.jpg' width='300' height='300' style="margin:25px 25px 50px 25px;">
</td>
</tr>
<tr>
<td align="center">
<p style="margin: 0px 0px 50px 0px;">Street<br>
0000AA City
</p>
</td>
</tr>
<tr>
<td align="center" class="contact">
<p style="margin: 0px 0px 50px 0px;">
<span style="color:#DDB4A4;">T</span> 000000<br>
<span style="color:#DDB4A4;">E</span> info#info.nl<br>
</p>
</td>
</tr>
<tr>
<td align="center">
<p style="color:#999999; margin: 0px 0px 25px 0px; font-size: 16px;">Text</p>
</td>
</tr>
</table>
</div>
</div>
<body>
Css
html, body
{
margin: 0;
padding: 0;
width: 100%;
height: 100%;
display: table;
}
.container {
display: table-cell;
text-align: center;
vertical-align: middle;
}
.content {
display: inline-block;
text-align: left;
}
table {
font-size:18px;
font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
color: #4D4D4D;
}
.contact a:link
{
color: #4D4D4D;
text-decoration: none;
}
.contact a:hover
{
color: #1a0dab;
text-decoration: underline;
}
JSFiddle: https://jsfiddle.net/64ys7j6n/
Older IEs can't handle display:table for both html and body very well. Besides, it's not needed.
Solution: don't assign display:table to html, only to body. The html only needs height:100%.
html {
height:100%;
}
body
{
margin: 0;
width: 100%;
height: 100%;
display: table;
}
New fiddle
Related
I am trying to send an email from outlook (office 365) as HTML format. There is a thin line appearing in a large screen monitor(27 inch or more) or with a zoom level 175%. The below code doesn't show any horizontal line with 100% zoom in office 365 outlook, but if I increase the zoom (Click tab , Format Text --> Zoom) to (170%-200%), a horizontal line appears randomly below some part of header ex; Information -2 header, title header (image attached).
Here is my html that I am inserting in outlook mail.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Request Submitted</title>
<style type="text/css">
#outlook a {
padding: 0;
}
/* Force Outlook to provide a "view in browser" button. */
body {
width: 100% !important;
/*line-height: 100%;*/
}
.ReadMsgBody {
width: 100%;
}
.ExternalClass {
width: 100%;
}
/* Force Hotmail to display emails at full width */
body {
-webkit-text-size-adjust: none;
}
/* Prevent Webkit platforms from changing default text sizes. */
/* Reset Styles */
body {
margin: 0;
padding: 0;
}
img {
border: 0;
height: auto;
line-height: 100%;
outline: none;
text-decoration: none;
}
.ExternalClass * {
line-height: 100%;
}
body,
h1,
h2,
h3,
h4,
h5,
h6,
div,
table,
u,
td,
p {
margin: 0;
margin-bottom: 0;
padding: 0;
}
body {
padding: 0;
font-family: "Segoe UI Light", "Segoe UI", "Arial";
}
h1 {
font-size: 24px;
font-weight: normal;
margin: 10px 0px;
}
h2,
.h2 {
display: block;
padding: 5px 10px;
background-color: rgb(195, 203, 211);
color: rgb(52, 73, 94);
font-size: 16px;
}
h4 {
margin-left: 9px;
}
div.statusLabel {
display: block;
height: 20px;
padding: 10px;
background-color: rgb(195, 203, 211);
margin-bottom: 10px;
margin-right: 20px;
}
div.statusLabel.partialStatus {
height: 36px;
}
div.statusLabel p {
color: #FFFFFF;
font-size: 16px;
line-height: 16px;
text-align: center;
text-transform: uppercase;
}
div.statusLabel span {
display: none;
}
div.statusLabel.partialStatus span {
display: inline;
}
div.statusTile {
display: block;
width: 98px;
height: 98px;
padding: 10px;
background-color: rgb(195, 203, 211);
border: 1px solid rgb(183, 192, 202);
margin-bottom: 20px;
margin-left: 10px;
float: left;
}
div.statusTile.leftTile {
margin-left: 0px !important;
}
div.statusTile p {
position: relative;
top: 36px;
color: #FFFFFF;
font-size: 16px;
text-align: center;
}
div.statusTile span {
display: none;
}
div.statusTile.twoLine span {
display: block;
}
div.statusTile.twoLine p {
top: 24px;
}
/*Colors*/
.submitted {
background-color: #0078D7 !important;
}
.approved {
background-color: #107C10 !important;
}
.reserved {
background-color: #FFB900 !important;
}
.noRibbon {
border: 0 !important;
}
table table table {
margin-top: -10px !important;
}
</style>
</head>
<body style="font-family: " Segoe UI ", open-sans, Geneva, Verdana, sans-serif;font-weight:lighter;">
<table id="tblMain" cellpadding="0" cellspacing="0" height="100%" width="100%" border="0">
<tbody>
<tr>
<td align="center" valign="top">
<table cellpadding="0" cellspacing="0" width="800" border="0">
<tbody>
<tr>
<td>
<p style="font-size:16px;margin:0px"><b><i>Email Heading.</i></b> </p>
<h1>This is a Test Email.</h1>
</td>
</tr>
<tr>
<td>
<table>
<tbody>
<tr>
<td width="28%" valign="top" style="padding:10px 0px 20px 0px;">
<table width="90%" border="0" cellspacing="10" cellpadding="10">
<tbody>
<tr style="padding-top:10px;">
<td style="padding:10;background-color:#0078D7;">
<p style="color:#FFFFFF;font-size:15px;line-height:17px;margin:0px;text-align:center;text-transform:uppercase;">Title - 1</p>
</td>
</tr>
<tr>
<td style="padding:10;background-color:rgb(195,203,211);">
<p style="color:#FFFFFF;font-size:15px;line-height:17px;margin:0px;text-align:center;text-transform:uppercase;">Title - 2</p>
</tr>
<tr>
<td style="padding:10;background-color:rgb(195,203,211);">
<p style="color:#FFFFFF;font-size:15px;line-height:17px;margin:0px;text-align:center;text-transform:uppercase;">Title - 3</p>
</td>
</tr>
<tr>
<td style="padding:10;background-color:rgb(195,203,211);">
<p style="color:#FFFFFF;font-size:15px;line-height:17px;margin:0px;text-align:center;text-transform:uppercase;">Title - 4</p>
</td>
</tr>
<tr>
<td style="padding:10;background-color:rgb(195,203,211);">
<p style="color:#FFFFFF;font-size:15px;line-height:17px;margin:0px;text-align:center;text-transform:uppercase;">Title - 5</p>
</td>
</tr>
</tbody>
</table>
</td>
<td width="72%" valign="top" style="padding:10px 0px 20px 0px;">
<!--Intro Text-->
<p style="line-height:20px;">Hello User,
</p>
<br /> Please ignore this email.
</p>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td style="background-color:rgb(195,203,211);color:rgb(52,73,94);font-size:15px;padding:10px;"> <b style="color:rgb(52,73,94);">
Information - 1</b>
</td>
</tr>
<tr>
<td style="padding-top:10px; padding-bottom:20px;">
<table cellpadding="0" cellspacing="10" width="100%">
<tbody>
<tr>
<td width="50%"><b>Header 1</b>: <span></span> </td>
<td width="50%"><b>Header 2</b>: <span></span> </td>
</tr>
<tr>
<td width="50%"><b>Header 3</b>: <span></span> </td>
<td width="50%"><b>Header 4</b>: <span></span> </td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td style="padding:5px 10px;background-color:rgb(195,203,211);"> <b style="color:rgb(52,73,94);font-size:16px;">Information - 2</b> </td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</body>
</html>
I have modified the td padding, the line disappears for td padding 10px, but that is not consistent. Can you please help me how can I remove the horizontal line for zoom level 180%? This issue can be seen with a monitor 27 inch or more.
Thank you.
This is my code
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td style="font-size:40px;line-height:2px;color:red;">◖</td>
<td style="width:80px;height:30px;background-color:red;"></td>
<td style="font-size:40px;line-height:2px;color:red;">◗</td>
</tr>
</table>
Fiddle Example
What I want to do is to appear my table content as the div below ( with border radius )
<div style="width:120px;height:30px;background-color:red;border-radius:50px;"></div>
I have to do it with table like this because this code will use in html email for Outlook Desktop client which doesn't support border-radius .
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<div style="padding: 0;
margin: 0;
font-size: 40px;
line-height: 2px;
color: red;
background-image: url(http://freshcodelabel.com/images/red-half-circle.png);
background-repeat:no-repeat;
transform: rotate(180deg);
height: 186px;
width:90px;
display:inline-block;
">
</div>
<div style="width: 212px;height: 179px;background-color:#c60000;display:inline-block;"></div>
<div style="
padding: 0;
margin: 0;
font-size: 40px;
line-height: 2px;
color: red;
background-image: url(http://freshcodelabel.com/images/red-half-circle.png);
height: 186px;
background-repeat:no-repeat;
width:90px;
display:inline-block;
background-position: 0px 7px;
"></div>
</tr>
</table>
JSFiddle
Use images instead of characters.
Completely based on div.
div.my-button{
padding: 12px 18px 12px 18px;
border: 1px solid #e9703e;
background-color: #EB7035;
border-radius: 10px;
font-size: 16px;
margin-top: 20px;
width: 119px;
}
div.my-button a{
font-family: Helvetica, Arial, sans-serif;
color: #ffffff;
text-decoration: none;
}
<div class="my-button">
I am a button →
</div>
http://codepen.io/anon/pen/dOGWQW
Screenshots of what is wrong:
http://imgur.com/a/JjNLn
No matter what I try to change, I can't get the part that says "May we suggest", or below that where it says "Want more products?", to be centered in gmail's mobile app.
If you turn the phone in landscape mode it all displays right, but with the normal vertical view the width of the block is not 100% even though the text is still centered.
Then the footer text is just text aligned left for some reason.
On gmail.com on Chrome mobile, the whole template looks like its not at all designed for mobile and is full desktop width.
How do I debug this?
I can't use any kind of dev tool in these programs and nothing I can think of in the code should be making it do this.
<!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" />
<!--[if !mso]><!-->
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<!--<![endif]-->
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title></title>
<link rel="stylesheet" type="text/css" href="styles.css" />
<style type="text/css">
/* Basics */
body {
Margin: 0;
padding: 0;
min-width: 100%;
background-color: #fff;
}
table {
border-spacing: 0;
font-family: sans-serif;
color: #123050;
}
td {
padding: 0;
}
table, tbody, tr, td {
border: none;
border-color: #fff;
}
img {
border: 0;
}
.wrapper {
width: 100%;
table-layout: fixed;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}
.webkit {
max-width: 600px;
border: 1px solid #e1e1e1;
box-shadow: 0 0 100px 0 rgba(0, 0, 0, 0.15);
}
.outer {
Margin: 0 auto;
width: 100%;
max-width: 600px;
background: #fff;
}
.inner {
padding: 10px;
}
.contents {
width: 100%;
}
p {
Margin: 0;
}
a {
color: #ed9d2a;
text-decoration: none;
}
.h1 {
font-size: 21px;
font-weight: bold;
Margin-bottom: 18px;
}
.h2 {
font-size: 18px;
font-weight: bold;
Margin-bottom: 12px;
}
.full-width-image img {
width: 100%;
max-width: 600px;
height: auto;
}
/* One column layout */
.one-column .contents {
text-align: left;
}
.one-column p {
font-size: 14px;
Margin-bottom: 10px;
}
/*Two column layout*/
.two-column {
text-align: center;
font-size: 0;
}
.two-column .column {
width: 100%;
max-width: 300px;
display: inline-block;
vertical-align: top;
}
.two-column .contents {
font-size: 14px;
text-align: left;
border:1px solid #dedede;
border-radius: 3px;
box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.1);
margin-bottom: 15px;
}
.two-column img {
width: 100%;
max-width: 280px;
height: auto;
}
.two-column .image {
padding: 9px 5px 0;
}
.two-column .text {
padding: 0 5px 17px;
padding-top: 10px;
}
/*Three column layout*/
.three-column {
text-align: center;
font-size: 0;
padding-top: 10px;
padding-bottom: 10px;
}
.three-column .column {
width: 100%;
max-width: 200px;
display: inline-block;
vertical-align: top;
}
.three-column img {
width: 100%;
max-width: 180px;
height: auto;
}
.three-column .contents {
font-size: 14px;
text-align: center;
}
.three-column .text {
padding-top: 10px;
}
/* Left sidebar layout */
.left-sidebar {
text-align: center;
font-size: 0;
}
.left-sidebar .column {
width: 100%;
display: inline-block;
vertical-align: middle;
}
.left-sidebar .left {
max-width: 100px;
}
.left-sidebar .right {
max-width: 500px;
}
.left-sidebar .img {
width: 100%;
max-width: 80px;
height: auto;
}
.left-sidebar .contents {
font-size: 14px;
text-align: center;
}
.left-sidebar a {
color: #85ab70;
}
/* Right sidebar layout */
.right-sidebar {
text-align: center;
font-size: 0;
}
.right-sidebar .column {
width: 100%;
display: inline-block;
vertical-align: middle;
}
.right-sidebar .left {
max-width: 100px;
}
.right-sidebar .right {
max-width: 500px;
}
.right-sidebar .img {
width: 100%;
max-width: 80px;
height: auto;
}
.right-sidebar .contents {
font-size: 14px;
text-align: center;
}
.right-sidebar a {
color: #70bbd9;
}
h2.featured {
font-size: 39px;
letter-spacing: -1px;
font-weight: bold;
font-style: italic;
color: #ffad38;
text-align: center;
margin: 0 auto 0px;
}
.subtitle {
font-size: 14px;
font-style: italic;
color: #7c8697;
text-align: center;
margin-bottom: 30px;
}
.bold {
font-weight: bold;
}
.header {
text-align: center;
padding-bottom: 25px;
}
.header-wrap {
background: #123050 center bottom no-repeat;
display: block;
width: 100%;
}
img.header-desktop {
display: block;
width: 100%;
}
img.header-mobile {
display: none;
height:1px;
width: 1px;
}
h3 {
color: #123050;
font-size: 27px;
text-align: center;
font-weight:900;
text-transform: uppercase;
letter-spacing: -1px;
margin-top: 0;
margin-bottom: 20px;
}
h4.suggest {
text-transform: uppercase;
font-weight: 900;
font-size: 17px;
letter-spacing: -1.5px;
margin-top: 0;
margin-bottom: 10px;
}
td.suggest {
padding-top: 31px;
}
h5 {
text-transform: uppercase;
font-weight: bold;
margin-top: 10px;
margin-bottom:3px;
}
h3.fancy {
margin: 0 0 43px;
}
h3.fancy a {
color: #123050;
font-size: 24px;
text-transform: none;
font-weight: 600;
letter-spacing: 0;
margin: 0 0 43px;
}
h3.fancy a span {
color: #367eeb;
transition: 75ms ease-in color;
}
h3.fancy a:hover span {
color: #123050;
}
h4.fancy {
font-size: 17px;
font-weight: normal;
font-style: italic;
margin: 0 0 10px;
}
p.phone {
margin-bottom: 5px;
}
.category {
font-size: 13px;
font-style: italic;
margin-bottom: 30px;
}
p.feature-desc {
color: #414d62;
max-width: 465px;
margin: 0 auto;
margin-bottom: 40px;
}
a.button {
font-size: 14px;
font-weight: bold;
text-transform: uppercase;
letter-spacing: -0.5px;
border: 2px solid #ffaf3d;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
height: 37px;
width: 127px;
line-height: 37px;
text-decoration: none;
display: inline-block;
}
.button img {
display: none;
}
a.button-view {
background: #ffaf3d;
color: #fff;
}
a.button-info {
color: #ffaf3d;
width: 103px;
}
a.button-view:hover {
border-color: #ed9d2a;
background: #ed9d2a;
color: #fff;
}
a.button-info:hover {
background: #ffaf3d;
color: #fff;
}
.td-button {
font-size: 14px;
font-weight: bold;
text-transform: uppercase;
letter-spacing: -0.5px;
border: 2px solid #ffaf3d;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
height: 37px;
width: 127px;
line-height: 37px;
text-decoration: none;
display: inline-block;
}
.td-view {
background: #ffaf3d;
color: #fff;
}
.td-info {
color: #ffaf3d;
width: 103px;
}
.td-view a {
color: #fff;
height: 37px;
width: 127px;
line-height: 37px;
display: block;
text-align: center;
}
.td-info a {
color: #ffaf3d;
height: 37px;
width: 103px;
display: block;
}
.td-view:hover {
border-color: #ed9d2a;
background: #ed9d2a;
color: #fff;
}
.td-info:hover {
background: #ffaf3d;
color: #fff;
}
.td-view:hover a {
border-color: #ed9d2a;
background: #ed9d2a;
color: #fff;
}
.td-info:hover a {
background: #ffaf3d;
color: #fff;
}
a.small-button {
color: #152845;
font-size: 11px;
font-weight: bold;
text-transform: uppercase;
margin: 3px 0;
text-decoration: none;
}
img.separator {
width: auto;
height: 10px;
display: inline-block;
padding: 0;
margin: 0;
}
a.small-button-view {
}
a.small-button:hover {
color: #384c69;
}
.shadow {
box-shadow: 0px 5px 9px -5px rgba(0,0,0,0.2);
border-bottom: 1px solid #ddd;
padding-top: 37px;
padding-bottom: 35px;
}
.more {
padding-top: 22px;
padding-bottom: 47px;
text-align: center !important;
box-sizing: border-box;
display: inline-block;
margin-left: auto;
margin-right: auto;
}
.footer {
background: #123050;
}
.footer p {
color: #fff;
height: 45px;
padding-top: 10px;
margin: 0;
text-align: center;
}
.footer a {
color: #fff;
display: inline-block;
height: 40px;
}
.footer span {
padding-right: 5px;
}
.center, .text, h4, h5 {
text-align: center;
}
#media (max-width:599px) {
/* img.header-mobile {
display: inline !important;
height: auto;
width: auto;
}
img.header-desktop {
display: none;
height: 1px;
width: 1px;
}
*/
.one-column .contents {
text-align: center !important;
}
}
</style>
<!--[if (gte mso 9)|(IE)]>
<style type="text/css">
table {border-collapse: collapse;}
</style>
<![endif]-->
</head>
<body>
<center class="wrapper">
<div class="webkit">
<!--[if (gte mso 9)|(IE)]>
<table width="600" align="center">
<tr>
<td>
<![endif]-->
<table class="outer" align="center">
<tr>
<td class="header">
<a class="header-wrap" href="">logo</a>
</td>
</tr>
<tr>
<td>
<h2 class="featured">Featured Product</h2>
</td>
</tr>
<tr>
<td>
<p class="subtitle">Recommendations for <span class="bold">All Star Marketing</span></p>
</td>
</tr>
<tr>
<td class="full-width-image">
<img src="http://www.inventionhome.com/dev/hotlink/images/featured.jpg" width="600" alt="" />
</td>
</tr>
<tr>
<td class="one-column">
<table width="100%">
<tr>
<td style="padding-top: 37px; padding-bottom: 35px;" class="inner contents shadow">
<h3>Item Name</h3>
<p class="feature-desc">Item Name is an electronic warmer, featuring a lightweight design that enables easy transportation of a hot food item between locations.</p>
<div style="width: 243px; margin: 0 auto; text-align: center;">
<table width="100%; max-width: 243px;">
<tr>
<td class="td-button td-view" valign="middle" align="center">
<p style="display: block;">View Product</p><p style="display: block; height: 7px;"> </p>
</td>
<td>
<img src="http://www.inventionhome.com/dev/hotlink/images/5x20.png" alt="" />
</td>
<td class="td-button td-info" valign="middle" align="center">
<p style="display: block;">More Info</p><p style="display: block; height: 7px;"> </p>
</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td class="one-column">
<!--[if (gte mso 9)|(IE)]>
<table width="100%">
<tr>
<td width="50%" valign="top">
<![endif]-->
<div class="column">
<table width="100%">
<tr>
<td class="inner">
<table class="contents">
<tr>
<td style="padding-top: 31px;" class="inner contents suggest">
<h4 class="suggest" vspace="50">May we also suggest</h4>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
<!--[if (gte mso 9)|(IE)]>
</td><td width="50%" valign="top">
<![endif]-->
</td>
</tr>
<tr>
<td class="two-column">
<!--[if (gte mso 9)|(IE)]>
<table width="100%">
<tr>
<td width="50%" valign="top">
<![endif]-->
<div class="column">
<table width="100%">
<tr>
<td class="inner">
<table class="contents">
<tr>
<td class="image">
<img src="http://www.inventionhome.com/dev/hotlink/images/1.jpg" width="280" alt="" />
</td>
</tr>
<tr>
<td class="text">
<h5>Item Name</h5>
<p class="category">Kitchen</p>
<p>
<a class="small-button small-button-view" href="" title="">View Product</a>
<img class="separator" src="http://www.inventionhome.com/dev/hotlink/images/separator.jpg" alt="" />
<a class="small-button small-button-info" href="" title="">More Info</a>
</p>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
<!--[if (gte mso 9)|(IE)]>
</td><td width="50%" valign="top">
<![endif]-->
<div class="column">
<table width="100%">
<tr>
<td class="inner">
<table class="contents">
<tr>
<td class="image">
<img src="http://www.inventionhome.com/dev/hotlink/images/2.jpg" width="280" alt="" />
</td>
</tr>
<tr>
<td class="text">
<h5>Item Name</h5>
<p class="category">Kitchen</p>
<a class="small-button small-button-view" href="" title="">View Product</a>
<img class="separator" src="http://www.inventionhome.com/dev/hotlink/images/separator.jpg" alt="" />
<a class="small-button small-button-info" href="" title="">More Info</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
<tr>
<td class="two-column">
<!--[if (gte mso 9)|(IE)]>
<table width="100%">
<tr>
<td width="50%" valign="top">
<![endif]-->
<div class="column">
<table width="100%">
<tr>
<td class="inner">
<table class="contents">
<tr>
<td class="image">
<img src="http://www.inventionhome.com/dev/hotlink/images/two-column-01.jpg" width="280" alt="" />
</td>
</tr>
<tr>
<td class="text">
<h5>Item Name</h5>
<p class="category">Kitchen</p>
<a class="small-button small-button-view" href="" title="">View Product</a>
<img class="separator" src="http://www.inventionhome.com/dev/hotlink/images/separator.jpg" alt="" />
<a class="small-button small-button-info" href="" title="">More Info</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
<!--[if (gte mso 9)|(IE)]>
</td><td width="50%" valign="top">
<![endif]-->
<div class="column">
<table width="100%">
<tr>
<td class="inner">
<table class="contents">
<tr>
<td>
<img src="http://www.inventionhome.com/dev/hotlink/images/4.jpg" width="280" alt="" />
</td>
</tr>
<tr>
<td class="text">
<h5>Item Name</h5>
<p class="category">Kitchen</p>
<a class="small-button small-button-view" href="" title="">View Product</a>
<img class="separator" src="http://www.inventionhome.com/dev/hotlink/images/separator.jpg" alt="" />
<a class="small-button small-button-info" href="" title="">More Info</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
<tr>
<td class="one-column">
<table width="100%">
<tr>
<td class="inner contents more">
<h4 class="fancy">Want more products?</h4>
<h3 class="fancy">Visit <span>Us Here</span></h3>
<h4 class="fancy">Contact us at</h4>
<p class="center phone"><strong>1-888-888-7777</strong></p>
<p class="center"><a style="font-weight: bold;" href="mailto:marketing#inventionhome.com" title="email">marketing#company.com</a></p>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td style="background: #123050;" class="one-column footer">
<table width="100%">
<tr>
<td class="inner contents">
<p class="center"><span style="color: #fff;">Connect with us</span> <a class="social-icon" href="https://www.facebook.com/invention.home/" title=""><img src="http://www.inventionhome.com/dev/hotlink/images/facebook.png" alt="Facebook" /></a><a class="social-icon" href="https://twitter.com/Inventionhome" title=""><img src="http://www.inventionhome.com/dev/hotlink/images/twitter.png" alt="Twitter" /></a></p>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
</div>
</center>
</body>
</html>
I sent an email to my gmail account with your code in it, then viewed it on my phone and it looks absolutely perfect.
But as you said, if I use the chrome browser and log into to gmail it looks just how you described.
The reason is that GMAIL is stripping away your inline Stylesheet, when viewed in the browser. The original message is intact, but the client renders it without the stylesheets.
To get around the issue, you need to code the styles using the style attribute on the HTML Element, like this.
<table style="text-align:center">
Now your next question is how do I know this? I hit F12 in google chrome on my desktop, then view the email. This allows me to see the HTML and the Styles applied. Then within the Developer tools I click on the Toggle Device Toolbar then select the device I want to emulate in this case I choose iPhone 6+.
Then you can look at the html and adjust it and correct it within the tools.
I would also suggest you do some Inbox Testing, looking over the content of the email I think you're going to hit the spam box at a few locations.
I'm building a really simple template for an HTML email and all is great until you get to Outlook... Outlook seems to ignore all styling with regards to the max-width of the table so it spans the whole width of the email window.
I've tried a couple of things like wrapping the table within a div with a max-width but it just get's ignored.
The code is below, can anyone spot what's causing the problem:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional //EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta name="viewport" content="width=device-width">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Oppss, Hello</title>
<style>
/* -------------------------------------
GLOBAL
------------------------------------- */
* {
font-family: Calibri, 'Open Sans', "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
font-size: 100%;
line-height: 1.6em;
margin: 0;
padding: 0;
}
img {
max-width: 600px;
width: 100%;
}
body {
-webkit-font-smoothing: antialiased;
height: 100%;
-webkit-text-size-adjust: none;
width: 100% !important;
}
/* -------------------------------------
ELEMENTS
------------------------------------- */
a {
color: #348eda;
}
.btn-primary {
margin-bottom: 10px;
width: auto !important;
}
.btn-primary td {
background-color: #348eda;
border-radius: 25px;
font-family: Calibri, 'Open Sans', "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
font-size: 14px;
text-align: center;
vertical-align: top;
}
.btn-primary td a {
background-color: #348eda;
border: solid 1px #348eda;
border-radius: 25px;
border-width: 10px 20px;
display: inline-block;
color: #ffffff;
cursor: pointer;
font-weight: bold;
line-height: 2;
text-decoration: none;
}
.last {
margin-bottom: 0;
}
.first {
margin-top: 0;
}
.padding {
padding: 10px 0;
}
/* -------------------------------------
BODY
------------------------------------- */
table.body-wrap {
padding: 20px;
width: 100%;
}
table.body-wrap .container {
border: 1px solid #f0f0f0;
}
/* -------------------------------------
FOOTER
------------------------------------- */
table.footer-wrap {
clear: both !important;
width: 100%;
}
.footer-wrap .container p {
color: #666666;
font-size: 12px;
}
table.footer-wrap a {
color: #999999;
}
/* -------------------------------------
TYPOGRAPHY
------------------------------------- */
h1,
h2,
h3 {
color: #e6007e;
font-family: Calibri, 'Open Sans', "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
font-weight: 200;
line-height: 1.2em;
margin: 10px 0 10px;
}
h1 {
font-size: 74px;
padding: 0px 20px 0px 20px;
letter-spacing: -5px;
}
h2 {
font-size: 28px;
}
h3 {
font-size: 22px;
}
h3 {
font-size: 22px;
font-style: italic;
}
h4 {
font-size: 15px;
line-height: 21px;
font-style: italic;
margin: 0 0 20px 0;
color: #53565a;
padding: 0 20px 0 40px;
font-weight: 600;
font-family: Georgia, "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
}
p,
ul,
ol {
font-size: 14px;
font-weight: normal;
margin-bottom: 10px;
color: #53565a;
padding: 0 20px 0 40px;
font-family: Calibri, 'Open Sans', "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
}
ul li,
ol li {
margin-left: 5px;
list-style-position: inside;
}
/* ---------------------------------------------------
RESPONSIVENESS
------------------------------------------------------ */
/* Set a max-width, and make it display as block so it will automatically stretch to that width, but will also shrink down on a phone or something */
.container {
clear: both !important;
display: block !important;
Margin: 0 auto !important;
max-width: 600px !important;
}
.rounded-wrapper {
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px; /* future proofing */
-khtml-border-radius: 10px; /* for old Konqueror browsers */
background-color: #fff;
}
/* Set the padding on the td rather than the div for Outlook compatibility */
.body-wrap .container {
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px; /* future proofing */
-khtml-border-radius: 10px; /* for old Konqueror browsers */
background-color: #fff;
}
/* This should also be a block element, so that it will fill 100% of the .container */
.content {
display: block;
margin: 0 auto;
max-width: 600px;
}
/* Let's make sure tables in the content area are 100% wide */
.content table {
width: 100%;
}
</style>
</head>
<body bgcolor="#f6f6f6">
<div style="width: 600px !important; margin: 0 auto;">
<!-- body -->
<table class="body-wrap" bgcolor="#f6f6f6" width="600" style="max-width: 600px !important; margin: 0 auto;">
<tr>
<td></td>
<td class="container" bgcolor="#FFFFFF" style="border: 20px solid #009fe3">
<div class="rounded-wrapper">
<!-- content -->
<div class="content">
<img src="header.jpg" editable="true" width="560">
<table>
<tr>
<td>
<h1><img src="hello.jpg" style="width: 204px;"></h1>
<h4>Lorem</h4>
<p>Lorem</p>
<p>Lorem</p>
<p>Lorem</p>
<p style="padding: 10px 20px 0 20px !important"><img src="apply-now.jpg" style="width: 121px;"></p>
</td>
</tr>
</table>
</div>
<!-- /content -->
</div>
</td>
<td></td>
</tr>
</table>
<!-- /body -->
<!-- footer -->
<table class="footer-wrap" width="600" style="max-width: 600px !important; margin: 0 auto;">
<tr>
<td></td>
<td class="container">
<!-- content -->
<div class="content">
<table>
<tr>
<td align="center">
<p><unsubscribe>Unsubscribe</unsubscribe>.
</p>
</td>
</tr>
</table>
</div>
<!-- /content -->
</td>
<td></td>
</tr>
</table>
<!-- /footer -->
</div>
</body>
</html>
Outlook ignores max-width, you should wrap the email <table> with if microsoft outlook tags (mso).
<!--[if mso]>
<center><table><tr><td width="600">
<![endif]-->
<!-- MAIN EMAIL BODY -->
<table class="body-wrap" bgcolor="#f6f6f6" width="600" style="max-width: 600px !important; margin: 0 auto;">
<tr>
<td></td>
<td class="container" bgcolor="#FFFFFF" style="border: 20px solid #009fe3">
<div class="rounded-wrapper">
<!-- content -->
<div class="content">
<img src="header.jpg" editable="true" width="560">
<table>
<tr>
<td>
<h1><img src="hello.jpg" style="width: 204px;"></h1>
<h4>Lorem</h4>
<p>Lorem</p>
<p>Lorem</p>
<p>Lorem</p>
<p style="padding: 10px 20px 0 20px !important">
<a href="#" target="_blank" editable="true">
<img src="apply-now.jpg" style="width: 121px;">
</a>
</p>
</td>
</tr>
</table>
</div>
<!-- /content -->
</div>
</td>
<td></td>
</tr>
</table>
<!-- /body -->
<!-- footer -->
<table class="footer-wrap" width="600" style="max-width: 600px !important; margin: 0 auto;">
<tr>
<td></td>
<td class="container">
<!-- content -->
<div class="content">
<table>
<tr>
<td align="center">
<p>
<unsubscribe>Unsubscribe</unsubscribe>.
</p>
</td>
</tr>
</table>
</div>
<!-- /content -->
</td>
<td></td>
</tr>
</table>
<!-- END / MAIN EMAIL BODY -->
<!--[if mso]>
</td></tr></table></center>
<![endif]-->
I had the same issues here but got it solved when i wrote my CSS inline.
Try to write all your CSS inline.
I am unaware of the best practice to get my desired result. I have used tables here which have got me close to what I want.
The result doesn't have vertically centered text and I cannot figure out how. Tried using UL to get this but had no luck:
#hotspotbg table {
margin-top: 1px;
}
#hotspotbg table tr td {
border-right: 1px solid #ccc;
border-left: 1px solid #ccc;
}
#hotspotbg table tr td a {
text-align: center;
text-decoration: none;
display: block;
font-family: Tahoma, Geneva, sans-serif;
color: #fff;
height: 51px;
}
#hotspotbg table tr td a:hover {
background: #FFF;
color: #000;
}
<table width="900" height="51px" border="0" cellspacing="0" cellpadding="0" align="center">
<tr>
<td width="25%" height="51" valign="middle">Home
</td>
<td width="25%">Products
</td>
<td width="25%">Reviews
</td>
<td width="25%">Contact
</td>
</tr>
</table>
Setting the line-height of the child (a element in your case) to the height of the parent, will vertically align the text of the a element. See below for more information.
.wrapper {
height: 70px;
width: 100%;
background: red;
overflow: hidden;
}
.wrapper a {
/*NOT AFFECTING THE VERTICAL ALIGN*/
display: block;
float: left;
height: 70px;
width: 50%;
color: #fff;
text-align: center;
/*AFFECTING VERTICAL ALIGN*/
line-height: 70px;
}
<div class="wrapper">
test
nice
</div>