Preview and Test showing two different backgrounds

Anonymous
Not applicable

Preview and Test showing two different backgrounds

I'm trying to create an email with a black ground. When previewing email, it shows the black background. When I send a test email it shows a white background, but when I view as a web page, it shows the black ground.

Any help would be apprciated.
Tags (1)
4 REPLIES 4
Nicole_Mossinge
Level 7

Re: Preview and Test showing two different backgrounds

Email clients are very limited in their HTML capabilities, and even more limited when it comes to CSS. However, the web browsers you use to preview your emails, or view them as a web page, are not.

How are you creating your emails - are you using an editor like Dreamweaver? Such editors usually design for web pages - not emails.

The way you need to design your email is with basic nested tables. Try to use most basic HTML to format your email as much as you can. Then use only in-line CSS to refine it to perfection. This technique ensures that the look of your email will deterioate gracefully in lesser capable email clients.

Do not use <div> containers, or colspan and rowspan in table cells. No css between the <head> tags, and no css floats or css positioning. There are many articles on the web about designing HTML for emails.

You may also use tools such as emailonacid.com to preview how your email will look in different email clients. This can be a real eye-opener!
Anonymous
Not applicable

Re: Preview and Test showing two different backgrounds

Have you set the background-color in the body tag? Avoid using it in the body tag. You can however use it in the table backgrounds 😉
Anonymous
Not applicable

Re: Preview and Test showing two different backgrounds

Campaign Monitor has an awesome list of what CSS properties are supported (or not) by the majority of popular email clients. Not sure which one you're using to set the background color. I typically set it on the body tag, and then nest the entire email in a 100% wide table with bgcolor set to whatever background color I want.

http://www.campaignmonitor.com/css/

BTW--if you're using the background css style element to set the color and you're testing in Outlook, that's likely your problem. Outlook doesn't support that property.
Anonymous
Not applicable

Re: Preview and Test showing two different backgrounds

Just in case by chance you haven't... Make sure the email is unapproved while making the changes, and approved before you send the test. In my experience changes will show up in the preview but not a test if it was not approved first.