This is REALLY wierd.
This below code should result in a 100% width e-mail, with a lime colored top. But because the TD contains a link, the whole table is now 90% (or so) - but only in iPhone e-mail. Remove the link and the email is correct... What's going on?
https://s3.amazonaws.com/resultcaptures/C1C356D4-EAC0-4A50-B278-04155E256E51.png
I've boiled my email down to this:
<!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>
<title>Email</title>
</head>
<body bgcolor="brown" style="margin:0;padding:0; ">
<table cellpadding="0" cellspacing="0" width="100%" bgcolor="black">
<tr>
<td bgcolor="Lime">
<div>This is a link</div>
</td>
</tr>
</table>
</body>
</html>
Nothing is wrong with it... right? ...or am I blind?
This MacRumors thread provides a solution to the issue: http://forums.macrumors.com/showthread.php?t=1158457
Try to put align="center" and style="text-align:center" onto the first table and then put style="text-align:left" onto the second one if necessary.
If you wrap your content in a parent table with center alignment, this oddly seems to eliminate the right margin on the iPhone mail reader.
There is for sure a problem with iOS. The problem is that the e-mail gets scaled down to fit the width of the e-mail client, but when the mail is narrower than the e-mail client this accours - but only with e-mails with anchors in.
Set the with of the table to 320px to get rid of it, but say goodbye to elastic layout.
Ok, I found a working solution:
Just set:
table {
width: 99%; /* 99.99% doesn't seem to work */
margin: 0 auto;
}
To get rid of the very small minimal gap, just set the background-color the same as your table.
Fixed for now!
I had the same issue: Link
Related
Im having some difficulty. Im trying to have my email be responsive in outlook clients but its just not having it - It wants a set width in pixels but when I do this it looks rubbish in outlook mobile but most frustratingly it looks rubbish in GMAIL because the percentages have been removed.
Is there anyway to get around this? Specifically I want my image to be 100% width with a max width of 600px.
<tr container">
<td class="content">
<img width="100%"
src="imagelink" />
Generally what you want is the width attribute for Outlook, e.g. width="600", and the style attribute, which Outlook ignores, set to width:100%.
i.e. <img width="600" style="width:100%;max-width:600px" src="..." />
Not sure why your percentage is removed in Gmail - but perhaps because your stray quote mark here <tr container">. The other possibility (only guessing because you've only posted part of your code) is that you have not inlined the code. Some email clients do not respect embedded CSS, so you can't rely on it. You can use this tool to fix: https://inliner.cm/
I have a new challenge, which I haven't seen posted or answered here....
I have an image that needs to appear in the top-right corner of an email in Outlook, but that image is treated like a background image - the main content of the email is floated over it. The image file is NOT the width of the email. It's about 15% of the width of the email and perhaps 20% the height.
The email body must be 640px wide, height is variable. The image is 203px wide and 432px tall.
I'm using VML to display the background image in Outlook. The image is set to be the background image of a <td> tag, and that tag contains a number of additional tables that provide the email body (hence the variable height). The image should appear only once at the top right of the td.
Would coordorigin and coordposition be a valid approach to keep the image to a single location, or would it negatively impact the td containing the rest of the email body?
Any help would be appreciated.
Below is the bare minimum you need to achieve what you are asking for:
<!-- main containing table -->
<table width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td align="center">
<!-- main body table -->
<table class="w320" width="640" cellpadding="0" cellspacing="0" border="0" style="position:relative;">
<tr>
<td style="position:relative;>
<!--[if gte mso 9]-->
<v:image src="...yourimagehere.jpg" style="width:203px;height:432px;position:absolute;top:0;right:0;z-index:-1;" />
<![endif]-->
Your email here
Bear in mind that using a negative z-index on VML objects when using a background colour on the body of your email will result in the VML object displaying behind the bgcolor
VML allows a lot more styles than your typical HMTL rendered in the word processor, take full advantage where you can.
I can't actually remember if "right" works for position in Outlook. if not just use left:397px; instead.
Hope this helps
I have a MailChimp template I am working on for a client. In Gmail only, I get some images that are much larger than the stated dimensions in the template. In this example, the image is shown in Gmail at 600px x 120px but the <td> is:
<td cellpadding="0" cellspacing="0" style="border-collapse:collapse;vertical-align:top" height="4px" width="600px">
<img src="http://www.marketingscience.co/boa/hero-header.png" style="display:block;border:0;min-height:4px;width:600px;background-color:#696969;color:white;font-size:18px;line-height:100%;outline:none;text-decoration:none">
</td>
Any suggestions would be greatly appreciated.
Try setting image dimesions in plain html, like this:
<img src="image.png" width="100px" height="300px" />
Also, you have no height set in 'style' attribute, so adding it may solve the issue
Add a style element in your email template and set some default styles for all images in your email, like this:
<style>
img {
display:block;
height:auto;
line-height:100%;
}
</style>
MailChimp will add these styles inline to every <img> element before it sends the email.
Then, when possible, add the height and width attributes to each image as Alex Ponomarev suggested.
<table cellpadding="0" cellspacing="0" class="auto-style1" style="width: 100%; height: 100%">
<tr>
<td>edtretrt</td>
</tr>
</table>
Despite the fact that I specified that the height is 100% it doesn't fill the whole screen.
I want to use that table to set the background and because I want to send html email, I can't just change the background of the <body>
When you view that as a html file in your browser, your browser assumes it has a body and the body by default has some amount of margin. I can get rid of the border by specifying the body and removing the margin from the body. I also switched to a div instead of a table, to make the code simpler and removed margin from the div as well.
<body style="margin:0;">
<div style="width:100%;height:100%;background-color:orange;margin:0;">
edtretrt
</div>
</body>
I searched for changing background color of an email. It appears that most mail clients ignore or strip any body tags. It also appears that changing background colors in emails is not totally reliable. This site seems to indicate that you should use a table and you should use the bgcolor attribute with a six character color code to be supported by the largest number of mail clients: http://litmus.com/blog/background-colors-html-email
The following markup when viewed in Safari on Iphone and Ipad displays the body background color for 1 pixel between the two tables. What is this and how do I stop it?
<!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>
<title>Title</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
body{
background:#000;
}
table{
background:#ffffff;
width:50px;
border:0;
margin:0;
padding:0;
}
</style>
</head>
<body>
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td>a</td>
</tr>
</table>
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td>b</td>
</tr>
</table>
</body>
</html>
I've taken the liberty of dumping your markup to a file on my server:
Original markup
Alternative markup
There is no actual gap on my iPhone, but... the resizing algorithm does leave some space between the tables from time to time while zooming in/out.
This almost certainly has to do with some math not perfectly aligning to the pixel and getting rounded to match the nearest horizontal line. There is not much you can realy do about this, unless you resort to surrounding the tables with an inline-block that has the same background-color set like in the alternate file linked above.
On my iPhone the alternate version never displays any black lines between the tables. Be aware though that now the next element will be next to the inline-blocked div instead of underneath the tables. I'll leave solving that upto the reader. hint: css clear attribute.
Humm.. Have you updated Safari?
On Safari 5 I have no issue with this html...