I have a problem which I'm trying to resolve for a week now but with no success so far. I have an email build from sliced images. The probem is that in Outlook 2013 there is space between them in which the td background color is shown. Like some kind of padding is added in Outlook. I can't figure it out, also in my Outlook 2013 email looks fine, but in two Outlooks at my clients company problem appears.
The problem looks like this:
http://imgur.com/UMsuhJr
There should not be green space between images and on the right side. The problem only exist in Outlook 2013.
This is my code for this part of the email:
http://pastebin.com/xFbnitzj
There is of course href, title and alt marks filled in full code.
I will be very thankful for any tips and tricks.
Different emails provider have different restrictions for data-transfer. In this case, Microsoft's mail cannot use the padding style. For the complete CSS support please see:
http://www.campaignmonitor.com/css/
Related
I want to make a div using border-radius property and send it to an Email Provider like Outlook, Gmail, Yahoo etc. The problem is these clients dont support CSS 3 (border-radius) property.
Is there a way to use a property border-radius in CSS 2.
Thanks in Advance
I do not know if it's a button you need, but the principle is the same.
You can create a VML button with buttons.cm this will work everywhere including Outlook however it has to be fixed width. You can then make it 100% wide with a media query.
A downside with the VML button is that it creates 2 versions of the button, and both will appear when the email is forwarded by a subscriber using the email client's native forwarding functionality.
I am making an email template. I gathered that outlook would be quite uncooperative anyway. So have made some exceptions in the design.
However I am generating content via PHP and this retrieve an image from a DB seamlessly.
What I am getting however is the image being rendered like the following:
(he thin line on the side)
when in Hotmail it appears as a full image.
I have tried CSS such as display block/inline and adding heights and widths to it. I'm guessing its how its being created though.
Any help would be much appreciated.
Why don't you load in an outlook template, with images and then view source to see how it was done.
Im currently working on building a webshop for the company Im working for, and one of the things that Im currently working on, is order-mails that is being sent out to our customers when they have finished an order.
The webshop is being build on the CMS Joomla, and currently, we're still testing everything in the webshop.
Here's the problem:
The order-mail I've made to this point, is made in HTML and CSS. In the top of the order-mail I've put in the company-logo. When my colleague (who's a test-customer at the moment) have placed an order, an email is sent to him and me. The mail my colleague receives looks fine, the logo resizes whenever he resizes the email-window. But the same mail that I receive, the logo in the top, is just totally out of proportion. The picture is the size as the original, even tho I defined it to be smaller in the HTML-/CSS-code.
Does anyone know why that is ?
Do I need to change anything in Outlook ?
In the CSS code? When it comes to HTML emails, you should not be using CSS for styling. To ensure they all cross email client compatible, you should be using tables.
So, firstly, remove the CSS you have for you image and use the following:
<img src="test.jpg" width="100" height="100" style="display:block; border:0;" alt="" />
There are some email clients such as Apple Mail that will support CSS within the <head so you can use it, for example you may want to add a shadow to the image, however do not use it for structural styling, such as floating or positioning.
Hope this helps
Adding "display:block;" to the image did seem to make the picture stay within proportion inside the mail. For a while.
I did also add a "max-width" inside a "div", that might have done something to the picture.
I recently mocked up an e-mail marketing (mail chimp) e-mail in Photoshop, and exported it into HTML (using tables and inline styles (unfortunately) so that it appears correctly in all/most e-mail clients.
However, after sending myself a test e-mail to see how it appears in my Gmail account, I can see there is a white dividing line between each row of my table, which I cannot seem to remove or find when I inspect it in Google Chrome.
Can anybody tell me how to remove these dividers?
My full HTML can found at http://pastebin.com/gJWJGEak#
A screenshot of how the email is currently appearing can be found at http://img521.imageshack.us/img521/346/screenshotvg.png
I found your problem. It has nothing to do with borders, but with the size of the text inside the cells.
Your text expands too much and it causes the containing cells to expand.
If you reduce the text size or the margin of the paragraphs you'll achieve the desired result.
I hope it helps! :)
All of your images need to be explicitly style="display:block;".
And just a heads up, background images won't work in Outlook 2007 and 2010.
I creating a program which send newsletter with a background image. It works fine on Office 2000-2003, thunderbird, but the background image does not show on Outlook 2007. I read that Microsoft changed the rendering engine and did not support the background css property (it is possible but only applied to the Body).
Is it achievable to create an email which will render like that : http://www.freeimagehosting.net/image.php?a7905f7d16.png
on Outlook 2007 ?
What is the solution ?
Thank you for your help.
Shouldn't be too hard, as you're only needing one background image for the whole layout. Here is a blog post telling you how to get your background images working for the body.
Then just put the images and text inside a table and style it up with the correct width, and BAM, you're good to go (:
Not only has Outlook 2007 stopped the background image from showing in anything but the body element, apparently you have to be careful about how you set the styling of said background image as well. Perhaps this is your problem?
Campaign Monitor has a short post about it.
perhaps using a table and put a background on the table would work. either way, if you have styled it using css only, your in trouble and will most likely have to take a few steps back and do alot of the styling again.
fyi: www.fixoutlook.org
Outlook by default uses Trident, IE's engine for incoming mail, and Word HTML rendering engine for outgoing mail... Until Office 2007 (and some people hate it).
Now, it uses Word 2007's rendering, wich is rather lacking. On microsoft's page you can see that de body element doesn't support the style attribute. Because of this, you can't give a background to the body.
May be enclose everything in a styled div, instead of styling the body?