HTML-Mail: Some links not working in Outlook 2007
Question by bardiir
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:
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.)
Answer by Krazer
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.
