HTML/CSS help needed for Email Blast...

[cgmpowers]

I had a web guru create me a fantastic HTML/CSS email blast template that I've been using for a few times now (I just swap out the images I create and I'm supposedly good to go).

However, I've been hearing from SOME that they cannot view the email properly. They say the HTML doesn't display together and the images appear broken/staggered. I checked with a Yahoo email account (one of the few email programs that people are complaining about the emails looking broken up)..and the images don't appear in the table/order they should.

Can someone look at the HTML and the CSS and see if you have a suggestion of what is wrong? I've tried asking the guy who developed this but he's long gone onto other things (that's what I get for using Guru/Elance..heh).

Thanks

Chris Powers

html file (http://www.PowersByDesign.com/emailAd3/email.html)
css file (http://www.PowersByDesign.com/emailAd3/email.html)

[Two-Toe Tom]

you should add:

* {border:0;}

to your css file, some browsers have a default border setting that'll screw up your alignment

[cgmpowers]

you should add:

* {border:0;}

to your css file, some browsers have a default border setting that'll screw up your alignment


I tried adding that but I saw no difference in Yahoo email...not sure if it fixed the problem for other email/browsers...

Chris

[cgmpowers]

http://www.powersbydesign.com/emailAd2/email.html
http://www.powersbydesign.com/emailAd2/style.css

[urstwile]

I could be wrong, as I'm definitely no web guru, but I thought I'd heard that external CSS style sheets for e-mails are pretty much a no-no.

[bazman]

As a role you should limit the css and design with tables as m$ email strips most of it out.

[semioticantics]

In my opinion, at least for what's been shown here, none of it is actual text, just a bunch of images placed together. So, you can just combine the images and send the e-mail as that.

[digizan]

The new Yahoo mail doesn't support CSS positioning properties (position, top, right, bottom, left), which your CSS file uses.

I'll second what bazman & urstwile said: Avoid external CSS files, and stick to simple inline CSS & tables (especially if there's a chance of of any recipients using Outlook 2007).

You'll find an extensive, up-to-date list of CSS support in email at: http://www.campaignmonitor.com/blog/archives/2007/04/a_guide_to_css_support_in_emai_2.html

digi

[Kesh]

Yeah, Campaign Monitor is the site to read.

You can't use div's. No external stylesheets.

You'd need to do inline styles where the css is defined within the HTML. This guy designed it like a web page. Email needs to use tables.

[DesignVHL]

Agreed, you should not have an external CSS file for an HTML newsletter - and avoid positioning properties...this is the ONLY time, I advocate the use of tables for layout. Also, another thing to do, is to include your css <style></style> in the BODY, not HEADER tags of the HTML. This ensures the CSS is used properly. Some email clients do not see the style tags in the header, only the body.