I'm working on an html email signature and am pulling my hair out trying to get it to work with outlook 2007, 2010 and 2013. In every other email client it looks just as I want it to. Here's what I'm going for:
Here's what I'm seeing in Outlook 2007, 2010 and 2013:
The second cell alignment is off and the left border on the table isn't visible. Can any figure out what I'm doing wrong based on my code pasted below? Thanks so much in advance!
<meta name="format-detection" content="telephone=no">
<table style="border-collapse:collapse;margin-left:-8px;border-left: 7px solid #9d2235;" width="100%" cellpadding="15px">
<tbody>
<tr>
<td width="100px" bgcolor="#e5e5e5" style="border: 3px solid #e5e5e5;vertical-align: top;padding-left:15px;padding-right:15px;">
<img src="https://canada.ntm.org/files/email-sig-files/NTMC%20Logo%20red.png" alt="NTMC Canada" width="100" height="46" />
</td>
<td bgcolor="#e5e5e5" style="border: 3px solid #e5e5e5;text-align:left;color:#333;font-family:'Helvetica Neue','HelveticaNeue',Helvetica,Arial,'Lucida Grande',sans-serif;font-weight: 300;vertical-align: top;font-size:14px;padding-bottom:7px;padding-top:7px">
<strong>Norm Copeland</strong><br>
<a style="text-decoration:none;color:#333" href="mailto:norm_copeland#ntm.org">norm_copeland#ntm.org</a><br>
844-855-6862 x213<br>
<a style="text-decoration:none;color:#9d2235" href="https://canada.ntm.org">canada.ntm.org</a>
</td>
</tr>
</tbody>
</table>
1.Outlook does not support margin.
2.Use 600px for the width of table.
Fixed link
HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style type="text/css">
*
{
padding:0px;
margin:0px;
font-family:'Helvetica Neue','HelveticaNeue',Helvetica,Arial,'Lucida Grande',sans-serif;
}
a
{
text-decoration:none;
}
</style>
<title>Outlook</title>
</head>
<body>
<table style="margin: 0 auto;" width="600px" height="85px" cellpadding="0px" cellspacing="0px" border="0" align="center">
<tbody>
<tr>
<td width="7px" bgcolor="#9d2235"></td>
<td width="160px" bgcolor="#e5e5e5" style="text-align:center;">
<img src="https://canada.ntm.org/files/email-sig-files/NTMC%20Logo%20red.png" alt="NTMC Canada" width="100" height="46" />
</td>
<td width="433px" bgcolor="#e5e5e5" style="text-align:left;color:#333;font-weight: 300;font-size:14px;">
<strong>Norm Copeland</strong><br>
<a style="text-decoration:none;color:#333" href="mailto:norm_copeland#ntm.org">norm_copeland#ntm.org</a><br>
844-855-6862 x213<br>
<a style="text-decoration:none;color:#9d2235" href="https://canada.ntm.org">canada.ntm.org</a>
</td>
</tr>
</tbody>
</table>
</body>
</html>
Related
everyone,
I have designed a quick html doc that will be incorporated in Outlook (hence the need to have inline styles inside the HTML). Everything is looking fine on Chrome and on Safari, but IE11 is showing the below problem. The table border is messed up, like it has two colours inside it, instead of only one, like the good version on Chrome. Also, Firefox seems to be ignoring the table set for the colour and showing a beveled version of it... Does anyone have an idea about this? I'm pasting example image and my code below.
image depicting bug in IE against good version on Chrome
<!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" />
<title>Xmas Card</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
</head>
<body style="margin: 0; padding: 60px 300px 60px 300px; background-color:#d2d2d1">
<table>
<tr>
<div style="text-align:center; margin-bottom:20px">
<span style="font-family:sans-serif; font-size:10pt">If you have problems opening this message, read online here</span>
</div>
</tr>
</table>
<table border="8" rules="none" bordercolor="#8a7e70" cellpadding="0px" cellspacing="0" align="center" width="600px">
<tr style="background-color:#ffffff" align="center">
<td>
<img src="#" alt="corners top">
</td>
</tr>
<tr style="background-color:#ffffff" align="center">
<td>
<img src="#" alt="logo">
</td>
</tr>
<tr style="background-color:#ffffff" align="center">
<td>
<h1 style="font-size:24pt; font-family:sans-serif; color:#aa212f; text-align:center">Season's Greetings</h1>
</td>
</tr>
<tr style="background-color:#ffffff" align="center">
<td>
<img src="#" alt="Xmas branches">
</td>
</tr>
<tr style="background-color:#ffffff" align="center">
<td>
<img src="/#" alt="button">
</td>
</tr>
<tr style="background-color:#ffffff" align="center">
<td>
<img src="#" alt="corners bottom">
</td>
</tr>
</table>
</body>
</html>
Thank you so much for your kindness.
When you want to set the table's border attribute, you should keep in mind that the border-style is required.
The definition and usage of CSS border you could refer to the following W3C document:https://www.w3schools.com/cssref/pr_border.asp
I suggest that you could set the border-color, border-style and border-width separately like:
<table style="border-color: #8a7e70; border-style: solid; border-width:8px;" rules="none" cellpadding="0" cellspacing="0" align="center" width="600">...</table>
Or you could write three attributes together:
<table style="border:8px solid #8a7e70;" rules="none" cellpadding="0" cellspacing="0" align="center" width="600">...</table>
the running result in Chrome and IE
I'm working on HTML email template.
I created it with a few nested tables.
I found that there are spaces to the right of the images in Outlook.
So I tried to fix this, but it doesn't fix.
Finally I create a simple template depending on colored images which I create to make it possible identifying the table cells.
Here's my code (Please copy it and test on Outlook):
<!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" />
<title>HTML Email Design Template</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<style media="all" type="text/css">
table td {
border-collapse: collapse;
}
img { padding: 0; margin: 0; display:block;}
</style>
</head>
<body style="margin: 0; padding: 0;" bgcolor="#cccccc">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td>
<table bgcolor="#ffffff" align="center" border="0" cellpadding="0" cellspacing="0" width="600" height="600" style="border-collapse: collapse; border: 1px solid #000000;">
<tr>
<td align="center" style="padding: 40px 0 40px 0; font-size: 26px; font-weight: bold; font-family: Arial, sans-serif;">
First Row
</td>
</tr>
<tr>
<td>
<table width="600" height="600" border="0" cellpadding="0" cellspacing="0" bgcolor="#08336d">
<tr>
<td width="300" height="600">
<img src="http://2a-web.com/email/test/images/img-01.jpg" width="300px" height="600px" border="0" style="display:block; line-height:0; font-size:0;"/>
</td>
<td width="300" height="600">
<table width="300" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="300" height="300">
<img src="http://2a-web.com/email/test/images/img-02.jpg" width="300px" height="300px" border="0" style="display:block; line-height:0; font-size:0;"/>
</td>
</tr>
<tr>
<td width="300" height="300">
<table width="300" height="300" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="150" height="300">
<img src="http://2a-web.com/email/test/images/img-03.jpg" width="150px" height="300px" border="0" style="display:block; line-height:0; font-size:0;"/>
</td>
<td width="150" height="300" bgcolor="#ffc33c">
<table width="150" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="150" height="150">
<img src="http://2a-web.com/email/test/images/img-04.jpg" width="150px" height="150px" border="0" style="display:block; line-height:0; font-size:0;"/>
</td>
</tr>
<tr>
<td width="150" height="150" bgcolor="#16b512">
<table width="150" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="75" height="150">
<img src="http://2a-web.com/email/test/images/img-05.jpg" width="75px" height="150px" border="0" style="display:block; line-height:0; font-size:0;"/>
</td>
<td width="75" height="150">
<img src="http://2a-web.com/email/test/images/img-06.jpg" width="75px" height="150px" border="0" style="display:block; line-height:0; font-size:0;"/>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td align="center" style="padding: 40px 0 40px 0; font-size: 26px; font-weight: bold; font-family: Arial, sans-serif;">
Third Row
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
So, how can I remove the gap between cells ?
I'm appreciating your help.
After taking a look and testing in outlook with your provided HTML, I believe I know what you are experiencing, and it has to due with images.
First off, all the images in your HTML are not available so I had to test with my own images. These is where, I noticed the issue. My images were causing to email to expand beyond the specified width of 600. This is because for outlook if you are going to use width and height attributes for a element, you leave off the px part, it's assumed. I.E. 150 NOT 150px. As soon as I did everything snapped into place, no spacing issue.
I was only able to reproduce the vertical spacing/gapping on the right of the images after I forced one of the bottom images to have an exaggerated width, i.e. it's currently set to 150(same as the containing td), so I set it to 155. And bam! Got the spacing.
Meaning that your table layout/css is fine for the most part, outlook is probably freaking out because you are adding the px part. Either remove it or set the width/height with inline styling instead.
I have tried adding cellspacing="0" cellpadding="0" . Does not fix the issue in email clients.
Here is a image of the spacing in gmail:
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Openx Webinar</title>
</head>
<body>
<div style="margin:0;padding:0;font-family:Arial,Helvetica,sans-serif">
<table align="center" width="600" cellspacing="0" cellpadding="0" style="font-family:Arial,Helvetica,sans-serif" >
<!-- Header -->
<thead>
<tr>
<td id="header" width="600" valign="top" align="left"><img src="http://openx.dev.limusdesign.com/emails/webinar/images/header.png" alt="OpenX Webinar Series"/></td>
</tr>
<tr>
<td id="banner" width="600" valign="top" align="left"><img src="http://openx.dev.limusdesign.com/emails/webinar/images/banner.png" alt="Banner Image"></td>
</tr>
<tr>
<td width="600" height="20" valign="top" align="left"></td>
</tr>
</thead>
</table>
</div>
</body>
<html>
Any advice on how I can fix this? NOTE: this is for HTML email.
UPDATED HEADER CODE:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Openx Webinar</title>
<style type="text/css">
div, p, a, li, td { -webkit-text-size-adjust:none; }
</style>
</head>
<body>
<div style="margin:0;padding:0;font-family:Arial,Helvetica,sans-serif">
<table align="center" width="600" cellspacing="0" cellpadding="0" style="font-family:Arial,Helvetica,sans-serif" >
<!-- Header -->
<thead>
<tr>
<td id="header" width="600" valign="top" align="left">
<img src="http://openx.dev.limusdesign.com/emails/webinar/images/header.png" alt="OpenX Webinar Series" height="65" style="display:block">
</td>
</tr>
<tr>
<td id="banner" width="600" valign="top" align="left">
<img src="http://openx.dev.limusdesign.com/emails/webinar/images/banner.png" alt="Banner Image" height="180" style="display:block">
</td>
</tr>
<tr>
<td width="600" height="20" valign="top" align="left"></td>
</tr>
</thead>
</table>
</div>
</body>
</html>
Fixed the issue by adding a style="display:block" to images.
Change your code to this:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Openx Webinar</title>
</head>
<body>
<div style="padding:0;font-family:Arial,Helvetica,sans-serif">
<table align="center" width="600" cellspacing="0" cellpadding="0" border="0" style="font-family:Arial,Helvetica,sans-serif" >
<tr>
<td id="header" width="600" valign="top" align="left" style="padding:0px;outline:none;border:none;">
<img src="http://openx.dev.limusdesign.com/emails/webinar/images/header.png" alt="OpenX Webinar Series" style="padding:0px;outline:none;border:none;"/>
</td>
</tr>
<tr>
<td id="banner" width="600" valign="top" align="left" style="padding:0px;outline:none;border:none;">
<img src="http://openx.dev.limusdesign.com/emails/webinar/images/banner.png" alt="Banner Image" style="padding:0px;outline:none;border:none;">
</td>
</tr>
<tr>
<td width="600" height="20" valign="top" align="left"></td>
</tr>
</table>
</div>
</body>
</html>
To remove the space between the tr tags simply add border-collapse: collapse; to your table tag. Like for a table within an email you can add it as:
<table style="border-collapse: collapse;">
You can change display option for <td></td> that contains the first image:
thead tr:first-child td
{
display: block;
height:65px;
}
or for the img itself
thead tr:first-child td img
{
display: block;
}
Start by putting your table in another table that has the width set to 100%.
interior table set to 600 and is center holds all contents
no longer will you need to put width or align on every td. That is bloating your email.
block works. As does valign top.
Get better results!
Sorry, Get rid of Div. Tables are just that. s
Don't use classes.
Cellpadding and Cellspacing are Dynamite and a torch. You're going to blow stuff up.
my friend developer has some problem with an html email. The big problem I can see on my mail app is a big margin-top he didn't put in the css and two little margins (right and left) with the html margin: 0;
Do you have something to suggest?
Thank you very much.
<html>
<head>
<style type="text/css">
html,body{margin:0;padding:0; background-color:#f6f6f6}
table { width: 100%; height: 100%; }
span{font-family:Helvetica, Arial, sans-serif; line-height:1.7em;}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento senza titolo</title>
</head>
<body>
<table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0" bgcolor="#f6f6f6">
<tr height="95px" valign="middle" >
<td width="100%" align="left" style="padding:15px"><img src="logo_email.png" width="154" height="46" alt="good" /></td>
</tr>
<tr bgcolor="#eeeeee" height="95px" valign="middle">
<td width="100%" colspan="2" style="padding:15px"><span style="font-size:18px;color:#414042">Thank you for subscribe our newsletter.</span><br /><span style="font-size:13px;color:#414042">The Team</span></td>
</tr>
<tr height="auto" valign="top">
<td width="100%" colspan="2" style="padding:15px"><span style="font-size:10px;color:#6d6e71">You are receiving Activity Notifications emails.</span></td>
</tr>
</table>
</body>
</html>
The layout looks fine. There is an image on top that has a relative link and may not be showing - could this be the "margin-top" you are referring to?
I am looking to have a picture, name of the person, links to photos, biography, life, tell about you! a map tag where the location will be shown, also at the right, there will be details like like, Born: Nationality: Ocupation, Trakcs:
Can any body help me with a semantic html structure style with CSS Please use http://jsfiddle.net/ to build it online Thanks.
<!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" />
<title>Your Yard Sales onproducts.line</title>
<link rel="stylesheet" href="" type="text/css" media="screen" />
</head>
<style type="text/css" >
#space {
margin-bottom:1.2em;
}
ul {
width: 100%;
float: left;
margin: 0 0 3em 0;
padding: 0;
list-style: none;
background-color: #f2f2f2;
border-bottom: 1px solid #ccc;
border-top: 1px solid #ccc; }
li {
float: left; }
li a {
display: block;
padding: 8px 15px;
text-decoration: none;
font-weight: bold;
color: #069;
border-right: 1px solid #ccc; }
</style>
<body>
<ul>
<li>Home</li>
<li>Members</li>
<li>Rollers</li>
<li>Info</li>
</ul>
<br/>
<br/>
<br/>
<br/>
<div id="space">
Roberto Kirt
</div>
<!--<ul><li>'.$name2.'</li>
<li>'.$name2.'</li>
<li>'.$name2.'</li></ul>-->
<table width="1768" cellpadding="0" cellspacing="0" border="0.5">
<tr>
<td width="493" height="149"><img style="border:#666 1px solid;" src="images/profileimages/8.jpg" alt="Angel Pilier "align="left" width="100" height="130" border="1" /></td>
<td width="1275"><table width="880" border="0.5" cellpadding="0" cellspacing="0">
<tr>
<td width="145" height="31"> </td><td></td>
</tr>
<tr>
<td height="44" align="right">Born:</td><td width="735">1975-11-23</td>
</tr>
<tr align="right">
<td height="38"></td>
>
</tr>
<tr>
<td height="36" align="right">Died:</td><td width="735">0000-00-00</td>
</tr>
</table></td>
</tr>
<tr><td height="31" colspan="2"> </td></tr>
<tr>
<td height="31">Photos</td>
<td rowspan="7"><table width="885" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="145" height="31" align="right"> Nationality:</td><td width="740"></td>
</tr>
<tr align="right">
<td height="25"> </td>
</tr>
<tr>
<td height="24" align="right">Spouse:</td><td width="740"></td>
</tr>
<tr align="right">
<td height="28"> </td>
</tr>
<tr>
<td height="27" align="right">Ocupation:</td><td width="740">Pianist</td>
</tr>
<tr align="right">
<td height="27"> </td>
</tr>
<td height="27" align="right">Childhood:</td><td width="740"></td>
</tr>
<tr align="right"><td height="27"> </td>
</tr>
<td height="27" align="right">Tracks:</td><td width="740"></td>
</tr>
<tr align="right">
<td height="119"> </td>
</tr>
</table>
</td>
</tr>
<tr>
<td height="25"> Biography</td>
</tr>
<tr>
<td height="25"> Life</td>
</tr>
<tr>
<td height="26">Tell an Anecdote</td>
</tr>
<tr>
</tr>
<tr>
</tr>
<tr>
<td><iframe width="700" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.com/maps?f=q&source=s_q&hl=en&geocode=&q=Rochester,+New York,+United States&sspn=0.119541,0.110378&ie=UTF8&hq=&hnear=Rochester,+New York,+United States&z=14&output=embed"></iframe></td>
<!--<img src="images/foto.jpg" alt="nada" width="422" height="165" />-->
</tr>
</table>
</body>
</html>
#fello, there lot of things in your layout
1) use external stylesheet as much as possible because if you written your css in the head of html page it's make that html page heavy to load & you have to right new css in every new page.
2) try to avoid using table based structure as much as possible .Use div instead of table because it's flexible to use check this for more.
3)didn't use <br/> to much .If you want to give spacing you can give with margin & padding .
4)ever browser have applied some there own default properties .So, avoid it you have to use reset sheet .
5)for semantic markup check these links :
a) http://www.html-and-css-tutorial.com/tutorial-3.html
b) http://css-tricks.com/snippets/html/html5-page-structure/
c) http://themeshaper.com/2009/06/24/creating-wordpress-theme-html-structure-tutorial/
As far as I judge your question, use of some CSS framework like twitter-bootstrap will give you a very good and responsive layout in very less time :)
You might want to use hcard. This and other microformats are described here.