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.
Related
I am attempting to print a web page via Ctrl-P or right-click print so I can save it as a PDF. Up until several minutes ago, this was working flawlessly. I have made some minor sizing edits to the grid I am working with on the page and now when I attempt to print, the web page is displaying some formatting glitches on the preview screen.
The problem is shown below. There are various borders missing from the grid and this is carrying over to the PDF when fully saved. Nothing is missing when viewing the page normally.
I am aware this is a silly question, but for the sake documenting it, I did find out my issue.
My textareas are currently overlapping borders in certain areas of my grid. This appears to cause those grid borders to disappear to show the full textarea.
Below I took a snapshot to show how the textarea's blue line is going over my grid.
Solution: add padding to a bordered <div> if a textarea is in it
I am working on a template for HTML Mailings. At the moment I have a well constructed template with almost no errors.
Due to the default scaling in W10 (125%), I need the template to render nicelye in Outlook 120 dpi mode. However this is where I am struggling.
The 2 images added to the post show the problem. A small clickable grey line appears at some tables.
Any suggestions.
Unclicked Table space
Clicked Table Space
The issue here was that the tables were not enclosed in a single 100% width table. By nesting the content of the mail in a and the issue is prevented.
Nesting of tables is key.
The implementation can be found on my Github.
Link: https://github.com/Tom-Br/HTML-MailTemplate
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.
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/
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?