HTML file not displaying properly on Microsoft Outlook email

I have a 1-page DW file that won’t upload correctly on Microsoft Outlook email. All images and text with links are alligned on top of the email page and the rest are at the bottom. When I preview the file on IE it’s ok. What could be wrong. All the images and text with links are ap divs if that helps.

Microsoft removed the ability of Outlook to handle HTML emails correctly a few versions back. They decided it was more important that it be able to handle emails created by MS Word.

Oh :frowning: But I tried it on yahoo mail and it yiels the same result. I think there might be something wrong with how I created my file? I use ap div for all images and text with links. Could this be what’s causing it?

Support for HTML email is very poor in most email clients. Many strip out all or most of the CSS. Only a few inline styles survive the cut. Sad as it is to say it, the only layout method that has a hope of working generally is table layouts, just like they did it in the 90s.

can i use tables and insert images and links? I tried pasting the dw code on Constant Contacts and still it wont align to the background image. They said it’s because of the absolute positioning tag. So how do I correct this?

Don’t use absolute positioning in emails - it doesn’t work.

Can’t really help you much without seeing the code, but…

Yes, certainly.

… still it wont align to the background image.

Sounds like you are still using CSS background images? If so, forget about this. Place images in the HTML, and only where you really need to, as a lot of email clients won’t download them by default. Try to organize your tables(s) so that images have their own cell.

They said it’s because of the absolute positioning tag. So how do I correct this?

Get rid of absolute positioning altogether in emails. As I said, most CSS in emails is stripped out anyway.

Unfortunately, you have to think differently (at least for now) from the way you think about web design.

Some of the big email service sites like Campaign Monitor have lovely galleries of email layouts that have been tested extensively, so you can save a lot of time by just using one of those.

Thanks guys. This is so frustrating! My boss really wants to use this specific concept/layout. Unfortunately, I think it will require CSS. But I really don’t know for sure since I dont have html background, so I don’t know what alternate codes I can use. I just do the design part on DW and let it generate the codes.

We basically want an image background and 5 other images with links on top of that background image. 3 of the images will be in the center of the page and the other one on the lower left and the other on the lower right hand of the background image. Would anyone be able to help me figure out how to do it? Or least get as close as possible to this concept without using css?

Thanks for all your time in reading my post.

Well, as I said, using images for the main content of an HTML email is dangerous, as it could mean most of you content is inaccessible. Still, I guess you could get around this with alt text.

Perhaps the best thing to do here is create one big image in Photoshop with all the bits where you want them (one big background image with the link images placed appropriately). Then slice the image up in six or so parts: a top section with no links that could go in a single-cell header row; three images for a middle section, each image with its own row cell around which an anchor tag could be wrapped; and two images for the bottom two links, which would go in a two-cell row.

My boss really wants to use this specific concept/layout. Unfortunately, I think it will require CSS.

No, there’s always another way, iven if not very good.

I just do the design part on DW and let it generate the codes.

Not a good idea for emails. You need more control over the code to be sure it will work.

Hi Ralph,

Thanks. I’ll give it a shot. :slight_smile:

Let us know how it goes! If the instructions above aren’t clear, just post back, and perhaps show the code you are using. :slight_smile:

Yipee! :bouncy:

Ralph, it worked!!! Thank you! Thank you! Thank you! :smiley: It views ok on web mail and MS Outlook. We can even send it using MS Outlook.

We’re all very happy since we get to use the design we want. Even if it’s not how it’s suppose to be done, we can live with this for now. And because I have no html background, doing it this way is more easier for me.

Thank you!!!

Great! Glad it worked. :slight_smile: