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
Related
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>
I am integrating an e-mail and it is tearing my hair out! My e-mail has a centered layout (I am currently using Ink's hero template). The problem is that my layout is not centered in Outlook Web app because this client does not support margin (so I cannot center my layout with margin: 0 auto;).
Here is a sample of 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"/>
</head>
<body>
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td class="header" valign="top" align="center">
<table class="container" width="580" border="0" cellpadding="0" cellspacing="0" align="center">
<tr>
<td class="wrapper last" valign="top" style="padding-top:10px;">
<img src="http://www.numeezy.com/img/numeezy-header.png" alt="Numeezy, l'hébergement professionel haute performance"/>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td valign="top" align="center">
<table class="container" width="580" align="center">
</table>
</td>
</tr>
</table>
</body>
</html>
So, Outlook is not well rendering my e-mail because all my align="center" attributes are removed by Outlook.
<div style="width:100%;margin:0;padding:0;">
<table width="100%" border="0" cellspacing="0" cellpadding="0" style="border-collapse:collapse;border-spacing:0;width:100%;text-align:justify;padding:0;">
<tbody>
<tr style="padding:0;">
<td valign="top" style="background-color:#17303E;padding:0;">
<span style="background-color:#17303E;">
<table width="580" border="0" cellspacing="0" cellpadding="0" style="border-collapse:collapse;border-spacing:0;width:580px;text-align:justify;margin-top:0;margin-bottom:0;padding:0;">
<tbody>
<tr style="padding:0;">
<td valign="top" style="padding:10px 0 0 0;">
<img blockedimagesrc="http://www.numeezy.com/img/numeezy-header.png" alt="Numeezy, l'hébergement professionel haute performance">
</td>
</tr>
</tbody>
</table>
</span>
</td>
</tr>
<tr style="padding:0;">
<td valign="top" style="padding:0;">
<table width="580" style="border-collapse:collapse;border-spacing:0;width:580px;text-align:justify;margin-top:0;margin-bottom:0;padding:0;">
</table>
</td>
</tr>
</tbody>
</table>
</div>
My table which have a width of 580px should be centered vertically. I can "emulate" it in the developer tool by removing the margin: 0; style and adding an align="center" attribute. It may be a lead!
Thank you in advance for your help!
EDIT: Edited my code with the last version
Try putting align="center" on the child element (the table you are trying to align). Outlook can work slightly differently with align to other clients. It treats it like float on the element itself, while others treat it like text:align; on the parent.
Update:
You have a lot of unnecessary stuff in there. Here is a clean example:
<style>
table td {border-collapse: collapse;}
</style>
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td valign="top" align="center" bgcolor="#17303E">
<table width="580" align="center" border="0" cellpadding="0" cellspacing="0" bgcolor="#330000"><!-- colored so you can see it-->
<tr>
<td valign="top" style="padding-top:10px;"><!-- left aligned within centered panel -->
<img blockedimagesrc="..." alt="...">
</td>
</tr>
<tr>
<td valign="top" align="center" style="padding-top:10px;"><!-- center aligned within centered panel -->
<img blockedimagesrc="..." alt="...">
</td>
</tr>
</table>
</td>
</tr>
</table>
Here is an example basic setup to start your email with. It includes all the must have email normalization and a centered panel + independent forwarding background color.
<element align='center'> has also caused me trouble in the past. The way around it would be to use position: absolute; top: 50%; bottom: 50%; or something like that, in which case you would need to set your table a height/width in percentage.
You could even use margins like you mentioned: margin-top: 50%; margin-bottom: 50%.
Hope I could help.
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?
This is only happening in IE, when I place the table labelled -- middle table -- into this HTML, the alignment of the parent table gets messed up and the width="250" on the first TD gets ignored it seems. (The select box should start at 250 pixels from the left of the page, however it doesn't. Remove the table labelled -- middle table - and the alignment works as it should. Why is this happening?
<!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" lang="en" xml:lang="en">
<head>
<title>asdf</title>
</head>
<body>
<table id="tbl_container" width="1300" cellpadding="0" cellspacing="0" border="1">
<tr style="height: 50px;">
<td align="center" style="width: 250px;"><img src="logo.gif" alt="asdf" /></td>
<td valign="middle" align="left" style="text-align: left;"><span class="bold">asdf: </span><select class="form_select_"><option value="asdf">asdf</option></select></td>
</tr>
<tr id="row_container" align="left" valign="top">
<td colspan="2">
<!-- middle table -->
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td style="width: 250px;" align="left" valign="top" id="nav_container"></td>
<td style="width: 25px;" align="left" valign="top"></td>
<td id="dat_container" style="width:1000px;" align="left"></td>
</tr>
</table>
</td>
</tr>
<tr style="height: 50px;">
<td></td>
<td></td>
</tr>
</table>
</body>
</html>
According to the W3C Validator, your XHTML contains six errors. More specifically, the width="250" attribute that gets ignored is not valid. The main problem with invalid tags is that you no longer get a coherent cross-browser rendering since browsers are forced to use workarounds. Try to fix this first. As a general rule, layouts should be accomplished via CSS.
You are taking an extremely archaic approach to web site layout. Using tables to lay out anything in a web site that is not tabular in nature is a MASSIVE no-no. You should be using standards-compliant CSS and HTML (DIVs, Spans, etc.) to lay your site out. Tables are treated differently by each browser, and it can be extremely difficult to get a consistent, functional, easy to maintain layout with them.
I hate to say it, but I really can't bring myself to help you resolve your current problem using tables. My only answer is restart, use DIV tags and CSS, and enjoy the bliss that is standards-compliant layout. (Do NOT use the style="" attribute to set all your CSS, use a proper stylesheet.)
1000 + 250 + 25 > 1250
your middle table is too wide
When all is said and done the short answer is...because IE can be very retarted. That said here is a work around:
First you issue simplified is this:
<!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" lang="en" xml:lang="en">
<head></head>
<body>
<table width="1000" border="1">
<tr>
<td width="250" style="background-color:blue;">a1</td>
<td style="background-color:green;" >a</td>
</tr>
<tr>
<td colspan="2" style="background-color:red;">
<table>
<tr>
<td width="1000">c2</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
Notice your 2nd td in your 1st row has no width specified. If you know what the width should be then you can work around this issue like so:
<!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" lang="en" xml:lang="en">
<head></head>
<body>
<table width="1000" border="1">
<tr>
<td width="250" style="background-color:blue;">a1</td>
<td width="750" style="background-color:green;" >a</td>
</tr>
<tr>
<td colspan="2" style="background-color:red;">
<table>
<tr>
<td width="1000">c2</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
I do agree with what others have said, that css is the way to go, but that was not your question. Hopefully this helps.