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.
Related
Im sending a mail from a template using Mailgun. But renders incorrectly on Gmail.
Im not using any style tags or any complex css.
ps: im not sure how much text i should add to be accpeted.
Here is the html template
Template:
<html xmlns="http://www.w3.org/1999/xhtml" style="margin:0;padding:0;">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Communication</title>
</head>
<body style="margin:0;padding:0;">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="center" valign="top" bgcolor="#fff" style="background-color:#fff;">
<table width="600" border="0" cellspacing="0" cellpadding="0" style="border: solid 1px #000;margin-top:60px;">
<tr>
<td align="left" valign="top" bgcolor="#001529" style="background-color:#001529; font-family:Arial, Helvetica, sans-serif; padding:10px;">
<div style="font-size:36px; color:#fff;">
<b>FORGOT YOUR PASSWORD?</b>
</div>
</td>
</tr>
<tr>
<td align="left" valign="top" bgcolor="#fff" style="background-color:#fff;">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="left" valign="middle" style="color:#525252; font-family:Arial, Helvetica, sans-serif; padding:10px;">
<div style="font-size:16px;">
Dear {0},
</div>
<div style="font-size:16px;">
<p>A request has been received to reset your password for your -- account. Please click the button below to reset your password.</p>
<center>
<button type="button" title="Confirm Account Registration" style="background: #00415a;border:1px solid #00415a;">
<a href="{1}" style="font-size:22px; padding: 6px 12px; color: #f2faff;text-decoration:none;display:inline-block">
Reset Password Now
</a>
</button>
</center>
<p style="font-size:16px;">If you did not make this request please igonore this email.</p>
</div>
</td>
</tr>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="left" valign="middle" style="padding:15px; background-color:#00415a; font-family:Arial, Helvetica,sans-serif;font-size:12px; color:#f2faff;">
<p>Regards<br/>
-- © {2}</p>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
This is how it renders in Gmail:
Gmail:
Give a line-height to both title and button text, and should fix it.
Also i recommend against using margin-top or bottom in emails/tables but always go with padding instead. For some reason is more compatible. If you need some space above for instance, create a empty div above the element and give it a height.
Minifying the template seemed to fix the issue.
Bear in mind this is not a Gmail issue rather a Mailgun issue.
I am working on HTML email template. There is a small spacing below the image and I am not able to get rid of it. And this space is caused by the DOCTYPE is all I know.
Sample Image
I tried everything possible like:
Adding style="display:block" to the image.
Setting the "Align" Attribute to "absmiddle", "absbottom", "texttop", "middle", "left", "right" and "top".
Setting the Line-Height to 10px or Less by placing the image in div.
Setting Font-Size to 2px or Less.
Using Float:Left or Float:Right.
But nothing seemed to work for me. Can anyone help me figure it out please ?
I having been trying to figure it out for the past two days :P
I have attached the sample code below:
<div style="background:#ffffff;background-color:#ffffff;margin:0px auto;max-width:600px;">
<table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="background:#ffffff;background-color:#ffffff;width:100%;">
<tbody>
<tr>
<td style="direction:ltr;font-size:0px;padding:0px;text-align:center;">
<table role="presentation" border="0" cellpadding="0" cellspacing="0">
<tr>
<td class="" style="vertical-align:top;width:600px;">
<div class="mj-column-px-600 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%">
<tr>
<td align="center" style="font-size:0px;padding:0px;word-break:break-word;">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" style="border-collapse:collapse;border-spacing:0px;">
<tbody>
<tr>
<td style="width:600px;">
<a href="#">
<img src="./assets/img/hero#3x.png" style="border:0;display:block;outline:none;text-decoration:none;height:auto;width:100%;font-size:13px;" />
</a>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
</td>
</tr>
</tbody>
</table>
</div>
I am coding a custom email template HTML/CSS and I need to replicate the attached image.
My question is about the blue background color element, which goes beyond two table rows, one would be the "Welcome to the family", and the other would contain the video.
How can I implement that?
<!-- BEGIN MODULE: BODY CONTENT // -->
<table border="0" cellpadding="0" cellspacing="0" width="100%" align="center" valign="top">
<tr>
<td valign="top" style="background-color:#1D75B9; border:0;">
<h2 style="margin:40px 20px; text-transform:capitalize; text-align:center;">Welcome to the family!</h2>
</td>
</tr>
<tr>
<td valign="top">*|YOUTUBE:[$vid=fj77lSG6Bl8, $max_width=500, $ratings=N, $views=N, $border=N, $title=N, $trim_border=N]|*
</td>
</tr>
</table>
<!-- // END MODULE: BODY CONTENT -->
Any example that makes the same thing would be helpful to me.
thank you
You can do like this :
<body style="margin:0px; padding:0px;">
<div align="center">
<table border="0" cellpadding="0" cellspacing="0" width="100%" align="center" valign="top">
<tr>
<td valign="top">
<img src="WvLArjpg6991210.png">
</td>
</tr>
<tr>
<td valign="top">
<img src="second.png" width="461">
</td>
</tr>
</table>
</div>
</body>
You have cut images into pieces and use in <tr><td><img src></td></tr>
Trying to replicate this sort of design/structure:
Notice Below the two boxes on one side of the table and the one big one on the other!
How would I achieve this using table css? Here's my current code, which is vertically stacked:
<body>
<table border="0" cellpadding="0" cellspacing="0" height="100%" width="100%" id="bodyTable">
<tr>
<td align="center" valign="top">
<table border="0" cellpadding="20" cellspacing="0" width="600" id="emailContainer">
<tr>
<td align="center" valign="top">
<table border="0" cellpadding="20" cellspacing="0" width="100%" id="emailHeader">
<tr>
<td align="center" valign="top">
This is where my body content goes.
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td align="center" valign="top">
<table border="0" cellpadding="20" cellspacing="0" width="100%" id="emailBody">
<tr>
<td align="center" valign="top">
This is where my body content goes.
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td align="center" valign="top">
<table border="0" cellpadding="20" cellspacing="0" width="100%" id="emailFooter">
<tr>
<td align="center" valign="top">
This is where my body content goes.
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
Any idea?:
Steven is right, in theory:
the “correct” way to center a table using CSS. Conforming browsers ought to center tables if the left and right margins are equal. The simplest way to accomplish this is to set the left and right margins to “auto.” Thus, one might write in a style sheet:
table
{
margin-left: auto;
margin-right: auto;
}
But the article mentioned in the beginning of this answer gives you all the other way to center a table.
An elegant css cross-browser solution:
This works in both MSIE 6 (Quirks and Standards), Mozilla, Opera and even Netscape 4.x without setting any explicit widths:
div.centered
{
text-align: center;
}
div.centered table
{
margin: 0 auto;
text-align: left;
}
<div class="centered">
<table>
…
</table>
</div>
See this post
edit thats center this is horizontal just change the neccecery css or see here!
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.