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.
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.
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
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.
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.