I am facing a problem making a newsletter in Gmail and Outlook.
I've got a table with some TD's that contain a background-image:
<tr>
<td width="401" height="99" background="http://www.domain.com/bg_left.jpg"></td>
<td width="149" height="99" background="http://www.domain.com/bg_right.jpg"></td>
</tr>
I also tried adding the background images trough this method.
But with both ways I've got the following behaviour in Gmail and Outlook.
In both examples there is added some extra padding where the image is repeated.
Someone familiar with this problem? I couldn't find anything about this by myself.
Thanks instead.
For Gmail, you can remove the margin at the bottom of your images by changing the display property to block will prevent that.
Unfortunately, it seems that Outlook.com doesn't allow you to set the display property of images, but if you add a div (which is a block by default) with the same height as the img, as described here, you'll get the same result.
You'll need to use VML to display background images on a table in Outlook. Here is a tool in Campaign Monitor for doing exactly that.
Firstly, confirm your table cell height="" to the same as your image. Assuming it is, it looks like the cause might be your content expanding the table height past the specified height. Gmail has a habit of stretching the text line-heights, so if you have a underneath your subheader, this may be the cause. Remove that and it should fix it.
If that doesn't work, post the entire table and I'll take another look.
Related
I've been trying a bunch of different things to solve this, but nothing has made any difference. In our emails, we have an image in the footer. It is 456px wide, which is wider than both the device width and the parent div/ table (I've tried both).
This is in Gmail, testing on Chrome emulating iPhone 5/SE. The image has a max-width of 100% on it, but Gmail Mobile seems to remove this and insert a max-width of 852px, which is useless.
Might anyone know what the workaround is?
The css attribute max-width only has partial support in Android.
https://www.campaignmonitor.com/css/box-model/max-width/
Without posting your html code, it's kind of hard to look at what you are doing and suggest an alternative.
Another question: Why in the world are you building emails that are 852px?
The best practice for email width is 600-800px. Beyond 600px, your email will not display correctly in many email clients, if for no other reason than that's the width of the viewing window for the email. Any wider than 600px, the recipient will have to scroll to view the email. As an example:
Gmail: 640px (starts hiding background color)
Outlook 2007: 600px
Outlook 2013: 550px
Yahoo: 650px
Good luck.
In a email template I want to rotate a div content by 90deg.
I tried property transform: rotate(90deg) but it is not working in email template. I know the transform property not supporting in email template.
Is there another way or any trick to rotate content in email template?
Edit : I want to to rotate below div content :
...
<td>
<div><p>Some content <br> Some content</p></div>
</td>
...
Unfortunately, as you note, support for CSS transform is not good in email clients.
If the design lends itself well with the text being rotated in some email clients and not others, use CSS transform on the <div> or <p>. It's clean and easy to use live text.
If the text needs to be rotated everywhere, the best bet is to make the text an image. Not ideal or scaleable, but it's reliable everywhere. You can use a tool like Nifty Images if there are a lot of instances or versions of the text.
As you can see the picture, i have a problem with Internet Explorer. I've tried to make the background color white on parent element. But it still doesn't work.
How can i fix that problem?
The div that is giving you problems only has a 3-digit hex code. Try bgcolor="#FFFFFF" if it is Outlook that is giving you issues.
I have an html email I send out. It is formatted with tables because the original designer said, those were more reliable than divs for mail clients. All styles are inline:
<td style="font-size: 12px...">
When a single email is received, everything looks great. But as soon as a thread is formed by mac mail, "See more" is inserted.
This messes up the formatting completely, moving cells out of alignment. The See More message appears to be inserted properly - within a single cell, kind of
...
<td>
My Text
See More
My Text
</td>
But there are two of See More messages. One toward the top, one toward the bottom. Weird? The first one doesn't actually hide any text - but repeats it!
Hi Kate
See More
Hi Kate
is what it looks like. The second one does in fact hide text. Has anyone had experience with this problem? Are tables a mistake? Thanks for your help!
I am not sure if this is related, but in iOS on iPhone or iPad if someone chooses to use POP the full message will be truncated.
The work around is to have 1,019+ characters before your </head>.
See: http://www.emailonacid.com/blog/details/C13/ensure_that_your_entire_email_is_rendered_by_default_in_the_iphone_ipad
I coded this html email and when I check it in Chrome and IE7 the photo of the women is broken up. It looks fine in all other browsers. In some email clients it is also broken up.
Anyone experience this before and or can offer a suggestion on how to fix?
thank you,
ryan
Your image "sandy-portrait2.png" is stretching your upper table with beyond 600px wide to 638px wide.
Adjust your bottom table to match and you should be good. Also, you will need to recut or manually position "below-bottom-a-line.png" because it is only 600px wide and will not align correctly with the image in your upper table.
Also take note that since you are using background attribute on you table, Client such as Outlook 2007 will ignore this attribute and not display the background.