SitePoint Sponsor

User Tag List

Results 1 to 13 of 13
  1. #1
    SitePoint Member
    Join Date
    Nov 2009
    Posts
    11
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    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.

  2. #2
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,839
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    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.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  3. #3
    SitePoint Member
    Join Date
    Nov 2009
    Posts
    11
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Oh 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?

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,214
    Mentioned
    457 Post(s)
    Tagged
    8 Thread(s)
    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.

  5. #5
    SitePoint Member
    Join Date
    Nov 2009
    Posts
    11
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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?

  6. #6
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,839
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    Don't use absolute positioning in emails - it doesn't work.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  7. #7
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,214
    Mentioned
    457 Post(s)
    Tagged
    8 Thread(s)
    Can't really help you much without seeing the code, but...

    Quote Originally Posted by aaaltd View Post
    can i use tables and insert images and links?
    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.

  8. #8
    SitePoint Member
    Join Date
    Nov 2009
    Posts
    11
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  9. #9
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,214
    Mentioned
    457 Post(s)
    Tagged
    8 Thread(s)
    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.

  10. #10
    SitePoint Member
    Join Date
    Nov 2009
    Posts
    11
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Ralph,

    Thanks. I'll give it a shot.

  11. #11
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,214
    Mentioned
    457 Post(s)
    Tagged
    8 Thread(s)
    Let us know how it goes! If the instructions above aren't clear, just post back, and perhaps show the code you are using.

  12. #12
    SitePoint Member
    Join Date
    Nov 2009
    Posts
    11
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Thumbs up

    Yipee!

    Ralph, it worked!!! Thank you! Thank you! Thank you! 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!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

  13. #13
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,214
    Mentioned
    457 Post(s)
    Tagged
    8 Thread(s)
    Great! Glad it worked.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •