Hello...A recent newsletter design of mine is not rendering well in gmail and mobileme, but seems to be fine everywhere else. Here's my code.
Here's what's happening in gmail (note the extra large subheader, and everything below it being stretched across the whole screen):
And the gmail footer (removal of background color):
Here's what's happening in mobileme (notice the spacing between the header and subheader and drop shadow as well as text spacing in blocks):
And the mobile me footer (scrunched text and removal of background color):
I appreciate any insights! Thanks,
Without delving into this too far it looks like you've got nestled tables within your main table set to 100%. I'd reccomend defining the width in pixels, otherwise it could (and looks like it has) will stretch in ways you don't want depending on the browser.
You can also get rid of your initial table and instead align your 2nd table (defined as 600px wide) by aligning the table as something like:
<table width="600" border="0" cellspacing="0" cellpadding="0" align="center">
Thanks fyredefyre! That fixed most of my gmail problems. Still having problems with mobilme though.
Great to hear. Not too familar with Mobileme, however I can see some corrupt characters in your footer which is probably causing you grief.
<p class="footer"><strong>the Johnson Family</strong>
<p>12345 Abc Avenue, City, ST 12345</p>
<p>(222)123.4567 | firstname.lastname@example.org</p>
If that doesn't fix your issue then I'd suggest putting each line into it's own row and that ought to fix it.
Other than that the only advice I can give you it make sure you're putting images or text into an existing table, and not outside, otherwise the image could float just about anywhere. Good luck.