I'm trying to style an email for gmail. Most of it displays just fine but Gmail is refusing to display the wrapper div apparently. I had a very similar wrapper working before so I can't figure out where the problem is coming from:
<div style=\"border: 1px solid black; width: 595px; height: 842px; background-color: white; border-radius: 10px; text-align: center; padding-top: 6px;\">AAA</div>
(The \" quotes are for PHP)
Gmail seems to remove the wrapper completely and display and div with no style.
It is best practice to use tables for html-email. Divs and css when applied to divs have inconsistent support across email clients, particularly Gmail, which is probably what is causing issues for you.
Your html code should instead look like this:
<table width="595" height="842" align="right" bgcolor="#FFFFFF" border="0" cellpadding="0" cellspacing="0" style="border: 1px solid black; border-radius: 10px; padding-top: 6px;">
<tr>
<td>
AAA
</td>
</tr>
</table>
Note that in many places I've used the old html methods instead of css. This is the best method for html-email.
Related
<tbody>
<tr>
<td valign="top" align="center" bgcolor="#3f76bf" style="background-position: center; background-size: cover; border-radius: 6px; background-color: #3f76bf; background-image: url('https://mcusercontent.com/73b8e8571a2f854d4f817a5c8/images/1a986052-d10d-4bf7-890f-133862bc982f.png')" background="https://mcusercontent.com/73b8e8571a2f854d4f817a5c8/images/1a986052-d10d-4bf7-890f-133862bc982f.png">
I would like to make the image in the td tag a hyper link, never imagined I would be spending 5 hours on this simple question. Seems I can not just wrap in tag. So frustrated and appreciative of your help.
I wrote up a more semantic way for doing what you're doing. Of course I don't know what the rest of your code looks like and you may have to tweak things. Generally it's not a good idea to use tables for layout. But I don't know how you're using it so I keep it as is.
(Tables should only be used for tabular data)
From the comments I can see you're using this in an HTML email where using tables for layout is still appropriate due to bad support for modern features. I have in-lined the styles for you in the example
<table>
<tbody>
<tr>
<td style="text-align: center;background-color: #3f76bf;">
<a href="https://yoururl.tld">
<img style="max-width: 100%;" src="https://mcusercontent.com/73b8e8571a2f854d4f817a5c8/images/1a986052-d10d-4bf7-890f-133862bc982f.png" alt="Describe the content of the image for someone who can't see the image">
</a>
</td>
</tr>
</tbody>
</table>
Update
I have since learned why they would use background images (for the images to be an equal grid) and for that I wanted to also add a solution which might be closer to your specific use case. Just a reminder to everyone that below code should not be used anywhere but in emails.
/* Ignore this CSS completely for your example */
/* It's just here for the example in SO to look nice */
td {
width: 100px;
height: 200px;
}
<table>
<tbody>
<tr>
<td
valign="top"
align="center"
bgcolor="#3f76bf"
style="
position: relative;
background-position: center;
background-size: cover;
border-radius: 6px;
background-color: #3f76bf;
background-image: url('https://mcusercontent.com/73b8e8571a2f854d4f817a5c8/images/1a986052-d10d-4bf7-890f-133862bc982f.png');
"
background="https://mcusercontent.com/73b8e8571a2f854d4f817a5c8/images/1a986052-d10d-4bf7-890f-133862bc982f.png"
>
<a href="https://yoururl.tld" style="
position: absolute;
top: 0;
right: 0;
botom: 0;
left: 0;
">
</a>
</td>
</tr>
</tbody>
</table>
Try putting a SPAN element inside the element. It should expand to fill the space. Wrap your link around the Span and put your link-able content inside the span
<td><span>CLICK ME DON KICK ME</span></td>
If span does not work try using a element or a .
In trying to give my emails a more 'professional' look, I want to create a neat looking signature. Now for a test, I first want to create a simple signature. And if I get the hang of it, expand it to a better one.
It seems that I can't seem to 'reset' or clear the table. But I can't figure out what the problem is... Any help would be appreciated!
For starters I want to create a signature like this:
I created a single html file (including css) with simple code in it. See below. The problem I keep experiencing is that for some reason, the tables height seems to be larger (only on the bottom) when I insert an image in one of the cells. See problem.
As you can clearly see, the table height exceeds that of the picture. I can't figure out how to remedy this...
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>EmailSignature</title>
<style>
table, td, tr {
table-layout: fixed;
border-collapse: collapse;
border-spacing: 0;
padding: 0;
margin: 0;
}
table {
width: 400px;
}
img {
padding: 0;
margin: 0;
}
#Avatar {
width: 80px;
height: 80px;
}
#Whitespace {
width: 2px;
}
#BlueBar {
width: 6px;
background-color: #0CF;
margin: 20px;
}
</style>
</head>
<body>
<table>
<tr>
<td rowspan="3" id="Avatar"><img id="Avatar" src="enhanced-buzz-16839-1297795475-9.jpg"></td>
<td rowspan="3" id="Whitespace"> </td>
<td rowspan="3" id="BlueBar"> </td>
<td rowspan="3" id="Whitespace"> </td>
<td>Tekst</td>
</tr>
<tr>
<td>Tekst</td>
</tr>
<tr>
<td>Tekst</td>
</tr>
</table>
</body>
</html>
in terms of solving your problem you may want to re-look at the structure of your table. The development of HTML emails and signatures can be pretty hard to do as many email clients respond different and have different support levels.
A guide to writing HTML, CSS and JS for email client usage has been created by Campaign Monitor and can be found here: https://goo.gl/oo1tcU
Support is so varied and there are very few 'safe' elements and attributes also campaign monitor's guide sadly doesn't include a list of the buggy HTML attributes. For example personally I have experienced rowspan and colspan not working correctly in a lot of email clients therefore I wouldn't suggest using them at all. Instead draw up a grid which has equal structure and use empty tags with defined HTML width and height attributes to make the table work for you.
Unfortunately to make an signature look exactly the same in all clients steps like using empty but defined tags are necessary or some clients will simply ADD the 's the colspans are running over.
In HTML emails/signatures you must define EVERYTHING to make sure nothing changes, a table tag I use at the start of all my projects looks something like this:
<table width="[your desired width]" align="center" cellpadding="0" cellspacing="0" border="0" frame="0" bgcolor="#fff"
style="border-spacing: 0; padding: 0; border: 0; font-family: Arial, Helvetica, sans-serif;
background-color: #fff; border-collapse: collapse; color: #000; font-size: 16px; line-height: 19px;" >
Also for all images use a tag like below and define the width and height in HTML NOT CSS.
<img src="" alt="" width="" height="" style="display: block; border: none;"/>
Email clients cause you to write HTML like its the 1990s, it's very frustrating but without considerations like these you may get the result you want in one client but if you send to another your signature will look different to a recipient. As you are trying to increase your professionalism I assume this wouldn't be desired!
Another tip I would suggest is using as much imagery as possible (and remember to define the width and height in HTML) because if defined correctly a structure built with every td and img tag width and height defined will almost never change. This is beneficial because text fonts also have low support unless they are standard fonts e.g. Arial!
Finally use ONLY Inline styles, many clients strip anything in a head tag out!
We seem to be having some problem with displaying our newsletter in some Outlook 2013's. This newsletter was a template created by a third party. But when we upload it to an email and send it, it works perfectly in almost all cases.(gmail, hotmail, webmail,...) and even in most outlook versions except in a few 2013 Outlook's but not all. The problem is that an image is justed as header in the newsletter and in some case this doesn't fill the whole are as you can see below. In the second image you can see that there is whitespace on the side of the image that shouldn't be there.
Can anyone tell me how i can fix this? Thnx
Here you can find the code used to display the image on the HTML template:
<body style="margin: 0; background: #e5f1fc;">
<table cellspacing="0" cellpadding="0" style="width: 100%; text-align: center; vertical-align: top; margin: 0; background: #eff7fc;"><tr><td style="width: 100%; text-align: center; background: #e5f1fc;">
<table cellspacing="0" cellpadding="0" style="width: 800px; margin: 0 auto; background: #fff;">
<tr>
<td colspan="5" style="width: 100%; font-size: 0; line-height: 0; vertical-align: top; text-align: left;">
<img alt="Companyname" src="images/header.jpg" style="margin: 0; border: 0; display: inline-block;" />
</td>
</tr>
<tr><td colspan="5" style="width: 800px; height: 30px; font-size: 0; line-height: 0; vertical-align: top;"> </td></tr>
<tr>
EDIT:The problem only seems to appear on our new Dell Lattitude 5540 laptops. Every other 2013 installation shows the email perfectly. Only the laptops have this problem. I can't understand what the problem can be. Does anyone have an idea?
Thnx
It's hard to know without seeing the rest of the code, but I'd bet there is something in the email, below the header, that is wider than 800px. In my experience with HTML emails and Outlook, it's either that or an issue with Outlook misunderstanding colspan. Here's an answer from a previous, similar question:
Outlook has an issue where if you put a colspan in the first row of a table, it will mess up the widths of the subsequent rows. The work around for this is that you need to specify your cell widths in the top row, even if it is an empty row.
You may need to specify the width in your first <table> to fix it.
I've designed a newsletter template and there is a detail I'd like to add. As a divider between two tables/content blocks, I'd like to add an arrow that points towards the coming table. I've added a border-top with color to the table and at the center I'd like the arrow(image) to break the border, but I can only get the image to align to the top not overlap it, which is what I ideally would like to do.
The tables have different background color which span the whole viewport, the divider should do the same. The layout is also responsive.
Here is the code I've used. Is what I'm asking even possible in a newsletter in terms of restrictions and compatibility?
Here is my result:
http://jsfiddle.net/qyzq4bvb/
This is what I'm trying to do:
<table border="0" cellpadding="0" cellspacing="0" width="600" id="divider">
<tr>
<td align="center" valign="top">
<img src="http://img.jpg" alt="arrow" width="49" height="24" />
</td>
</tr>
</table>
#divider{border-top:3px solid; border-color:#63A700; width:100%; background-color:inherit;}
You could try using position: relative on your img as shown below.
You may need to make minor adjustments to your image to clean up the left/right edges for a more seamless overlay. A .png file might work better since the .jpg's color does not quite look right (compression?). However, the idea will work.
You may need to add a white top border to the image. Be aware that this type of pixel precision positioning may be sensitive to cross-browser effects.
#divider {
border-top: 3px solid;
border-color: #63A700;
width: 100%;
background-color: inherit;
}
#divider td {
text-align: center;
}
#divider td img {
display: inline-block;
position: relative;
top: -4px;
border-top: 1px solid white;
}
<table border="0" cellpadding="0" cellspacing="0" width="600" id="divider">
<tr>
<td>
<img src="http://dyreparken-nyhetsbrev.s3.amazonaws.com/ikon/arrow.jpg" alt="arrow" width="49" height="24" />
</td>
</tr>
</table>
I'm using a master page and I have a table that I want to show a border around so that it shows around each cell in the table. Here's the code I'm trying to put a border around:
<table class="mainTable" style="border-color:#DDDDDD;">
<tr>
<td class="masterBannerTop" colspan="6" >
<img style="border: none; display: block; margin: 0 auto;" alt="Travel Joan's Blog Banner" src="Website%20Photos/HeadBanner.jpg" />
</td>
</tr>
<tr>
<td class="masterBannerNav">HOME</td>
<td class="masterBannerNav">ABOUT ME</td>
<td>
... And it goes on from there. Here's the CSS:
.mainTable
{
width: 90%;
margin-left: 5%;
margin-right: 5%;
border-spacing: 30px;
border-color:#999999;
}
No matter what color I put in, it doesn't work in any of the browsers. I mean, there's only a couple places where I can put the color. Even if i try to use just CSS or in-line style elements, it still doesn't seem to want to work.
try setting
border:1px solid #999999;
in your css instead of fiddling around with table attributes! Try to avoid using these attributes because it makes changing the style of your site more difficult and the code more verbose for people that have to maintain it. Good luck and let me know how it goes :)
style="border: 1px solid black"
Perhaps also make sure you set border-width: 1px or something along those lines?
Do
<table border="1"> ... </table>
to get borders around your table and between cells.
Do
<table style="border:'1px solid #DDDDDD'"> ... </table>
or
.mainTable {
border:'1px solid #DDDDDD';
...
}
or
.mainTable {
border-size:1px;
border-style:solid;
...
}
to get borders around your table.