views:

896

answers:

2

I am trying to create an email two column flexible layout, which works in outlook 07, i have created a successful version in outlook 03, hotmail, gmail, yahoo and aol, in both IE and Mozilla Firefox, however when testing in outlook 07 it strips out my float left css.

What I would like is a layout that has a photo on the left and text on the right about the photo, whens its full screen however when the screen size is reduced, for example on a mobile phone, for the text to move under the photo. When the screen is big I would like it to move back to the two column appearance.

<div>
   <div style="float:left;width:230px;">
      <a href="http://www.google.co.uk" target="_blank"><img src="http://www.maip.com/media/images/Google%20Logo.jpg" border="0" width="230" height="150" style="margin-bottom:5px;"></a>
   </div>
  <div>
 <h4>Test, Test, Test</h4>
 <p style="margin:0 0 0px 0;">Test</p>
 <p>Test text test text kfjhsdkhfjkdshjkf fjsdlfkjsdljflsdjfl sd dfkljflsdjfkljsdlkfjklsdjf dfksdjfkljsdklfjklsdf sdfjsdljfldjfklsd,f lkl sdjkl jdkl jdkljfdkljfklsdjfklj ldk jlksd  Test text test text Test text test text Test text test text Test text test text Test text test text Test text test text Test text test text  
 <a href="http://www.google.co.uk/" target="_blank" >Read more</a>.</p>
 <p>Arrange to view this property</a></p>
  </div>
</div>

Mozilla renders the html like i want it, but IE does not, currently on IE 6

Any help on this matter really would be much appreciated as I have been searching all day and the only thing I can find is fixed width answers but nothing that is flexible.

Thanking everyone in advance for their answers

Cameron

+1  A: 

With Outlook 2007, Microsoft decided to stop using the IE engine for rendering the HTML, and use the Word engine instead.

This means you are severely restricted with the styling you can apply if you need to make your emails work for Outlook 2007 users.

Unfortunately, float is one of the features that Outlook 2007 does not support - for column layout you are forced to use tables. :(


Note, to get IE working better, make sure you have a valid DOCTYPE so it does not revert to Quirks Mode. The simplest DOCTYPE that works best across all user agents is the proposed HTML5 DOCTYPE, which is simply:

<!DOCTYPE html>

That's all there is to it - none of the other stuff is needed. (Note, whilst it works in browsers, the W3 validator will complain about this doctype - you can use the override DOCTYPE feature if you want to use the validator.)


Back to what CSS you can use in emails... There is a PDF showing which CSS attributes are supported across different clients here:
http://www.campaignmonitor.com/reports/Guide_to_CSS_Support_in_Email_2007.pdf

And here are some further details about what is and isn't supported:
http://www.email-standards.org/clients/microsoft-outlook-2007/
http://www.campaignmonitor.com/blog/archives/2007/04/a_guide_to_css_support_in_emai_2.html

Peter Boughton
Yep, Outlook 2007 CSS sucks.
Sam Murray-Sutton
A: 

Thank you for the speedy response, however I have read all of the documents and I was aware of the limitations of outlook 07 of what you can and cant use.

Regarding the use of tables this is NOT an option as when I compress the table to be the width of a mobile phone the right hand td does not wrap to be underneath the picture as I want it to.

I dont want to have to admit defeat on this issue so I am hoping and praying someone can help me

So are you asking about Outlook 2007 (for PCs) or Outlook Mobile (for mobile phones) ?
Peter Boughton