I'm building an HTML email that lays out just fine in every combination Litmus has except for MobileMe. After some investigation, I figured out that the layout problem is limited to MobileME + IE.
If I have code that looks like this:
Hilton Oak Lawn Hotel <br> 9333 South Cicero Avenue <br> Oak Lawn IL, 60453
MobileMe + IE displays like this:
Hilton Oak Lawn Hotel
9333 South Cicero Avenue
Oak Lawn, IL 60453
It's almost like this combination inserts either two break tags whenever it sees a single break tag, or this combination adds margin/padding to the break tag.
Anybody ever seen this before?
Might be worth a try to change
<br> to the valid XML
I even tried the truly valid <br />, to no avail.
Thanks for the suggestion, though. If only it had been that simple.
Mobile Me has a funny way of displaying emails. If you use paragraph tags instead of a line break it'll show up fine but then the rest of your emails are going to break. Stick with br tags because only .07% of people have Mobile Me (campaignmonitor.com).
Thanks for the reply, but I'm confused. Are you saying that I should abandon all paragraph tags, and only use break tags if I want rendering to be proper in MobileMe? That would be kind of a bummer for us, though not impossible. I suppose we could use span tags for style declarations, and the break tags for line breaks.
Also, this doesn't quite answer why the layout looks fine in MobileMe + Webkit, or MobileMe + Firefox.
How many users do you have with the combination MobileMe + IE? My company has zero.
MobileMe usage in all browsers combined is 0.07% ... How many of those Apple customers access their email in IE? And how many of this fraction of a fraction of a percent will be very upset if there's an extra
<br> in their email?
Don't worry about it :)
Of course I know that already. Partially, I'm curious (because I can't figure it out), partially it seems like a layout bug that I should be able to fix, and partially it's the last layout bug we have that's of any significance. I was hoping the solution was fairly easy and well-known. If I can't find an answer, I'll just bail and not lose much sleep over it.
Ben, how come you are using span tags? This is how I show all my text and links and haven't had any problems yet.
<td align="left" style="padding-left:25px; padding-right:25px;">
<font style="font-family:Verdana, Arial, Helvetica, sans-serif; font-size:12px; color:#333333;">example plain text</font><br /><a href="|LINK|" style="font-family:Verdana, Arial, Helvetica, sans-serif; font-size:12px; color:#CC0000;">example link</a>
I've found that to be a lot more effective then span tags.
I'm not using span tags--at least not yet. It sounded like that was chrisribar's suggestion.
I'm surprised you've had success with font tags. My experience has not been good with those--too many clients do wacky things with them.