According to what email on acid is showing me I am see this where I have some links and text being centered in an email
But here is what it is supposed to look like, most other email clients are showing this properly
The table that these links are in looks like this
<table class="row bg-white">
<tr>
<td class="wrapper last">
<table class="twelve columns footer">
<tr>
<td class="center">
<center>
<a href="#">
<img src="https://gallery.mailchimp.com/af37d5e0e2ad3fbc1fc35c915/images/d86f2f3e-fb48-4dac-a901-fb2c6e764ded.png" />
</a>
<a href="#">
<img src="https://gallery.mailchimp.com/af37d5e0e2ad3fbc1fc35c915/images/83304962-c8e5-4e51-95cd-ffbb46fd9386.png" />
</a>
<a href="#">
<img src="https://gallery.mailchimp.com/af37d5e0e2ad3fbc1fc35c915/images/8fbfc755-58dd-4ad3-9df6-31df23b9b4e0.png" />
</a>
<a href="#">
<img src="https://gallery.mailchimp.com/af37d5e0e2ad3fbc1fc35c915/images/acbdc917-00a3-421b-a56f-2b03d3f7c72e.png" />
</a>
<span class="copy">© 2015. All Rights Reserved.</span>
</center>
</td>
<td class="expander"></td>
</tr>
</table><!-- /twelve columns -->
</td>
</tr>
</table><!-- /row -->
I'm using Zurb's ink framework to build this, and here are the css rules I added
.footer a {
display: inline-block;
}
.footer span.copy {
display: block;
margin-top: 6px;
font-size: 10px;
}
.footer td.center {
padding: 30px 0;
}
I'm adding this JSBin link since there is a lot of CSS manipulation happening from the Ink framework
https://jsbin.com/pewoluwapo/edit?html,output
UPDATE:
After trying Gortonington's answer I now get this in outlook
Add the following rule: http://jsfiddle.net/L9grd3ja/. Tables, by default, shrinkwrap their contents.
table {
width: 100%;
}
All email clients have different support just like web browsers, this would suggest outlook doesn't support the center tag.
I would suggest removing the center tag and using a widely supported method instead (align="center"). Also remember to use © instead of the actual symbol as it's not always supported either! See more HTML codes here: http://www.ascii.cl/htmlcodes.htm
<table class="row bg-white">
<tr>
<td class="wrapper last">
<table class="twelve columns footer">
<tr>
<td class="center" align="center">
<a href="#">
<img src="https://gallery.mailchimp.com/af37d5e0e2ad3fbc1fc35c915/images/d86f2f3e-fb48-4dac-a901-fb2c6e764ded.png" />
</a>
<a href="#">
<img src="https://gallery.mailchimp.com/af37d5e0e2ad3fbc1fc35c915/images/83304962-c8e5-4e51-95cd-ffbb46fd9386.png" />
</a>
<a href="#">
<img src="https://gallery.mailchimp.com/af37d5e0e2ad3fbc1fc35c915/images/8fbfc755-58dd-4ad3-9df6-31df23b9b4e0.png" />
</a>
<a href="#">
<img src="https://gallery.mailchimp.com/af37d5e0e2ad3fbc1fc35c915/images/acbdc917-00a3-421b-a56f-2b03d3f7c72e.png" />
</a><br/>
<span class="copy">© 2015. All Rights Reserved.</span>
</td>
<td class="expander"></td>
</tr>
</table><!-- /twelve columns -->
</td>
</tr>
</table><!-- /row -->
I think some MSO conditional should solve it for Outlook. You also want to make sure to inline prior to uploading as well (just in case you don't already) to make sure Gmail, etc can read all your CSS.
Below is just MSO conditional and not inlined:
<!doctype html>
<html>
<head>
<style>
.footer a {
display: inline-block;
}
.footer span.copy {
display: block;
margin-top: 6px;
font-size: 10px;
}
.footer td.center {
padding: 30px 0;
}
</style>
</head>
<body>
<table class="row bg-white">
<tr>
<td class="wrapper last">
<table class="twelve columns footer">
<tr>
<td class="center">
<center>
<a href="#">
<img src="https://gallery.mailchimp.com/af37d5e0e2ad3fbc1fc35c915/images/d86f2f3e-fb48-4dac-a901-fb2c6e764ded.png" />
</a>
<a href="#">
<img src="https://gallery.mailchimp.com/af37d5e0e2ad3fbc1fc35c915/images/83304962-c8e5-4e51-95cd-ffbb46fd9386.png" />
</a>
<a href="#">
<img src="https://gallery.mailchimp.com/af37d5e0e2ad3fbc1fc35c915/images/8fbfc755-58dd-4ad3-9df6-31df23b9b4e0.png" />
</a>
<a href="#">
<img src="https://gallery.mailchimp.com/af37d5e0e2ad3fbc1fc35c915/images/acbdc917-00a3-421b-a56f-2b03d3f7c72e.png" />
</a>
<!--[if (mso) | (IE)]></center></td></tr><tr><td><center><![endif]-->
<span class="copy">© 2015. All Rights Reserved.</span>
</center>
</td>
<td class="expander"></td>
</tr>
</table><!-- /twelve columns -->
</td>
</tr>
</table><!-- /row -->
</body>
</html>
EDIT: In accordance with your comment, I dug into the JSBin of your email and see that the issue is that the images contain "float: left; clear: both; display: block; " as well as "align='left'" which is causing it to left align in the table. There are two options:
1.) remove this code from the CSS or after inlining
2.) Create a defined width table to hold the social media and copyright info. (This is likely the most cross-client compatible solution)
In order to not change any of your exisitng code or the CSS inserted when inlining Zurb INK - I had to create a table inside the TD at 100% to clear the aligns and blocks/floats that were inherit inside the parent table, I then created another nested table inside that to house the social icons and copyright info. Then inside the top TD of that, I created a third nested table to allow the icons to each have their own TD without causing issues or requiring colspan for the copyright below.
See below for example:(after inlining your code)
<table width="100%" cellpadding="0" cellspacing="0" border="0" style="border-collapse:collapse;">
<tr>
<td align="center">
<table width="230" cellpadding="0" cellspacing="0" border="0" style="border-collapse:collapse;">
<tr>
<td align="center">
<table width="100%" cellpadding="0" cellspacing="0" border="0" style="border-collapse:collapse;">
<tr>
<td align="center" style="padding:0 5px;">
<a href="#" style="color: #2ba6cb; text-decoration: none; display: inline-block;">
<img src="https://gallery.mailchimp.com/af37d5e0e2ad3fbc1fc35c915/images/d86f2f3e-fb48-4dac-a901-fb2c6e764ded.png" style="outline: none; text-decoration: none; -ms-interpolation-mode: bicubic; width: auto; max-width: 100%; float: left; clear: both; display: block; border: none;" align="left" /></a>
</td>
<td align="center" style="padding:0 5px;">
<a href="#" style="color: #2ba6cb; text-decoration: none; display: inline-block;">
<img src="https://gallery.mailchimp.com/af37d5e0e2ad3fbc1fc35c915/images/83304962-c8e5-4e51-95cd-ffbb46fd9386.png" style="outline: none; text-decoration: none; -ms-interpolation-mode: bicubic; width: auto; max-width: 100%; float: left; clear: both; display: block; border: none;" align="left" /></a>
</td>
<td align="center" style="padding:0 5px;">
<a href="#" style="color: #2ba6cb; text-decoration: none; display: inline-block;">
<img src="https://gallery.mailchimp.com/af37d5e0e2ad3fbc1fc35c915/images/8fbfc755-58dd-4ad3-9df6-31df23b9b4e0.png" style="outline: none; text-decoration: none; -ms-interpolation-mode: bicubic; width: auto; max-width: 100%; float: left; clear: both; display: block; border: none;" align="left" /></a>
</td>
<td align="center" style="padding:0 5px;">
<a href="#" style="color: #2ba6cb; text-decoration: none; display: inline-block;">
<img src="https://gallery.mailchimp.com/af37d5e0e2ad3fbc1fc35c915/images/acbdc917-00a3-421b-a56f-2b03d3f7c72e.png" style="outline: none; text-decoration: none; -ms-interpolation-mode: bicubic; width: auto; max-width: 100%; float: left; clear: both; display: block; border: none;" align="left" /></a>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td align="center" style="padding:5px;">
<span class="copy" style="display: block; margin-top: 6px; font-size: 10px;">© 2015. All Rights Reserved.</span>
</td>
</tr>
</table>
</td>
</tr>
</table>
Related
It should support for html email, so I can't use justify-content and align-items.
I try to use position: absolute for <img />, but It's not working on html email ?
Hot do I make the Twitter icon on the left side and on the same line with 1 2 3 for html email ?
<div
class="footer-container"
style="
position: relative;
background: pink;
position: fixed;
bottom: 0;
width: 100%;"
>
<!-- position is not working on html email -->
<div
class="image-container"
style="position: absolute; top: 30px; left: 24px"
>
<img
src="https://www.citypng.com/public/uploads/preview/-516139511470ymv2hndq6.png"
alt="test"
width="94"
/>
</div>
<div
class="centered"
style="padding-top: 40px; padding-bottom: 40px; padding-right: 30px; text-align:right;"
>
<a>1</a>
<a>2</a>
<a>3</a>
</div>
</div>
In email-templates you have limited support and as such sue techniques that are outdated or would not be semantically correct for normal HTML files.
In this case, you should use a table for layout purposes. You can shrink the table cells to their minimum content by using: style="width: 0; white-space: nowrap;"
<table width="100%">
<tr>
<td>
<img src="https://www.citypng.com/public/uploads/preview/-516139511470ymv2hndq6.png" alt="test" width="94">
</td>
<td style="width: 0; white-space: nowrap;">
<a>1</a>
</td>
<td style="width: 0; white-space: nowrap;">
<a>2</a>
</td>
<td style="width: 0; white-space: nowrap;">
<a>3</a>
</td>
</tr>
</table>
People forget that HTML email Table can be treated as a "grid" layout by using colspan (and rowspan as well). Usually a grid of 6 columns fits best for most of the cases. Knowing you have such a grid, the top row can be constructed as such colspans, and by using text-align:
<style>
td {
border: 1px solid #ddd;
padding: 1rem;
}
</style>
<table cellspacing="0" cellpadding="0" border="0" style="width: 100%; table-layout: fixed; border-collapse: collapse; border: 0px;border-spacing: 0;">
<tbody>
<tr>
<td colspan="2">
<img src="https://i.stack.imgur.com/q9TPY.png" alt="logo" style="display: block; vertical-align: middle; border: 0;" width="57" height="48">
</td>
<td colspan="4" style="text-align: right;">
Link 1
Link 2
Link 3
</td>
</tr>
<tr>
<td colspan="6" style="text-align: center; background: gold;"><br><br>6<br><br><br></td>
</tr>
<tr>
<td colspan="3">3</td>
<td colspan="3">3</td>
</tr>
<tr>
<td colspan="2">2</td>
<td colspan="2">2</td>
<td colspan="2">2</td>
</tr>
<tr>
<td colspan="5" style="text-align: center; background: #567; color:#fff;">5</td>
<td colspan="1" style="text-align: center; background: #456; color:#fff;">1</td>
</tr>
</tbody>
</table>
I have a problem with an html email template in Gmail. In all other rendered browsers/mail clients it's rendered good so far, but I discovered a problem on Gmail Android App (tested on Samsung Galaxy S9+).
As you can see in the image, the big title beside the image is cut due to overflow - and I have no solution on how to prevent this. As said before, this happens on no other (mobile) mail client so far.
Found on Stack and other resources, that Gmail App can increase font-size - tried out following tipps I've seen so far, all without any positive effect:
!important directly on <td> and/or <a> with .listing-title
font-size in pt instead of px (with and without !important)
spacer.gif as top row (creates huge empty space on left side)
white-space: nowrap; can't be used because usually these titles are bigger than one line and this looks weird when cut off with overflow:hidden
special class with u + .gmail
Even if I change height of image and text-container - this then effects ALL mail clients of course...
Note: I'm not allowed to do big design changes, so it needs to be img on left side and these texts on right side.
Does anyone has further suggestions on how this cut off could be prevented?
Thank you in advance!
.ReadMsgBody {
width: 100%;
}
.ExternalClass {
width: 100%;
}
span.yshortcuts {
color: #000;
background-color: none;
border: none;
}
span.yshortcuts:hover,
span.yshortcuts:active,
span.yshortcuts:focus {
color: #000;
background-color: none;
border: none;
}
html,
table {
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", arial;
}
.main-tbody * {
margin: 0;
padding: 0;
}
.padding {
width: 50px;
}
.copyright {
width: 500px;
}
.location-row {
display: block !important;
}
.button-padding {
display: none !important;
}
#media screen and (max-width:620px) {
.location-row {
display: none !important;
}
.main-table {
width: 320px !important;
}
.inner-table {
width: 320px !important;
}
.image-listing {
width: 80px !important;
height: 60px !important;
max-width: 80px !important;
max-height: 60px !important;
}
.image-container {
width: 80px !important;
height: 60px !important;
}
.listing-title {
font-size: 14px !important;
line-height: 18px !important;
height: 35px !important;
}
.listing-price {
font-size: 12px !important;
height: 14px !important;
}
.button-padding {
display: block !important;
}
.copyright {
width: 320px !important;
}
}
a[x-apple-data-detectors],
.x-gmail-data-detectors,
.x-gmail-data-detectors *,
.aBn,
u+#body a,
#MessageViewBody a {
color: inherit;
text-decoration: none;
font-size: inherit;
font-family: inherit;
font-weight: inherit;
line-height: inherit;
}
<body id="body" style="font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Ubuntu, 'Helvetica Neue', sans-serif; margin:0; min-width:320px;">
<table class="main-table" border="0" cellpadding="0" cellspacing="0" align="center" style="text-align: center; background: #f5f5f5; margin-inline-start: auto; margin-inline-end: auto;" width="600">
<tbody class="main-tbody">
<!-- Header -->
<tr align="center" style="margin: 0 auto; text-align: center;">
<td colspan="3">
<table class="inner-table" border="0" cellpadding="0" cellspacing="0" align="center" width="500" style="margin: 0 auto; text-align: center;">
<tbody align="center">
<tr>
<td colspan="3" height="40" style="height: 40px;">
<p style="margin: 0;"></p>
</td>
</tr>
<tr style="height: 40px; width: 100%;" align="center">
<td colspan="3" class="desktop-logo" width="500">
<img height="48" width="128" style="display: inline-block; vertical-align: middle" alt="Logo" src="https://via.placeholder.com/128x48.png?text=logo">
</td>
</tr>
<tr>
<td colspan="3" height="30" style="height: 30px;">
<p style="margin: 0;"></p>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<!-- Header -->
<tr>
<td class="padding" width="50"></td>
<td>
<!-- Listing -->
<table class="inner-table" border="0" cellpadding="0" cellspacing="0" align="center" style="background-color: #ffffff;" width="500">
<tbody>
<tr class="list-container" style="width: 100%; max-height:140px;">
<td width="10"></td>
<td class="image-container" colspan="1" width="160" height="140" style="max-height:140px;">
<a href="">
<img class="image-listing" src="https://via.placeholder.com/160x120.jpeg?text=image" alt="" style="display: block; width: 100%; height: 100%; max-height: 120px;max-width: 100%; object-fit: cover" width="160" height="120">
</a>
</td>
<td width="10"></td>
<td class="text-container" colspan="2">
<table border="0" cellpadding="0" cellspacing="0" align="left" width="100%" style="width: 100%;">
<tbody>
<tr>
<td class="padding-top-inner-table" height="10" style="height: 10px;">
<p style="margin: 0;"></p>
</td>
</tr>
<tr>
<td>
<a href="" style="width: 500px">
<table border="0" cellpadding="0" cellspacing="0" align="left" width="500" style="width: 100%; text-align: left; color: #212338;">
<tbody>
<tr class="location-row">
<td style="width:100%; font-size: 12px; font-weight: 400;display: block; height:16px;" height="16">
<a href="" style="overflow: hidden; width:100%;height: 16px; margin: 0;text-decoration: none;color: #232f3f; display: block">
A small title
</a>
</td>
</tr>
<tr>
<td class="location-row" height="10" style="height: 10px;">
<p style="margin: 0;"></p>
</td>
</tr>
<tr>
<td class="listing-title" style="font-size: 16px; height:42px; font-weight: 400;display: block" height="42">
<a class="listing-title" href="" style="overflow: hidden; height: 42px; margin: 0;color: #232f3f;display: block; text-decoration: none; font-weight:bold; font-size: 16px;">
The very main big title which makes problems
</a>
</td>
</tr>
<tr class="location-row" height="27" style="height: 27px;">
<p style="margin: 0;"></p>
</tr>
<tr height="8" style="height: 8px;">
<p style="margin: 0;"></p>
</tr>
<tr height="19" style="height: 19px;">
<td class="listing-price" height="18" style="height:18px; margin: 0;font-weight: normal; font-size:14px; text-align: left; text-decoration: none;">
Tag 1 | Tag 2 | € price
</td>
</tr>
</tbody>
</table>
</a>
</td>
<td width="15" style="width: 15px;">
<p style="margin: 0;"></p>
</td>
</tr>
<tr>
<td colspan="3" height="8" style="height: 8px;">
<p style="margin: 0;"></p>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td colspan="5" height="10" style="height: 10px; background: #f5f5f5;">
<p style="margin: 0;"></p>
</td>
</tr>
</tbody>
</table>
<!-- Listing -->
</td>
<td class="padding"></td>
</tr>
</tbody>
</table>
I can't seem to reproduce the problem on your screenshot in Gmail on Android. My guess is there's something else in your code conflicting with Gmail's rendering. One thing I see is that there are missing <td>s here and there in your code. For example here:
<tr class="location-row" height="27" style="height: 27px;">
<p style="margin: 0;"></p>
</tr>
This should be:
<tr class="location-row" height="27" style="height: 27px;">
<td><p style="margin: 0;"></p></td>
</tr>
There are also two <body> elements in your code.
As a general rule for Gmail troubleshooting, I would:
Make sure your <style> tags are inside the <head> of your email. Gmail doesn't support <style> in the <body>.
Make sure your email can render correctly with and without <style> tags. Gmail mobile webmail and Gmail Apps with Non Gmail Accounts don't support <style> tags.
Make sure your HTML overall weight is not bigger than 102 Kb. Gmail clips email at 102 Kb and limits <style> to 16 Kb.
Use a neutral service that doesn't alter your HTML to send your tests (like Putsmail or Parcel).
Here’s an old post I wrote about troubleshooting Gmail’s responsive design support .
If this still doesn't help, feel free to share the entire code that you sent to trigger that bug in the first place.
I'm currently developing an email that has a 2-column layout in various places. I initially used <div> tags for each column, which worked great in every email client except older versions of Outlook (columns would render at 100% width, regardless of screen size).
To fix the Outlook problem, I simply changed the <div> tags into <td>'s. Now, I have a problem in the iOS mail app (10.1.1) where <td>'s refuse to go full-width on smaller screens. In my code below, you can see that both of the <td class="col-6-article"> elements have a fixed width of 300px, yet when I open the email in the iOS mail app then both of those elements are exactly 50% screen width. Here's a screenshot: http://imgur.com/a/0XsGz
Has anyone else run into this issue with the iOS mail app? I can't figure out why my inline styles and media queries are being ignored, simply because the elements are now table-cells instead of divs.
HTML (sorry, tried my best to clean it up):
<table cellspacing="0" cellpadding="0" width="100%" align="center">
<tbody>
<tr style="vertical-align: top;">
<td width="100%">
<table class="container" style="max-width: 650px; margin: 0 auto;background:#fff;" cellspacing="0" cellpadding="0" width="100%" align="center">
<tr>
<td class="col-6-article" style="display:inline-block; width:300px !important; padding: 0 0 25px 15px;">
<img class="center fullwidth" style="display: block; width: 100%!important; max-width: 325px;" src="http://billykroger.com/img/1mLusPPr.jpg" width="325" />
<h3>Pledges to Ipsum fall short</h3>
<p>Abby Bruell | Jun 2015</p>
<p>Despite good intentions, donors to the London conference have failed to follow through will the pledges they made to aid Syrian refugees. Now, millions of women and children face the consequences of their inaction.</p>
<table>
<tr>
<td style="text-align: center; height: 33px; width: 160px; background: #007c76;">
<table style="margin: 0 auto;">
<tr height="5" style="height:5px"></tr>
<tr style="line-height:normal">
<td><a style="padding: 0; color: #ffffff" href="#">
<span style="color: #FFFFFF; font-size: 14px">READ MORE</span>
</a>
</td>
<td>
<a style="padding: 0; color: #ffffff;" href="#">
<img width="20" height="20" style="height: 20px !important; width: 20px !important;" src="http://cww.convio.net/images/content/pagebuilder/arrow.png" />
</a>
</td>
</tr>
<tr height="5" style="height:5px"></tr>
</table>
</td>
</tr>
</table>
</td>
<td class="col-6-article" style="display:inline-block; width:300px !important; padding: 0 0 25px 15px;">
<img class="center fullwidth" style="display: block; width: 100%!important; max-width: 325px;" src="http://billykroger.com/img/1mLusPPr.jpg" width="325" />
<h3>Pledges to Ipsum fall short</h3>
<p>Abby Bruell | Jun 2015</p>
<p>Despite good intentions, donors to the London conference have failed to follow through will the pledges they made to aid Syrian refugees. Now, millions of women and children face the consequences of their inaction.</p>
<table>
<tr>
<td style="text-align: center; height: 33px; width: 160px; background: #007c76;">
<table style="margin: 0 auto;">
<tr height="5" style="height:5px"></tr>
<tr style="line-height:normal">
<td><a style="padding: 0; color: #ffffff" href="#">
<span style="color: #FFFFFF; font-size: 14px">READ MORE</span>
</a>
</td>
<td>
<a style="padding: 0; color: #ffffff;" href="#">
<img width="20" height="20" style="height: 20px !important; width: 20px !important;" src="http://cww.convio.net/images/content/pagebuilder/arrow.png" />
</a>
</td>
</tr>
<tr height="5" style="height:5px"></tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
CSS media query:
#media screen and (max-width: 650px) and (max-device-width: 650px) {
.col-6-article {
width: 100% !important;
display: block !important;
}
}
You have dueling !important tags; you don't need to include !important in the inline css. Change this:
<td class="col-6-article" style="display:inline-block; width:300px !important; padding: 0 0 25px 15px;">
To this:
<td class="col-6-article" style="display:inline-block; width:300px; padding: 0 0 25px 15px;">
Once the !important is removed from the body's inline css, the media query code can override the 300px width and change it to 100% or whatever you want.
My application sends an HTML e-mail to users. When I test it as a plain HTML file, it looks ok in various browsers (Firefox, IE, Chrome, Safari, Android phone browsers). It also displays fine in webmail clients that I Have tested (Gmail, Yahoo mail).
But when I view the message in Microsoft Outlook, the layout is messed up. Specifically - the right hand icon is not top aligned, but displayed much lower than the left icon. This is the HTML code:
<div style="width: 100%; margin: 0px auto; background-color: #333; border: 0px solid #333; color: #FFF">
<!-- Logos -->
<div style="background-color: #333; border: 0px solid #333; color: #FFF; padding-top: 2px; padding-right: 2px; padding-left: 2px">
<img src="MyLogo.png" height="30px" width="30px" alt="Logo" border="0">
<img src="Image_1.png" height="27px" width="120px" align="right" alt="recommend" border="0">
</div>
<!-- Title -->
<div style="text-align: left; font-size:12px; padding-left: 2px; font-weight: bold;">
<span style="font-size:12px; padding-left: 2px; font-weight: bold;">Comment line - should be left aligned</span>
</div>
<div style="text-align: center; text-transform: uppercase; color: #DDD; font-size: 12px;font-weight: bold;">
<span><b>My Title Should Be Centered</b></span>
</div>
</div>
You may need to do more research on html email design. It is not the same as html for the web and should be table based instead of divs. Here is a basic example of how your example code should look:
<table width="100%" border="0" cellpadding="0" cellspacing="0" bgcolor="#333333">
<tr>
<td>
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td align="left">
<img style="margin: 0; border: 0; padding: 0; display: block;" src="MyLogo.png" width="30px" height="10px" alt="Logo">
</td>
</tr>
<tr>
<td align="left" style="font-size:12px; padding-left: 2px; font-weight: bold; color:#DDDDDD;">
Comment line - should be left aligned
</td>
</tr>
</table>
</td>
<td align="right" valign="top">
<img style="margin: 0; border: 0; padding: 0; display: block;" src="MyLogo.png" width="120px" height="27px" alt="recommend">
</td>
</tr>
<tr>
<td align="center" colspan="2" style="text-transform: uppercase; color: #DDDDDD; font-size: 12px; font-weight: bold;">
My Title Should Be Centered
</td>
</tr>
</table>
A couple of good introduction to email design resources:
Campaign Monitor
Reach Customers Online
You should really be building your email using responsive techniques as well.
Here is a very good article that describes the method :
http://blog.booking.com/responsive-email.html
In IE the navbar is correctly positioned, centered at the top. However in FF it is moved all the way to the right. I have looked through the code and still cant figure it out. Any ideas? Thanks in advance!
#wrapper
{
display: block;
border: 0px solid red;
width: 896px; /*background:white;*/
margin: 0em auto;
padding: 0em;
display: block;
text-align: left;
height: auto;
}
#wrapperInner
{
display: block;
border: 0px solid red;
width: 896px; /*background:white;*/
margin: 0em auto;
padding: 0em;
display: block;
height: auto;
}
/*Menu----------------------------------------------------*/
/*------Tabs---------*/
#tabNav
{
width: 895px;
border: 0px solid red;
}
#tabNav table
{
width: 895px;
border: 0px solid red;
}
#tabNav td
{
border: 0px solid blue;
padding: 0px;
vertical-align: middle;
}
#tabNav img
{
padding: 0px;
vertical-align: bottom;
}
<div id="tabNav">
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td id="MainNavigation1_tab0" align="center" valign="bottom" class="tabPos1-OffHome">
</td>
<td id="MainNavigation1_tab1" align="center" valign="top" class="tabOffHome" style="vertical-align: top;">
<a href="ourMenu.aspx" class="navLink">
<img id="MainNavigation1_imgOurMenu" onMouseOver="this.src='images/tabMenuOvr.gif';" onMouseOut="this.src='images/tabMenuOff.gif';" src="images/tabMenuOff.gif" style="border-width:0px;" /></a></td>
<td id="MainNavigation1_tab1Over" valign="bottom" class="tabOverlapOffHome">
</td>
<td id="MainNavigation1_tab2" align="center" class="tabOffHome" style="vertical-align: top;">
<a class="navLink" href="account.aspx">
<img id="MainNavigation1_imgExpress" onMouseOver="this.src='images/tabExpressOvr.gif';" onMouseOut="this.src='images/tabExpressOff.gif';" src="images/tabExpressOff.gif" style="border-width:0px;" /></a></td>
<td id="MainNavigation1_tab2Over" valign="bottom" class="tabOverlapOffHome2">
</td>
<td id="MainNavigation1_tab3" align="center" class="tabOff" style="vertical-align: top;">
<a class="navLink" href="customerCenter.aspx">
<img id="MainNavigation1_imgCustomer" onMouseOver="this.src='images/tabCustCareOvr.gif';" onMouseOut="this.src='images/tabCustCareOff.gif';" src="images/tabCustCareOff.gif" style="border-width:0px;" /></a></td>
<td id="MainNavigation1_tab3Over" valign="bottom" class="tabOverlapOff">
</td>
<td id="MainNavigation1_tab4" align="center" class="tabOff" style="vertical-align: top;">
<a class="navLink" href="ordering.aspx">
<img id="MainNavigation1_img101" onMouseOver="this.src='images/tabOrder101Ovr.gif';" onMouseOut="this.src='images/tabOrder101Off.gif';" src="images/tabOrder101Off.gif" style="border-width:0px;" /></a></td>
<td id="MainNavigation1_tab4Over" valign="bottom" class="tabOverlapOff">
</td>
<td id="MainNavigation1_tab5" align="center" class="tabOff" style="vertical-align: top;">
<a class="navLink" href="skinnyUs.aspx">
<img id="MainNavigation1_imgSkinny" onMouseOver="this.src='images/tabSkinnyOvr.gif';" onMouseOut="this.src='images/tabSkinnyOff.gif';" src="images/tabSkinnyOff.gif" style="border-width:0px;" /></a></td>
<td id="MainNavigation1_tab5Over" valign="bottom" class="tabOverlapOff">
</td>
<td id="MainNavigation1_tab6" align="center" class="tabOff" style="vertical-align: top;">
<a class="navLink" href="joinUs.aspx">
<img id="MainNavigation1_imgJoin" onMouseOver="this.src='images/tabJoinUsOvr.gif';" onMouseOut="this.src='images/tabJoinUsOff.gif';" src="images/tabJoinUsOff.gif" style="border-width:0px;" /></a></td>
<td id="MainNavigation1_tab6Over" valign="bottom" class="tabOverlapOff">
</td>
<td id="MainNavigation1_tab7" align="center" class="tabOff" style="padding-left: 7px; vertical-align: top;">
<a class="navLink" href="faqs.aspx">
<img id="MainNavigation1_imgFAQs" onMouseOver="this.src='images/tabFaqsOvr.gif';" onMouseOut="this.src='images/tabFaqsOff.gif';" src="images/tabFaqsOff.gif" style="border-width:0px;" /></a></td>
<td id="MainNavigation1_tab7Over" align="center" class="tabPos7-Off">
</td>
</tr>
<tr id="MainNavigation1_trLowerNav">
<td id="MainNavigation1_tdLowerNav" class="bgMenuHome-Off" colspan="15">
<!--inner tab nav-->
<div id="MainNavigation1_subNavHome" class="subNav">
<br />
</div>
Add float:left to #tabNav table. Looks perfect to me in Firefox 5.
do you have a doctype declared at the top of your document? If not, you need one...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Also, why are you using tables?
I plugged your code in and found the answer. All you have to do is add the following to the #tabnav id
margin: 0 auto;