SitePoint Sponsor

User Tag List

Results 1 to 15 of 15

Hybrid View

  1. #1
    SitePoint Zealot robcub's Avatar
    Join Date
    May 2008
    Location
    London, England
    Posts
    135
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Is there any alternative way to float an image in Outlook 2007

    Hi, as many of you are no doubt aware, doing an HTML email for Outlook 2007 and 2010 is quite possibly more painful than getting a site to look OK in IE.

    Outlook 2007 and 2010 does not recognise floats on images (along with a whole lot of other stuff).

    How do you get an image to stick to the left side and have the text start to the right of it and wrap around it so that it flow underneath the image as well? Like this:


  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,614
    Mentioned
    413 Post(s)
    Tagged
    7 Thread(s)
    Quote Originally Posted by robcub View Post
    doing an HTML email for Outlook 2007 and 2010 is quite possibly more painful than getting a site to look OK in IE.
    That's for sure. Outlook is the new IE.

    To be honest, I think you need to lower your expectations of HTML email. I would just make that image full width and be done with it, or have it in a separate table cell to the left. It's better to put aside most of what you know in web design when doing email. Otherwise, you'll suffer a world of pain.

  3. #3
    SitePoint Zealot robcub's Avatar
    Join Date
    May 2008
    Location
    London, England
    Posts
    135
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Thanks, Ralph, I need to get back to my client and try to get them to agree to a compromise.

  4. #4
    Mouse catcher silver trophy
    Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,836
    Mentioned
    113 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by robcub View Post
    Hi, as many of you are no doubt aware, doing an HTML email for Outlook 2007 and 2010 is quite possibly more painful than getting a site to look OK in IE.

    Outlook 2007 and 2010 does not recognise floats on images (along with a whole lot of other stuff).

    How do you get an image to stick to the left side and have the text start to the right of it and wrap around it so that it flow underneath the image as well?
    I'm sure I've wrapped text around images using Outlook 2007 (but that's at work and I'm at home, so I can't check).

    Two thoughts come to mind. Can you use the align="left" attribute on the image? Or could you put the image inside a div or table and float that?

  5. #5
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,614
    Mentioned
    413 Post(s)
    Tagged
    7 Thread(s)
    Apparently float is not supported at all in Outlook 7/10:

    Guide to CSS support in email

  6. #6
    Mouse catcher silver trophy
    Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,836
    Mentioned
    113 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by ralph.m View Post
    Apparently float is not supported at all in Outlook 7/10:

    Guide to CSS support in email
    Have now checked and yes, Outlook 2007 uses the align="left/right" to float objects.

  7. #7
    SitePoint Zealot robcub's Avatar
    Join Date
    May 2008
    Location
    London, England
    Posts
    135
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Thanks everyone. I'm in a bit of a weird situation as I'm sending the code to the client and the client is viewing it on Outlook and telling me what's wrong. So I'm doing this blind.

    However, you're right align="left/right" works on the img tag to float images so text runs around them.

    I'm now having problems getting a bit of breathing space around the images as margins on the images are ignored. I'm going to try padding but I'm not so sure it'll work.

    Forget about background images, lists, and margins on the images is the order of the day with Outlook HTML emails (plus much more besides). But I'm getting there!

  8. #8
    Mouse catcher silver trophy
    Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,836
    Mentioned
    113 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by robcub View Post
    I'm now having problems getting a bit of breathing space around the images as margins on the images are ignored. I'm going to try padding but I'm not so sure it'll work.
    You're lucky in one way ... you've clearly not lived through the bad old days of web design when this was how all pages had to be written! To create space around the image, use hspace and vspace (I'm sure you can figure out the difference between them!). The big disadvantage is that hspace adds the same to the left and right, vspace to the top and bottom, so you can't target one side only, as you would normally want to do with margin and padding.

  9. #9
    SitePoint Zealot robcub's Avatar
    Join Date
    May 2008
    Location
    London, England
    Posts
    135
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Hello Stevie D, as you say, I remember looking at source code during the nineties and seeing that it was all tables but I was messing around with Dreamweaver and Page Mill at the time thinking there must be a way to do WYSIWYG web design. I finally came to my senses only in 2005 and started web development seriously. I remember being glad at the time that I'd missed out on the table-based layouts.

    Anyhow, thanks for the hspace="3" vspace="3" tip. That works now.

    Thanks again Ralph, this is a template that a client will be inserting images into and they won't be able to put whitespace in images – you know how it is

  10. #10
    SitePoint Zealot robcub's Avatar
    Join Date
    May 2008
    Location
    London, England
    Posts
    135
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Ah, what a shame! The vspace and hspace didn't work.

    This:

    Boosey & Hawkes Newsletter

    is giving us this in Outlook:



    (Also Outlook appears to add an extra line before a p tag sometimes, but on other occasions doesn't! <--- off topic, sorry!)

  11. #11
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,614
    Mentioned
    413 Post(s)
    Tagged
    7 Thread(s)
    To be honest, a full-width picture would look much better anyway, and save you a lot of pain. Or, if the client can prepare images himself, the teach him/her to add some white space on the image.

  12. #12
    SitePoint Zealot robcub's Avatar
    Join Date
    May 2008
    Location
    London, England
    Posts
    135
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Thanks again, Ralph, I'll have another go at the client about that

  13. #13
    Mouse catcher silver trophy
    Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,836
    Mentioned
    113 Post(s)
    Tagged
    1 Thread(s)
    I don't know how picky Outlook is about these things, but you haven't got a valid Doctype on there, I'm not sure where you got yours from but W3C doesn't like it at all.

    And then you've got your image tags using a mixture of HTML, XHTML and fauXHTML (ie, ending align="left">, align="left"/> and align="left" />), which might mess things up further.

    Your best bet for email templates like this is to stick to HTML 4.01 Transitional. All the presentational attributes are valid, and you should find that all clients make the best show of it that they can.

  14. #14
    SitePoint Zealot robcub's Avatar
    Join Date
    May 2008
    Location
    London, England
    Posts
    135
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Thanks Stevie D, I've made it HTML 4.01 Transitional and got rid of trailing slashes and validated it as much as I could (there were a ton of open tags) - I got this code from a client and I supposed it was OK. Never assume anything.


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
  •