Gmail break issues

**CrystalSC** · 10-12-2011, 06:49 PM

I have a Photoshop sliced email. (Yes, yes, I know image-only emails are bad. Forget the why of it, please.)

It is rendering perfectly in Outlook and Apple mobile mail but not Gmail. Say what?! I do not know what is causing the issue and Google has not been able to lead me to an answer.

I've attached an screenshot and here is the html. Could anyone tell me what's wrong with my coding that's causing the Gmail problem? Thanks!

Code:

<html>
    <head>
        <title>Win a $100 Gift Card to Halloween Express</title>
    </head>
    <body marginwidth="0" marginheight="0" bgcolor="#FFFFFF" leftmargin="0" topmargin="0">
        <!-- Save for Web Slices (HalloweenExpress.psd) -->
        <table width="600" height="810" cellspacing="0" cellpadding="0" border="0" align="center" id="Table_01">
            <tbody>
		<td colspan="3">
			<a href="http://www.facebook.com/pages/Halloween-Express-GreenvilleSpartanburgAnderson/176005085754393" alt="Halloween Express facebook" border="0" name="www_halloweenexpress_com_" xt="SPCLICK"><img src="http://digital-sales.radiotown.com/HalloweenExpress_01.jpg" width="345" height="197" alt="image 01"></td>
		<td>
			<a href="http://www.facebook.com/pages/Halloween-Express-GreenvilleSpartanburgAnderson/176005085754393" alt="Halloween Express facebook" border="0" name="www_halloweenexpress_com_" xt="SPCLICK"><img src="http://digital-sales.radiotown.com/HalloweenExpress_02.jpg" width="255" height="197" alt="image 02"></td>
	</tr>
	<tr>
		<td colspan="4">
			<a href="http://www.facebook.com/pages/Halloween-Express-GreenvilleSpartanburgAnderson/176005085754393" alt="Halloween Express facebook" border="0" name="www_halloweenexpress_com_" xt="SPCLICK"><img src="http://digital-sales.radiotown.com/HalloweenExpress_03.jpg" width="600" height="64" alt="image 03"></td>
	</tr>
	<tr>
		<td rowspan="2">
			<a href="http://www.facebook.com/pages/Halloween-Express-GreenvilleSpartanburgAnderson/176005085754393" alt="Halloween Express facebook" border="0" name="www_halloweenexpress_com_" xt="SPCLICK"><img src="http://digital-sales.radiotown.com/HalloweenExpress_04.jpg" width="220" height="226" alt="image 04"></td>
		<td colspan="3">
			<img src="http://digital-sales.radiotown.com/HalloweenExpress_05.jpg" width="380" height="176" alt="image 05"></td>
	</tr>
	<tr>
		<td colspan="3">
			<a href="http://www.facebook.com/pages/Halloween-Express-GreenvilleSpartanburgAnderson/176005085754393" alt="Halloween Express facebook" border="0" name="www_halloweenexpress_com_" xt="SPCLICK"><img src="http://digital-sales.radiotown.com/HalloweenExpress_06.jpg" width="380" height="50" alt="image 06"></td>
	</tr>
	<tr>
		<td colspan="2">
			<img src="http://digital-sales.radiotown.com/HalloweenExpress_07.jpg" width="328" height="226" alt="image 07"></td>
		<td colspan="2" rowspan="2">
			<a href="http://www.facebook.com/pages/Halloween-Express-GreenvilleSpartanburgAnderson/176005085754393" alt="Halloween Express facebook" border="0" name="www_halloweenexpress_com_" xt="SPCLICK"><img src="http://digital-sales.radiotown.com/HalloweenExpress_08.jpg" width="272" height="322" alt="image 08"></td>
	</tr>
	<tr>
		<td colspan="2">
			<img src="http://digital-sales.radiotown.com/HalloweenExpress_09.jpg" width="328" height="96" alt="image 09"></td>
	</tr>
	<tr>
		<td>
			<img src="images/spacer.gif" width="220" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="108" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="17" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="255" height="1" alt=""></td>
	</tr>
            </tbody>
        </table>
        <p style="text-align: center;"><span style="font-size: x-small;">You are receiving this email because you subscribed to Tribal Direct. <a target="_blank" href="#SPCUSTOMOPTOUT" xt="SPCUSTOMOPTOUT" name="Click here to unsubscribe">Click here to unsubscribe</a></span></p>
        <!-- End Save for Web Slices -->
    </body>
</html>

**djr33** · 10-12-2011, 07:13 PM

I don't know how to fix it, but here's my guess about the problem:

Those other mail clients are not web pages, so they treat the HTML in your email as something independent. Gmail is a web page, and it has its own styling, so your HTML is rendered within the existing styles of Gmail.

So to fix this you will probably have to guess about the problem and override the defaults in Gmail for image spacing (or whatever this is).

One option could be to copy the active source code (for example, in Firefox, you can select something and right click for "view selection source" and that will give you the current computed source, not just the original files' text-- so it includes the effects of Javascript, external pages, etc.), and then you can attempt to redesign the page that way.

Another option is to test the code as a page in other web browsers. And also to test gmail in different browsers. That may show that it's actually a browser problem, not something gmail is doing.