cancel
Showing results for 
Search instead for 
Did you mean: 

Formatting issue - email does not look like preview.

SOLVED
Regular Visitor

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

571 REPLIES 571
Highlighted
Occasional Participant

Everything underlined in hotmail?

When I create my email, everything looks great.  Then when I receive it, and open it in outlook, it still looks great.  But when I open it in my hotmail account, EVERYTHING is underlined, like it is a hyperlink.  Any suggestions on how to fix this?
New Member

Background images in Outlook 2007

I am new to using Constant Contact and was told by a person in the office that they couldn't see the backgrounds and title bars in a recent message I sent out. I did some searching and found that the HTML handling in Outlook 2007 does not display background images that have text superimposed on top. Discussions on that topic aside, I did not want to pick a different template and was determined to find a fix.

I found two. They are relatively simple, but they work.

The easiest is to open the Advanced editor and then in the left menu, click the Style link (leave as much of the native code as is - removing the wrong parts will cause you problems). Anywhere you see a style listing that says "BACKGROUND-IMAGE:... replace that with BACKGROUND-COLOR: #xxxxxx; (replace the xx's with your HTML color) and make sure to leave the semi-colon.

The second more involved process is to stay on the HTML tab of the Advanced Editor and carefully find the TABLE tags where your header or title graphic would be and add a bgcolor="#xxxxxx" tag and then in the section where the code would automatically include your title text you need to replace that snippet with a <font> tag and your text, etc. The benefit of the second way is that Office 2007 users will see an email with colored blocks where everyone else will see the email the way it was intended. Here is a brief example of the Newsletter Title part:

Constant Contact Generated code (for the particular template I was using):
        <td class="HeaderBG" colspan="1" height="110" rowspan="1" width="580">
            <table border="0" cellpadding="0" cellspacing="0" width="100%">
                <tr>
                    <td colspan="1" rowspan="1" width="30"><img height="110" src="http://img.constantcontact.com/letters/images/spacer.gif" width="30"/></td>
                    <td colspan="1" rowspan="1" valign="middle" width="382">
                        <!-- BEGIN: Title Text -->

                        <Introduction name="letter.intro" title="Introduction">
                        <IfPropertyExists name="letter.title">
                            <div class="TitleText">
                            <font class="TitleText">
                            <Property font="TitleText" name="letter.title" title="Title" type="single"/></font>                            </div>
                        </IfPropertyExists>
                        <!-- END: Title Text -->

Dirk's Edits (additions in Red Bold Italics - deletions in blue stikeout):
        <td class="HeaderBG" colspan="1" height="110" rowspan="1" width="580">
            <table border="0" cellpadding="0" cellspacing="0" width="100%">
                <tr>
                    <td colspan="1" rowspan="1" width="30"><img height="110" src="http://img.constantcontact.com/letters/images/spacer.gif" width="30"/></td>
                    <td bgcolor="#xxxxxx" colspan="1" rowspan="1" valign="middle" width="382">
                        <!-- BEGIN: Title Text -->

                        <Introduction name="letter.intro" title="Introduction">
                        <IfPropertyExists name="letter.title">
                            <div class="TitleText">
                            <font class="TitleText">
                            <Property font="TitleText" name="letter.title" title="Title" type="single"/></font>                            </div>
                        </IfPropertyExists>
<font face="arial" size="22" color="#000000">My Newsletter Title</font>
                        <!-- END: Title Text -->

And then you would do that for each title, sub-title, etc. through your newsletter.

If you've read this far and are going to try it, I shouldn't need to give you more pointers, but since my new keyboard can keep up with typing 120cpm - here they are:
*** Before you start, select all the HTML code and paste it into a Notepad for safe keeping (aka - Undo)

*** Select all the Style info (CSS info) off the Style tab and put that in a separate Notepad. This way when you are manually entering the Title etc. you will have a quick reference for the font sizes

*** Everyone ask Constant Contact to make an Office 2007 compatibility checkbox on their screen before sending this out to your list so that their backend would do all this for you automatically.

Contributing Developer

Background images in Outlook 2007

Thank you for your detailed posting. The topic of OutLook has been discussed across the web for some time. For anyone interested in the limitations in Outlook 2007 here is a link.

http://msdn.microsoft.com/en-us/library/aa338201.aspx

I have now stopped trying to develop decent HTML e-mails for outlook. I make a plain text version and put in a link "If you have trouble reading this click here" in the top of the e-mail. It saves me the trouble and my clients the development money.

. I do most of my work for non corporate clients and find that 90% of people that sign up for email don't use their company accounts anyway.

Whereas 55% of B2B clients use Outlook, far less under 15% of B2C do.

Occasional Participant

Why do my emails look drastically different once they've been sent than they do while designing them?

I've created numerous emails using Constant Contact, and while I'm really enjoying the functionality, I keep having the same issue.  I design my emails and get the colors, fonts, etc. exactly as I want it.  But when I send a preview to myself and others, and do the final send, the email looks very different than how it did within this program - and never different for the better.

What is causing this change in appearance?  And how can I work through it?
Contributing Developer

Why do my emails look drastically different once they've been sent than they do while designing them?

That's a bit strange. You should not be seeing a difference between the preview mode ( I am assuming you are emailing the previews in addition to just looking at them, correct)

Are you previewing them on the same email client that you then see a difference with after sending them?

For the record what email clients are you using to view them in?

Occasional Participant

Why do my emails look drastically different once they've been sent than they do while designing them?

I did some checking, and they only appear differently when the emails are opened in an email account that is utilizing Microsoft Outlook. Is it possible that Outlook is preventing the full design from coming through? When I did a preview-send to a Gmail account the email displays exactly as I want it to. But when I send it to my work email account, which utilizes Outlook, the colors were entirely different and some graphics didn't display, even after selecting the option to download images.

Occasional Participant

Why do my emails look drastically different once they've been sent than they do while designing them?

I did some checking, and they only appear differently when the emails are opened in an email account that is utilizing Microsoft Outlook. Is it possible that Outlook is preventing the full design from coming through? When I did a preview-send to a Gmail account the email displays exactly as I want it to. But when I send it to my work email account, which utilizes Outlook, the colors were entirely different and some graphics didn't display, even after selecting the option to download images.

Contributing Developer

Why do my emails look drastically different once they've been sent than they do while designing them?

Issues with Microsoft Outlook are well documented. There are even differences between versions of Outlook.

If you send me an email I will forward you a document discussing some of the challenges of designing in Outlook.

Why do my emails look drastically different once they've been sent than they do while designing them?

I have found that creating the emails in Mozilla Firefox (and checking previews in same) gets me the best results in Outlook, Thunderbird, Hotmail & GMail. Creating in Explorer has been problematic. Hope that helps.