CSS for Newsletter Styling - ASP E-Commerce Platform

Hello, I am working with a Volusion E-commerce store owner to help her with her newsletter layout/design. The newsletter is offered as a part of the Volusion e-commerce package.

Basically - I edited the Newsletter.asp file (just created a new one to remove the call for the logo and border) and then created the body of the email backend in the Volusion ‘Easy-Editor’ so the client can edit on her own later on. We’re almost there - but we still have one (uh… major…) problem:

There is a repeating background (which is the same used on the website, and works fine with CSS styling on the WEBSITE, it’s just not working in the newsletter) but the center area is not displaying the background.

We’ve tried BOTH tables and DIV’s, we’ve tried BOTH inline and external stylesheet styling, we’ve tried placing the CSS in the newsletter2.asp file, we’ ve tried placing the style elements in the body in the Easy Editor.

I’ve really exhausted all my ideas here - and was wondering if anyone knows why this center table will not display the image meant for the background on the newsletter.

We have no problems with CSS styling on the site - but this newsletter doesn’t seem to be reading it.

Any ideas? I am hoping I am missing something very easy and small. I’m attaching a screenshot of the newsletter (so you can see where it’s happening). :injured:

As I mention - we simply have put a background (repeat - y) on BOTH a table, and a fixed-width DIV. Both worked fine in my HTML editor - AND the Easy-Editor backend of Volusion. But when you SEND the email - that’s when the background for that center space (where the ASP call for the BODY goes). So it has something to do with this -

Best,

Kari

Yes, that’s right. You have to test an email in as many clients as possible to know how they’ll render, and it’s pretty depressing! A lot of them strip out most or all CSS (especially if it’s in the head of the document). Inline CSS (on the element itself with the style=“” attribute) is your best bet, but as that page shows, a lot still won’t work.

Also, you have to use tables for layout if you want any kind of layout at all. No floats or anything modern like that.

By the way, Outlook (especially 2007) is nearly the worst of the whole pack of email clients. MS has turned its back on standards bigtime, and much of the delay in modernizing HTML email delivery is being held up by that company. They are actually going backwards.

SitePoint has just published a book on this (authored by the people at Campaign Monitor) and it’s worth buying if you are going to get into this area.

Otherwise, check out these links:

http://articles.sitepoint.com/article/code-html-email-newsletters
http://www.campaignmonitor.com/templates/

Hi Kari, welcome to the depressing world of HTML email!

You are missing the fact that, in terms of CSS/standards support in email, it’s still the year 1997 (or thereabouts). Many CSS features can’t be relied upon in HTML email, including background images. Here’s a reliable guide to what is and isn’t possible in various email clients:

CSS is the powerful technology to build design.But some email clients are moving away from full CSS support.

LOL - thanks for the replies!!

Ralph -you are right - I didn’t even think about that.

So let me make sure I understand what you’re saying - it iis that the CSS is obviously working properly when viewed in the Easy-Editor of Volusion (similar to using a service or ‘builder’ like Constant Contact or otherwise) because it’s rendered on the website itself. Even if I COULD get it to work with my email client (Outlook) - there would be 15 other email clients that it would not render properly with; and there are certain selectors/styles that will not render either way. I looked at the link you sent and it’s very eye-opening. I had no idea! This is my first newsletter design with more complicated layout, and outside of a program such as Constant contact.

I knew I had tried everything I knew to try - and it makes MUCH more sense now. Thanks a ton both for your replies. :slight_smile: