Formatting issue - email does not look like preview.

SOLVED
Go to solution
Occasional Participant

Formatting issue - email does not look like preview.

I'm having major difficulties getting the format in my meeting invite correct.  I always spend too much time changing font sizes and adding spaces only to have them revert or change to something completely different a couple of saves down the line.  The text editor has a mind of its own!  However -  the big issue is the resulting email.  Once I get the email looking the way it should in the preview, I send out a test email and open it in Outlook and its all jacked up again. 

 

How do I fix this?  I can't send the current email out to colleagues without looking like a moron. 

 

Thanks,

Shelley Broyles

1 ACCEPTED SOLUTION
Marketing Advisor

Hi there, 

When using our Second Generation Editor (2GE) sometimes what you are designing may not be the same design and layout that gets sent out to your contacts.

 

Email programs and mobile devices have unique ways of displaying emails. So, the email design your contacts see may not exactly match what you see when you preview it in Constant Contact which I know can be frustrating. These issues typically arise when you are copying an email multiple times as the HTML code for all of your edits from previous versions may cause these display issues. We recommend creating a new email, in this case, to make sure that you are starting fresh. If you use the same layout for all of your emails you can use the Save as template feature so that your edits to the design of the email will be saved and you can still create a new email to help avoid any display issues. Here’s more info on that.

 

Please see this FAQ with these design tips and you can make your email look better in all email programs (Outlook, Gmail, Yahoo, etc.):  http://conta.cc/2lkiaQZ

Always preview your email before sending whether you are using 2GE or 3GE.  I hope that helps! 

 

 

View solution in original post

575 REPLIES 575

The contact on Jan. 16 was an attempt to resolve an unrelated billing issue regarding another Constant Contact account with a credit balance that was not refunded.

I'm so sorry, Greg. I was looking at a different account.  I have escalated this and a rep should be reaching out to you this evening.

I did hear back from the tech support team with the same tried and true playbook answer. The best thing to do is to copy all my text, strip out every code, then paste it into the block and reformat it.

 

That's geek code for "we don't know what the heck is going on, but we do have a workaround for you."

 

In otherwords, strip out every link and every image to every story in every newsletter. Then, go to the trouble of re-establishing links to every headline, highlighting and resizing the headline, highlighting and resizing the body text, uploading and resizing every image, inserting the image into the text block and repositioning it.

 

Most newsletters have between 20 and 50 stories, so it should only add about 30 to 90 minutes to our process of building a daily newsletter.

 

What garbage.

 

Through all of this, nobody at Constant Contact, including the 8th graders working in tech support during study hall, has been able to explain this extremely simple concept:

 

REGARDLESS OF HOW THE CODE GETS IN THERE, IF IT SHOWS A LEFT MARGIN OF 34 PIXELS IS EMBEDDED IN THE CODE, THEN WHY IN THE NAME OF GOD DOES THE LEFT MARGIN APPEAR PERFECTLY ALIGNED IN THE PREVIEWS AND IN THE TEST MESSAGES WE SEND?  SHOULD NOT THE PREVIEW REFLECT AN INDENTED LEFT MARGIN?

 

As I have said ad nauseum, if there was a way for us to see that the code had somehow been incorporated into the text box before my subscribers receive their newsletter, we can correct those boxes immediately.

 

But, even with the phantom code in place, the newsletters look perfectly normal on our end before they are sent to customers who receive them completely screwed up.

 

I surrender.  Constant Contact = 1, customer = 0.

 

As I explained to the "level two" technician, as luck would have it, I returned home the other night to find a postcard from Robly offering a substantial discount for current Constant Contact customers. I have opened an account and will begin testing it this week. 

 

If the problem is duplicated at Robly, I will send the level two technician $50. If not, sayonara. And I will explain to my readers exactly why the switch was made.

 

GREG GERBER
Editor, RV Daily Report.

 

 

SOLUTION DISCOVERED

 

 

Ttwo weeks ago, I did notice something strange when I was cutting and pasting a series of job announcements into the newsletter because I do that with little chunks of text at a time.

 

Sometimes, when I would have the text editing box open in Constant Contact, then Alt-Tab to switch screens back to our website, I noticed that part of the content I had pasted before was indented when I Alt-Tab returned to Constant Contact. 

 

That got me to thinking, and I did some testing to see if that's what is causing the problem with phantom margins.

 

Normally, when I added new content, here are the steps I took:

 

  1. Click on a text box in Constant Contact to open the text editor.
  2. Then I click on HTML to expose all the code for that box.
  3. Then I CTRL-A to select all the old code, and click Delete to make it disappear.
  4. I then click Update to save the blank code, which takes me to a blank text editing screen.
  5. With that screen open, I Alt-tab to our web page to copy the day's content.
  6. Once copied, I Alt-Tab to return to the Constant Contact editor to paste it in.
  7. I then click Save to keep the new content I just pasted.

 

In the past, I would not necessarily notice an indentation on the blank screen when returning to the text editor, but it is possible to see a very slight change in the cursor position. When I notice it now, and open the text editor, sure enough, the left margin is increased by 30 px or 60 px, depending upon how many times I Alt-Tab between the screens.

 

I simply go back into the HTML code and delete everything again, and then paste the new content into the box.

 

So, here are the steps I am following now:

 

  1. BEFORE I open the text box in Constant Contact, I go to my website, highlight the day's new content and CTRL-C to copy it.
  2. Then I Alt-Tab to Constant Contact and click on the text box to open the text editor.
  3. Then I click on HTML to expose all the code for that box.
  4. Then I CTRL-A to select all the old code, and press the Delete key to make it disappear.
  5. I then click Update to save the blank code, which takes me to a blank text editing screen.
  6. With that screen open, then I paste in the day's content.
  7. Then I click Save to keep the new content I just pasted.

As a result, the problems occur much less frequently. I only had to manually remove the left margins about two times this entire week -- probably because I reverted to the old way of doing it.

 

Bottom line, if you encounter this problem again, is to ask the user if he is doing an Alt-Tab with a Constant Contact editing box open. Chances are, it's impacting the margin. He will not see the margin problem when he pastes new content into the text box. But, if he looks closely at the HTML code, the margin was increased.

 

I still think that if the HTML code contains an indented margin, the indented content should display that way in the draft of the newsletter, and certainly in a test message. That appears to be a Constant Contact display issue.

 

But, if contacts complain of a weird looking margin in the messages they receive, it is likely because the person who created the mailing had used Alt-Tab to switch between screens with a text editor open in Constant Contact.

Super Participant

One of my larger clients sends almost 80% of his email to OutLook users. I've become quite aware of this issue.

The CC editor is one nasty beast ( no other way to describe it).  It adds DIVS, spaces and Paragraphs where they don't belong.

 

A lot of it has to do with the way the email is created. If you are cutting and pasting from an original source like Word that can be the main problem.

 

Removing all formatting can help, but what I have found to be that best way to combat any problems is to send all my previews to OutLook ( I had to buy a copy for my PC) and test it there before sending it out.

 

Most times I have to go into the CC code itself and remove "stuff" that doesn't belong or doesn't appear in the WYSIWYG editor they use.

 

It can be a nightmare even for a professional.  What should take 20 minutes sometimes takes 40.

 

If you would like some help or training on how to do this, drop me a line. I know how frustrating and time consuming this can be. 

 

Tony Schaefer
CTCT Solution Provider and SMS Marketing Specialist
Constant Contact All Star 2009-2010-2011-2012
www.cliquemarketing.biz

 

 

Employee

Hello Shelly,

 

I am sorry to hear about your frustration. Email display issues can be challenging. This is because every email client render codes different. With Outlook for example, there are some issues that are incorrectable in coding and are caused due to outlook 2007+ using MS Word to render html.

 

One of the most common issues with Outlook, is the page breaks (gaps). The only option we really have is to add space (by hitting enter) in the blocks above it to attempt to narrow the gap and make it and the spacing look natural. In some cases this can move the gap however it won't always work.

 

Anyhow, there are a few practices that can do to prevent these issues from happening:

 

Additionally, you can always contact our Support Specialists:

 

  • Call: 1-866-289-2101 (Monday - Thursday 7:00 AM - 11:00 PM EST, Friday 7:00 AM - 9:00 PM EST, and Saturday - Sunday 10:00 AM - 8:00 PM EST)
  • Use Live Chat or other Support options by visiting: https://ui.constantcontact.com/support/index.jsp

Regards,

Juan Ramirez
Social Support and Community
If you find my post helpful, and it answers your question, please mark it as an "Accepted Solution"
Regular Participant

I am viewing the preview email on Outlook and there are white spaces being added between the logo and the rest of the email, as well as at the bottom of the page.

 

When I click the link to view it in the browser, everything is fine so I can't figure out where the white spaces are coming from.

You more than likely will have to go into the HTML and remove the extra code. BR or DIVs usually.

If you don't know how to do it call the CTCT support line and have them help, BUT show you what went wrong because if your using OutLook you will more that likely see that issue again.

 

Tony Schaefer
Accredited CTCT GOLD Solution Provider
Constant Contact All Star 2009-2010-2011-2012
www.cliquemarketing.biz

Frequent Participant

Hi there,

 

I'm trying to address an issue where the line height in our email is much higher in Outlook.com than in other email providers. This is breaking the email. You can see an example attached, where the line height pushes the email down further than the height of the border image. 

 

I've tried this fix but haven't had any luck. I can't find any info on this issue on the web. 

 

Do you know how to fix this issue? 


Capture.JPG

Hello Craig, 

 

I took a look at your account and the Summer newsletter that I believe your screenshot came from.  When I tested to Outlook.com (Hotmail) the email came through like it should.  I did see that you reached out to our support team about the issue and it appears they were able to resolve the issue with you.  From looking at the code of the email it appears that there is a line-height with a pt value in the code, which could be helping it display properly.  

 

If you are still running into this issue, please let us know the email name in your account so that we can do some further testing and troubleshooting.  

 

 

Thanks, 

Participant

Hello there,

 

I am having problems with our newsletters not displaying correctly in Outlook although they are perfectly fine on Gmail. Email marketing is a significant revenue generator for us and I desperately need help with getting this fixed as soon as possible. 

 

You're welcome to have a look at my campaign, it's called "EMU Boots Online June 2014".

 

Please help!!

 

 

Hi Joshua!

 

I can definitely help out with that. I took a look at your email and noticed a few flaws with it that are likely causing the problem. Outlook is very picky with how it renders HTML code. What I suggest doing for your next email is using tables. When you have a block with three columns in it like you have in your email, by having them in a table it will hold them in place so they don't move around on live send to Outlook. Check this great FAQ on how to insert a table. 

 

As for the bottom portion of the footer, did you code that yourself using HTML code? It looks like it is chopped up into multiple sections which I believe is throwing the display off as well. You might have to tweak the code in there as well or use the table feature there to insert the blocks. If after reading over the FAQ you are still struggling please let me know and I'll set it up correctly for you. 

Melissa M
Community and Social Support Intern

If you find my post helpful and it answers your question, please mark it as an "Accepted Solution"
Regular Participant

I am having a similar issue. My emails are showing up completely different in outlook than they are in the constant contact preview. The dividers for example are showing up as brown blocks. Is there anything I can do to make it show up correctly in the emails?

Hi @EdithC

 

I'm sorry to hear this. I took a look at your account and at the email you created today. Outlook matches the preview that I see for that email. Was there a different email I should be looking at? Please let me know the name of the email within your account and I'm happy to help!

Occasional Participant

I created 3 bars of color using 3 different divider blocks. I selected the Bucket icon and the color. It looked fine in preview mode and in my Hotmail test, but NOT in my Out look test. The bars didn't show up at ALL in Ourlook. The support person online was able to remedy the situation by using the 'text' color instead of the bucket color. It worked, but is clearly NOT how it should be functionint. That is very counter-intuitive to chose colored 'text; when there is NO text in the entire block.

Debbie,

 

We apologize for the inconvenience. Outlook reads HTML coding a bit differently than most other email clients. for each color (background and text) there is a 6 digit value that the email client looks for. Because Outlook reads into the language a little more, they weren't sure which color to use since there was no text in the block. By changing the text color to the same color as the background, there was no discrepancy between the color values Outlook was looking for, allowing it to be confident that the purple is the color to be used. 

 

Hope this helps!

Community & Social Media Support Intern
Participant

When we setup emails and test them in house they look FINE in Windows Live Mail & Entourage, but in Outlook the text randomly gets wrapped & carriage returned, sometimes aligned left or right when it is setup the opposite. Can you please direct us to an Outlook friendly template that will not skewer the emails we create?

Hi Rusty,

Unfortunately since all email clients read emails differently there isn't a template designed for each client. Outlook is one of the more challenging environments but we're happy to take a look and help with what you are seeing. We can almost always point out some quick and easy tips to make the display work in the future.  What is the name of the email you are currently working on so we can take a look?

 

If you would like more information, here is an FAQ with a list of known Outlook display issues.

 

Thanks,

Hannah M.
Community and Social Media Support

If you find my post helpful, and it answers your question, please mark it as an Accepted Solution

Are you on Twitter? Follow me here!

The title of my email is "Test"

Hi @accc 

 

Thank you for reaching out to the Community! Are you in need of assistance with the email campaign you have mentioned? This thread is focused on the formatting of an email preview in Outlook. Please let us know if you there is anything we can help with on your email, we're always happy to help.


Frankie.P
Community & Social Media Support

Did I answer your question? If so, please mark my post as an "Accepted Solution" by clicking the Accept as Solution button in the bottom right hand corner of this post.

You're not alone on your email marketing journey. Connect with a Marketing Advisor to see how they can help you develop the right strategy for your business and get the most out of your Constant Contact experience.
Participant

I created an email campaign with a beta template and when I send a test email, the text is not aligned properly when I open the email. When I have Constant Contact open, everything appears the way I'd like. I have tried editing it several times but it didn't work. When I opened my email using a different browser, the placement of the blocks is also different than the layout I designed. I will need to re-do the campaign again.