CSS with Microsoft Outlook 2007

Is Outlook really the only app you are testing for HTML mail? Never count on positioned DIVs in HTML mail. You might even try going back to tables for design.

That is the app I need it to work for. I use tables in my design now and when viewed in Outlook 2007 HTML is garbled.

So I did some research and Microsoft has said that Outlook 2007 parses emails in Microsoft Outlook, using Word 2007 rather than IE, which would be able to handle standard HTML code.

To correc this problem CSS is the best way to view the emails. Using "Save for Web & Devices…" you are able to export your sliced images in CSS. Unfortunatly when I view the images in Outlook 2007 the same problem occurs. But worse. The images stack on top of one another.

Does anyone else have the same issue and can maybe point me into the right direction?

Let me know, Thanks again.

Send embedded JPEGs—with image-mapped links if necessary—instead.

I’ve tried that as well, I use external paths for the images.

After they are sliced. I move them to a location on our server. Change the path of the links so they are hosted on the web. Still no luck. (I think that is what you are refering to.)

Let me know if anyone else has any other suggestions.

Thank you.

I don’t think slicing is what Phos intended with the recommendation of image mapped links. Use a single image that contains your layout. The slicing is what turns into a jumble.

I need it sliced, so that each image can use a different hyperlink for the variety of products. Listed below is an example. When viewed in a standard HTML viewer such as Outlook 2003 or IE, it works fine. When parsed with Outlook 2007 which uses Word to view emails it becomes jumbled. Word uses CSS to view the images. CS4 is capable of exporting in CSS, which I have tried. Images still come up garbled. Why is that?? Someone must know lol.

The viewable version of the code below is at this URL

< http://www.phoenixwireless.com/assets/phoenix/eblast/10-2008 /102208-SprintAccessories/102208-SprintAccessories.html>

< https://phoenixwireless.com/default.aspx?pageid=228&carr ierid=2&catid=&modelid=&brandid=&makeid=&amp ;searchstr=>

< https://phoenixwireless.com/default.aspx?pageid=228&carr ierid=2&catid=&modelid=&brandid=&makeid=&amp ;searchstr=>

< https://phoenixwireless.com/default.aspx?pageid=229&item =SYH810L&carrierid=&catid=&brandid=&makeid=>

< https://phoenixwireless.com/default.aspx?pageid=228&carr ierid=2&catid=&modelid=&brandid=&makeid=&amp ;searchstr=>

< https://phoenixwireless.com/default.aspx?pageid=229&item =SYH809L&carrierid=&catid=&brandid=&makeid=>

< https://phoenixwireless.com/default.aspx?pageid=229&item =RG811&carrierid=&catid=&brandid=&makeid=>

< https://phoenixwireless.com/default.aspx?pageid=229&item =SYH805L&carrierid=&catid=&brandid=&makeid=>

< https://phoenixwireless.com/default.aspx?pageid=229&item =SYH804L&carrierid=&catid=&brandid=&makeid=>

< https://phoenixwireless.com/default.aspx?pageid=228&carr ierid=2&catid=&modelid=&brandid=&makeid=&amp ;searchstr=>

< https://phoenixwireless.com/default.aspx?pageid=229&item =H795SM&carrierid=&catid=&brandid=&makeid=>

< https://phoenixwireless.com/default.aspx?pageid=229&item =H784CLSKIN&carrierid=&catid=&brandid=&makei d=>

< https://phoenixwireless.com/default.aspx?pageid=229&item =SYH784L&carrierid=&catid=&brandid=&makeid=>

< https://phoenixwireless.com/default.aspx?pageid=229&item =H784HBK&carrierid=&catid=&brandid=&makeid=>

"I need it sliced, so that each image can use a different hyperlink for the variety of products."

You DON’T need to slice it. That’s what’s causing your problems, and it’s what Image Mapping the links would solve quite easily. The defined regions for links can be any size and position you want them to be, and you’ll only need to serve one image, instead of a bunch of slice up portions.

It’s a decidedly old-school solution—almost a deprecated bit of coding, for as little as it’s used these days—but it would be far less problematic.

I don’t do much web stuff in CS3/4 so I’ve never noticed. In CS2 (with ImageReady) it was very easy to make image maps. Is the problem here that CS3/4 no longer offers an easy image map function? If so, even a free app like GIMP could aid you.

<http://gimp-savvy.com/BOOK/index.html?node81.html>

Thanks for your help guys.

Ah, I just looked – yes, CS3 stinks with image mapping. Adobe wants you to do this in Fireworks now. If you don’t have Fireworks or Photoshop CS2, Google for a free image map tool (or use GIMP).

You can do the image mapping in Dreamweaver, too.

On Oct 30, 4:30 pm, wrote:

Ah, I just looked – yes, CS3 stinks with image mapping. Adobe wants you to do this in Fireworks now. If you don’t have Fireworks or Photoshop CS2, Google for a free image map tool (or use GIMP).

try this online image mapper tool http://www.image-maps.com

You can do image mapping, but the problem with that is not all e-mail clients recognize the mapping. For instance Gmail does not recognize it.

I usually do my e-blasts in all html and css and have had great success with no problems with Outlook 2003, Gmail, Yahoo Mail, Hotmail and AOL Mail. Unfortunately Microsoft changed something in the way it reads e-mails which has screwed things up (thanks Microsoft) and is now making developers like us have to find new work arounds. I wish I knew the answer, but my work just FINALLY gave us Office 2007 so I can only start to test what will work now.

So far one thing I have noticed is that it doesn’t like to float div’s, it just stacks them. Div width with the combo of margin-left/right:auto; also does not work properly in 2007.

Way to move forward Microsoft :o/

e-blasts in HTML? Oh, so you’re the one clogging up my junk folder!

Easy answer? Don’t use HTML in email.

Most e-blasts are done in html unless it’s all text. I test my e-mails a lot and do not have problems with them going to the junk folder. I also use standard practices to make sure I’m compliant with the e-mail services which prevent me from being labeled as junk or spam. I’m also on a strict mailing list that is opt in and we do not solicite our blasts.

Sooo… it’s not an easy answer of "Don’t use HTML in email". that’s great if you are sending an e-mail to a bunch of friends and not for a business.

Also found this article which also talks about how Microsoft screwed things up. They changed the rendering from IE to Word, thus some of these problems.

< http://www.molly.com/2007/01/18/what-happened-with-html-and- css-in-outlook-2007/>

For a business.. that is why your HTML ends up in the junk folder – it’s not portable (and thus rarely readable), annoying, a virus vector, etc.

If you want to communicate in email – use words.
If you want your email to look fancy to a few people, and end up in junk folders for all the rest – use HTML.

Obviously you didn’t pay attention to what I wrote. I do not have a problem with my e-blasts ending up in the junk folder. And yes it is portable, that is what the plain text version of the e-mail is for, or did you forget that by being compliant that is something else I use? I have also had no problem viewing them on my blackberry through gmail.

From your title it’s obvious you are not too familiar with how e-blasts work. If you want to communicate in e-mail use words. That’s great and all, but when a CLIENT wants it a certain way, they get what they want. And using just words is not how e-blasts work today. What’s the point of an HTML e-mail when Outlook doesn’t even support an HTML e-mail? Do you not see the idiocy of that?

Since you are a Photoshop guy, think of this. If you are told to use a certain background image for something you are working on, and suddenly Photoshop wouldn’t allow you to use it, don’t you think that might be a problem for you? You don’t need images in ad’s or graphics… just use words. Sounds silly doesn’t it?

Here is a full list of what is and what is not supported in Outlook 2007 with HTML and CSS.

< http://msdn.microsoft.com/en-us/library/aa338201.aspx#Word20 07MailHTMLandCSS_SupportedHTMLElementsAttributesandCSSProper ties>