We created a newsletter that looks great on Gmail and iPhone but totally sucks in Outlook. The text runs right agains the image, and text is justifying when it should be flush left. Divider lines are not showing up either. I realize in the grand scheme of things these are not huge compared to some other Outlook issues...but it's very frustrating. How can I pad the images for Outlook and be certain of the text formatting?
So sorry you are having trouble with Outlook. It is truly the trickier email client to plan for when creating your emails.
But I have a few solutions that might work for you, try them and see if they address the issues:
So, in terms of adding padding so that the text doesn't run into the images, you'd want to place your mouse over the image, choose the gear wheel in the far right corner of your image and scroll down to 'Padding' and hit increase to create the space. It will shift your text a bit but you can work with that to get it the way you'd like.
Next, double check your photo's alignment; if it's supposed to be flush left, then make sure that the alignment says that. Sometimes if it's set to 'None' Outlook has a heyday and will place it wherever is convenient. So don't give it any reason to play with your design intentions.
For divider lines, if you click on the HTML button in your toolbar and hit Ctrl-F, search for "divider" and change the size of it to something bigger, like 5px for example. It will make it more obvious. If that doesn't do the trick, you can always fill the background of a block to a certain bold color, and reduce the height of the block so that it will appear on the page to be a thicker divider.
And of course, constantly send yourself tests to Outlook to check the status of yoru changes.
Hope that helps!
Quite a few of my readers have told me that they are suddenly seeing large amounts of white space to the left of the articles that actually causes the text on the right side to disappear from the newsletter. I have attached a sample that one of my readers sent today.
The problem appears generalized to those folks reading the newsletter in Outlook.
The problem does not appear in the preview, nor is it evident in the test e-mails I am sending to myself and my tech support crew. But, we both use a web-based e-mail reader.
In late October, we changed our website platform from DotNetNuke to WordPress and are now cutting and pasting the content from a WordPress page into Constant Contact. However, when looking at the HTML code in the newsleter, I can't see anything that suggests a setting for a very wide left margin within a block.
I had an HTML expert look at the coding that we were pulling from WordPress and he said he's cleaned it up to work specifically with our newsletter.
Sorry to hear about the troubles you are having. After looking into it' I do see that the blocks with the issue have a code in there "margin-left 180px;" near the top that identifies the table that is copy and pasted from Wordpress and into the Constant Contact Blocks. If you have RSS available for the articles you are placing in the news letter, you might want to try this link to find out how to place the Blog content into the block easily.
How interesting. Why do you suppose that gap doesn't show up when I preview the newsletter or send a test message to myself or other people? If you break into the account and look at the top newsletter, you will see the code you noted, but then I encourage you to click preview and tell me what you see.
UPDATE -- We sent out another newsletter today, so I paid special attention to the problem. Every block had left margins between 180 and 210 pixels. I had to manually adjust it back to 4 pixels.
However, when I looked at the sourcce code of the web page from which we copy the information, there was no reference to a left margin being anything other than 4 pixels.
So, something is happenening between copying the information from our website and pasting it into a Constant Contact block. And the question is where is this code being generated:
<td styleclass=" style_ArticleText" style="margin-left: 180px; font-size: 10pt; font-family: Verdana,Geneva,Arial,Helvetica,Sans-serif; color: #000000;" align="left" valign="top">
We do have an "Article Text" style in our template. But, I don't see any way to change the margins. Perhaps that is the default margin for that style.
I can see where I can edit the font and the size, but not the margins.
If I can't set the margins, does that mean I should be using a different block type than the Article Block for these sections? There doesn't appear to be a simple HTML box, every block appears to be preformatted.
We have looked at the RSS import, it doesn't offer any flexibility. It has been suggested that I use WordPress' newsletter plugin to create a newsletter and simply cut and paste that HTML code into Constant Contact. Has anyone had experience doing that?
Sorry to hear about all the trouble with this! Let's see if we can narrow this down.
First of all, would you be able to tell me if you are copying a code from a webpage directly into the Advanced Editor in Constant Contact? If this is the case, the template won't necessarily accept web coding, as some of it is incompatible with the way our templates are built, for example if the source code from the webpage is using Absolute Positioning, you can get these 'phantom margins.' You will want to make sure that the code is built in HTML. You can also go into the areas where the margin is set and adjust the number by hand.
Also, if you wanted to check the HTML code of a particular block, in using the Advanced Editor, you would have to return to the style sheet to adjust this code. If you are using the basic editor with blocks, you'd want to check the HTML button which appears in the toolbar that floats above each block where you edit font, alignment etc.
If you wouldn't mind providing a bit more information about the method you are taking to create this newsletter, I will be able to help your more specifically. Also, if I have you permission to look into the draft itself, please provide that permission and the name of the draft you're having this issue in.
The method I use is I cut text from my website and I paste it into Constant Contact.
There are no -- zip, zero, nada -- codes being brought in from the website that indicates a left margin should be applied. My earlier post should have shown that.
But, after pasting the material into a Constant Contact box, and hitting save, the margins are added., and they can vary from 16 to 224 pixels. Weirder still is that they don't show up every day the same way. Some days there are no margins applied, other days one or two boxes could be impacted, other days all boxes are impacted.
Let's just forget about how the margins get into the box. Will someone from Constant Contact please tell me why, if the margins exist in the code as demonstrated above, the text does not appear indented when building the newsletter, when sending test messages or when most of my readers receive the newsletter.
If I could see the margins were screwy, I could go into the box and manually adjust them. As is is now, I have to remember to check every box with imported text and adjust it if necessary. If I forget to check a box or an entire newsletter, and the margins are off, I get a bunch of e-mailed complaints.
So, bottom line, if the code exists and shows a left margin of say 34 points, why doesn't the text appear left indented on the page or the preview?
Thank you for your post.
Since I am unable to replicate this within your account but do see the effects that you've mentioned, I feel it best to have one of our HTML specialists reach out to you directly. To that end, I have opened a case on your behalf and have moved the priority up for you. You will be hearing from this specialist within 2-3 business days. They will help you understand where this code is coming from and produce steps to mitigate this issue for you.
I do apologize that this has been happening to you and no resolution has worked for you so far. I also apologize that I am unable to answer your question of why this is happening and why it will not show itself in the preview or editor. This is the exact reason why I've pushed your issue directly to one of our HTML specialists. They can dig into this further and discover the cause and the solution.
They will be reaching out to you at the phone number you have provided on your account. If this is incorrect, please send us an email with the correct contact information to social_support(at)constantcontact(dot)com. Please do not provide this information in this public forum so your privacy will be protected.
If you have any additional questions, or if you just need some help, please feel free to respond to this message with the details, or call our Support Team directly at (866) 289-2101. Our hours are Monday-Thursday 7am-11pm ET, Friday 7am-9pm ET, Saturday & Sunday 10am-8pm ET.
It would be nice if someone at Constant Contact would look into this and get back to me.
Today, I personally checked every single block before sending out the newsletter to make sure the margins were sent to 4px. A short time after the newsletter went out, I got ANOTHER e-mail from a frustrated reader who forwarded me his newsletter and the margins were indented on every single block. Of course, the margins were different for every block.
This looks horribly unprofessional.
Yet, another reader forwarded the same newsletter and it looks absolutely normal.
This is a Constant Contact issue and it would be really nice if the company would finally take ownership of it.
Do I need to take the issue to a larger audience of business owners -- Constant Contact prospects -- in order for the attention it deserves?