markwill2112 Posted August 21, 2010 Report Share Posted August 21, 2010 I added the following to a style sheet I am working on: img.floatLeft { float: left; margin: 4px; } img.floatRight { float: right; margin: 4px; } I then added e.g. <img src="image.jpg" class="floatLeft"> <p>Text...</p> to the body of the css to wrap text around an image. It worked fine and looked great in the browser. However, when I embedded the code in Outlook to send as an email as I do regularly with my CSS e-newsletters the 'floating' images formatting went awry. Is this an overflow:auto issue, i.e if I add this to my stylesheet will it lock the 'floated' images in place or is it something else causing them to move and formatting get messed up when sending in the body of the email? Quote Link to comment Share on other sites More sharing options...
falkencreative Posted August 21, 2010 Report Share Posted August 21, 2010 When coding email, you have to go back to the "old" style of coding, which unfortunately means tables and inline CSS styling. I wouldn't suggest floats, since they often don't get interpreted correctly by email clients. I have a couple links which has more info about this -- let me see if I can dig them up. Quote Link to comment Share on other sites More sharing options...
falkencreative Posted August 21, 2010 Report Share Posted August 21, 2010 Here they are: http://articles.sitepoint.com/article/code-html-email-newsletters http://www.mailchimp.com/resources/html_email_templates/ Quote Link to comment Share on other sites More sharing options...
markwill2112 Posted August 21, 2010 Author Report Share Posted August 21, 2010 Excellent resources! Thanks so much. Yes, sadly I had to revert to using tables for my e-newsletters that I send in Outlook! Quote Link to comment Share on other sites More sharing options...
Wickham Posted August 21, 2010 Report Share Posted August 21, 2010 Remember that Outlook 2007 is worse for html emails than Outlook 2002. The 2002 version will process background images but 2007 does not. There are some tricks to learn for background images. Here are some examples. It's set up as an email reply to a form submission, for instance if someone submits their email address to request a brochure or product details but the general principles for html emails are stated:- http://www.wickham43.net/formhtmlemail.php Quote Link to comment Share on other sites More sharing options...
newseed Posted August 21, 2010 Report Share Posted August 21, 2010 It's incredible that MS seems to go backwards when other email clients are pushing forward. Does anyone know if Outlook 2010 making a turn around in this regard? Quote Link to comment Share on other sites More sharing options...
markwill2112 Posted August 26, 2010 Author Report Share Posted August 26, 2010 It's incredible that MS seems to go backwards when other email clients are pushing forward. Does anyone know if Outlook 2010 making a turn around in this regard? I hope so then I can stop using tables! Quote Link to comment Share on other sites More sharing options...
Guest zackie40 Posted September 14, 2010 Report Share Posted September 14, 2010 (edited) Is this an overflow:auto issue, i.e if I add this to my stylesheet will it lock the 'floated' images in place or is it something else causing them to move and formatting get messed up when sending in the body of the email? Edited September 14, 2010 by Andrea Link Deleted - No Spam Please Quote Link to comment Share on other sites More sharing options...
Wickham Posted September 15, 2010 Report Share Posted September 15, 2010 Whatever the reason for MarkW's problem with floated images, the advice is not to use divs and not to use floats in html emails, only old-fashioned tables. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.