i'm become very frustrated about this stuff
i'm using html email boilerplate framework to build my own one. from some test it's still not well rendered on outlook 2007
here to grab my code http://pastebin.com/nh8R4Lng
screenshots
thanks
All your images need style="display:block;"
Try this, it seems like an old fashioned table length/width issue. Outlook 2007 doesn't handle unset table widths very well. http://pastebin.com/swXTzT19
I forced a few of the td widths to be 30 and made the border left and right longer and ran some litmus tests. It looked good to me.
Thanks for using the boilerplate.
Related
I have a fluid html emailer with the following layout.
It looks cool when tested in browsers and phone browsers but the html breaks when in MS outlook.
Layout in outlook:
The images in the center are inside a table with "display:inline-block" and the table is center aligned.
Can anyone help me solve this issue with outlook?
PS. The entire emailer in designed using tables only.
Outlook uses MS Word to render HTML, which could cause part of the problem.
The other thing to note with emailing HTML is that your styles can't be in classes, but rather need to be inline.
i have a problem with html mails and outlook. If i send the newsletter and open it in outlook there are no images, thats ok. And the table layout looks alright. Then, i download the images and it looks perfect. The pictures/images fittig exact in cells. And then, 1 sec later the layout is broken. Im using only inline css, and tables. The images width and height are right, no javascript. I dont get it.
If this HTML code is generated through Photoshop/Dreamweaver, or if you are using colspan or rowspan then this indeed is a common effect. My solution was always nest tables in tables, other than go the other way and use rowspan/colspan.
Hope it helps and also a bit of code examples or origin(generating software) won't hurt.
I am in the process of updating an internal company website.
On the website is a table of summary data. Each day this table is copied from the page into an email and sent to people using Outlook 2010. The company currently is using IE8.
The problem is that the new website is using Twitter Bootstrap for the table styling. When copying and pasting the table into Outlook, most of the styling is missing.
The old website has classes attached to each tr, td, etc.
Chrome works without any issues on the new website.
Here are some examples of the table and problem:
Old site - http://jsbin.com/ifeqav/1/edit
New site - http://jsbin.com/iwuven/1/edit
Does anyone know of a fix for this? I have tried this suggestion but it doesn't appear to work correctly with bootstrap.
Does IE9 fix this issue?
Outlook 2007 and later do not use IE for HTML message formatting. Instead they use Word's (yes, it's terrible, everyone knows). Word does not support many features in CSS2, let alone CSS3. This unfortunately means the best way to serve graphical emails to Outlook users is to send them 1990s-era HTML emails: the horror of <table> for layout and the return of the evil spacer.gif. This abhorrent practice is acceptable because Outlook/Word does not interpret any semantic content.
Or just include a link at the top of your emails that say: "Using Outlook? Click here to view your message in your browser".
I have just designed my first html eshot and tested it on different email clients using Mailchimps inbox inspector. Its fine across all clients as far as I can see except for Outlook 2007 & 2010. The image on the left moves out of place quite a bit. Outlook 2003 and all others are fine, its just 2007 & 2010 causing the problem.
Weblink (how it should look)
Outlook 2007 & 2010 (how it shouldn't look):
Does anybody know whats wrong? I'v tried all sorts and it nothing is working, its driving me crazy.
My estimation, looking at your code, is colspan is causing an issue. In my experience with coding e-mails, colspan and rowspan should be avoided. If you need to change the number of columns, close the table and start a new table. It's a lot of extra markup, but that's the deal with coding emails.
Coding e-mails is very, very challenging. There's many articles on the challenges with the various e-mail clients and their quirks - not to mention GMail, AOL, Yahoo!, etc.
I would suggest starting here:
http://www.campaignmonitor.com/css/
Their chart gives you a quick overview of the compatibility of various css selectors, etc. with the email clients out there.
Then, you need to learn some of the strange things that happen, such as the margin that GMail adds to images. (Add display:block; to the images: http://www.campaignmonitor.com/blog/post/3132/how-to-stop-gmail-from-adding-a-margin-to-your-images/)
A tool that I have begun to use is Email On Acid, which lets you preview the e-mails in a WIDE variety of email clients.
I an having a problem with my HTML email.
My email is working correctly in most cases, the problem arises when I send to windows live mail.
1) opening the email in widoew live mail in IE all of the text becomes centered even though I have used the 'style="text-align:left;"' and the 'align="left"' options, I have tried them together and tried them seperate.
2)opening in windows live mail in anything other than IE the images have spacing below them. I have used the 'display:block;' and 'border-collapse:collapse;' and set the margin and padding to zero.
I used firebug in firefox to have a look and see what the problem is, it shows either a span tag or a p tag wrapping the img tags. I have no idea why it is doing this or how to fix it!
If anyone can help i'd be really greatful.
Thanks
no the align="left" doesn't work, If I use the align="justify" or align="right" it seems to work but not align="left". I have realised that I am only getting these problems when I send through outlook, I am using outlook 2007. after some studying with firebug it seems to me that outlook is adding its own classes to the email. it seems to be adding either or around all of my images with classes that seem to belong to outlook. I know outlook is not the best program in the world but on some occasions it is the only way I can send emails. is there any way I can get into the code that outlook is producing and change it, I know that sounds a bit drastic but it would be really good if I could. thanks for all the help guys, really appreciate.
A lot of mail clients support only older versions of html. gmail for example will not respect any css file (more information on email on acid) so you are restricted in what you can do with styling.
You can test how your email will look in various clients using online services such as email on acid or litmus.
I would suggest keeping the design very basic and using an old style table based layout.