Unfortunately I can't post the sample code here, but I'm trying to debug an issue in which an HTML email that displays perfectly in both Firefox and IE standalone, ends up having its text center aligned after its framed by Gmail, but only in Internet Explorer (ie8)
Has anyone else had a similar experience? The HTML in question was generated by a business user in MSWord, so is full of the standard junk that you'd expect dealing with generated HTML, which makes debugging particularly heinous. I'm hoping that someone else might have experienced something similar before I end up re-writing the entire content by hand.
Without code this is nigh on impossible to sort out, however:
1- Use tables instead of divs in HTML emails (don't ask, just works better)
2- use inline styles as well as attributes (i.e. <td align="left" style="text-align: left;">)
3- wrap your content inside a one cell table with that cell aligned left as well.
If none of these work - Post some code ^_^
note: Don't use MS Word for emails - even if Outlook 2007 uses it for rendering....
Related
Welp, in my previous question, i was a table noob(probably still am) so i've learned to code table by hand and my html e-mail mostly looks fine now but in litmus tests, my footer appears weird. Some elements vertically align themselves to the middle.
<head></head>
Here is the js fiddle https://jsfiddle.net/zr00qgdr/ It's fine here. but if you go to litmus tests here: https://litmus.com/pub/533fe66/screenshots You'll see that bottom elements are messed up in outlook 2007/10/13. (I know they are images. But that's all i can do. Text is sadly not a choice...)
Any help is appreciated.
The fact is that Outlook uses Word for rendering HTML markup (message bodies).
It may not answer the question, but I hope you'll find the following series of articles helpful:
Word 2007 HTML and CSS Rendering Capabilities in Outlook 2007 (Part 1 of 2)
Word 2007 HTML and CSS Rendering Capabilities in Outlook 2007 (Part 2 of 2)
We generate quite large HTML emails - so hit the Outlook Email Client problem/software flaw where it decides to stick page breaks into the email if it thinks it's reached an A4 number of characters. [This is due to the Outlook Email Client using the Word engine to render it's HTML.]
This would not be a problem to us except that
It may occur in the middle of some HTML.
It's destructive.
Example of 1: If you have some html
<img src="http://
you may get
><img PAGE BREAK HERE
src="http://
Example of 2: If you have some html
<img src="http://
you may get
>**PAGE BREAK HERE** img src="http://
Which has destroyed the "<" of the "<img" tag.
Our emails are dynamic so each one may have this page break issue at different points in each email. :o( We try to get around it with 'sacrificial' areas of blank spaces to absord the page breaks - but this system starts to break down as our emails are become more complex over time.
Example of a potential work-around that did not work for us:
Mike The Coder - Page Break Before Always
Post that mentions issues in this area:
Horizontal Spacing Issues in Outlook 2007 and 2010
Do people know of other ways of trying to stop this or of working around it in the Outlook email client?
This article discusses a possible fix, but it would require a registry edit:
http://www.msofficeforums.com/outlook/6277-prevent-outlook-adding-line-breaks.html
Here is another article that has a workaround that could work for you possibly, without having to edit the registry:
http://answers.microsoft.com/en-us/office/forum/office_2010-outlook/line-break-in-plain-text-emails-in-outlook-2010/11d69847-f576-4002-b2fb-67bc59a69ce6?tab=AllReplies&tm=1329162544193
I'm pretty clueless on this issue at the moment so any help even small hints that might lead to the solution are really appreciated!
I've got an HTML mail that basically is a two column layout and in some cases links get unresponsive (they are basically clickable but nothing will happen when clicked) within Outlook 2007.
I've produced an as clean as possible example for an Email that has got that issue.
You can find a download here: http://static.bardiir.net/bugged_message.zip
The zip file contains the following:
The bugged message as MHT, EML and HTML files
Images used in the HTML-Version
If you don't trust the zip you can also access the html-version here:
http://static.bardiir.net/bugged_message/html_version.html
When you send the message to an Outlook 2007 client the right hand column link
Stet clita kasd gubergen, no sea takimata sanctus est will not be clickable.
If you can't reproduce from these source files please don't hesitate to ask and i'll happily send you a message that contains the bug.
Thanks in advance for any help :)
Update:
The message is originally generated with PHP on a server, if that's of any interest.
And if you remove the header-image or somewhat any part of the mail that's currently in there the link gets clickable, so the whole thing in combination seems to cause the issue.
Update2:
It's probably exactly the same bug as this but there's no answer there:
https://stackoverflow.com/questions/7420195/links-in-right-column-of-table-do-not-work-in-outlook-2007
Update3:
I just found out that the right hand column seems to be completely inert to anything. You cant even select text there (Outlook 2007 will crash). But if you tab-select the link and then press enter it works perfectly.
Update4:
I've got the perfectly same template with a left-hand column too, so basically only the order of the td cells is changed. With that ordering it always works. The links in both the main content as well as the sidebar are working perfectly.
Update5:
Even removing text only, no HTML-Tags at all, not even linebreaks will eventually enable clicking on the link. So if you go ahead and shorten every sentence in the above linked mail so only a few words without touch anything except the text nodes it will work again.
Update6:
I've built a completely valid version of the bugged message too like suggested in the answers. You can find it here: http://static.bardiir.net/bugged_message/html_version2.html
It's showing the same issue still but now all problems in validity are removed too.
(Validity shouldn't be the issue after all as the left-side column layout shows the same validation issues and is working correctly. Most of the validation issues are in fact only apparent in this example and not in the fully-filled newsletter that shows the same symptoms.)
It's hard to tell what's wrong with Outlook (stupid Word rendering engine). You can try opening the source in Outlook and see how Outlook is reformatting your html code.
I recreated your email using simpler HTML here. Hopefully this will resolve your issues.
Some things to take note of:
A number of email clients reject CSS shorthand for the font property.
Instead of using font tags, try adding the font-family property as an inline style to your table class to set the font type. It's also better not to use font intervals as well, because they may vary between email clients. It's better to keep all your style inline ensuring certain clients won't overwrite your style sheet with their own default one.
E.g. <table style="font-family: Arial, Helvetica, san-serif">
You should also limit yourself to one or two fonts + 1 (one for your primary, another as back up, plus a default system font, such as "san-serif" or "serif"). Nesting tables beyond 3-4 levels is just asking for trouble.
I used span tags instead of b tags for bold weight to avoid potential conflicts. I didn't use margin-top or padding, because certain clients like Hotmail ignore it.
Recreate your email, without the tables. You can do a quick test my using table2css.
There are two things which i have seen i.e. you are using two body html tags it might create a problem and another You are using Tested Tables and its the bad thing in Emails, I had also tested the best nested tables in email is about 8 Nested tables and going beyond that can also cause problem and if you are using them. Kindly use the tbody html tag also which would help in rendering this correctly for emails.
I want to print an HTML table.
Unfortunately, when I do, cells (rows) are often cut between two pages.
Also, browsers seem to trample over the page-break-inside property without any care, so that won't work.
The code in question:
<table>
<tr><td colspan="2">HEY YALL!</td></tr>
<tr><td>A!</td><td>B</td></tr>
</table>
Sorry -- I think there is no great way to go here -- the web still isn't made for printing.
One work-around for IE is to emulate version 8, so the page-break-inside: avoid will work. There's also a bit about windows and orphans settings. More here: http://msdn.microsoft.com/en-us/library/dd433064%28v=vs.85%29.aspx
You can also look for HTML+CSS - to - PDF conferters. I've seen a lot of different implementations of that sort of thing.
One thing I've done in the past also is to change the content-type to .doc and stream the HTML out to MS Word (because that's what my users have, and Word can read HTML now.). This works OK.
Take a look at this html page.
In Firefox it looks just like I want it to look, in IE it looks "a bit weird", and in Chrome it's all twisted.
What non-standard HTML I am using that makes it looks so different between browsers? Specifically, how can I fix the Chrome & IE versions to look more like Firefox?
Note that Chrome only goes haywire if all or almost all columns have the yellow stickies. If one or two columns are empty, then Chrome displays the page just like Firefox.
Edit - here is the fixed page.
The page doesn't have a DOCTYPE. It is important to have one to tell the browsers that your page is standards compliant. Start from there and ensure your page passes validation for your chosen DOCTYPE.
UPDATE: Good job on fixing the validation! Your problem now is that the table element follows two floated divs without any clearing. You must clear the floated elements so that the following elements are laid out correctly below them.
Try the following. Google "clearfix" for a more elegant solution.
<div style="float:left">....
<div style="float:right">....
<br style="clear:both"/>
<table ....
One of the first things I'd have to suggest is making sure that your code is valid if you want cross-browser friendly.
The posted code comes up with 33 errors.
FF isn't quite as picky as some other browsers can be, and gives a lot of leeway in terms of valid code.
Try validating and fixing the problems with validity, then check it again; it might look at least a bit better.
Try validating your CSS and HTML if possible. That usually helps remove the biggest of glitches.
validator.w3.org
Float your calendar table to the left