CODEWITHSUNDEEP
gmailhtml-email
David Heller
David Heller

Reputation: 11

Images displaying the wrong size or with incorrect spacing in Gmail app

I have a table based html email which displays correctly in Outlook, Thunderbird, and Gmail in a web browser. When I view the email in the Gmail app on an android device the images fail to line up. I have already used the tried and true style="display:block" fix for images in Gmail with no luck as well. Setting border-collapse:collapse; on the table also seemed to make no difference. Strangely the result seems to vary based on the device used. For example, my sample code below on a Galaxy Nexus renders the row with three images narrower than the rows above and below it. On a Nexus 5 the result is the opposite, with the three image row displaying wider than the other rows. I think the problem may be due to the way the app is scaling the email to fit the screen. Or I've overlooked something really basic. I would greatly appreciate any help or ideas.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<body bgcolor="#FFFFFF">
<table id="Table_01" width="600" height="619" border="0" cellpadding="0" cellspacing="0">
    <tr>
        <td colspan="3" style="width:600px; height:454px;">
            <img src="http://www.netmockup.com/gmailtest/images/index_01.png" width="600" height="454" alt="" border="0" style="display:block;" /></td>
    </tr>
    <tr>
        <td style="width:203px; height:104px;">
            <img src="http://www.netmockup.com/gmailtest/images/index_02.png" width="203" height="104" alt="" border="0" style="display:block;" /></td>
        <td style="width:194px; height:104px;">
            <img src="http://www.netmockup.com/gmailtest/images/index_03.png" width="194" height="104" alt="" border="0" style="display:block;" /></td>
        <td style="width:203px; height:104px;">
            <img src="http://www.netmockup.com/gmailtest/images/index_04.png" width="203" height="104" alt="" border="0" style="display:block;" /></td>
    </tr>
    <tr>
        <td colspan="3" style="width:600px; height:61px;">
            <img src="http://www.netmockup.com/gmailtest/images/index_05.png" width="600" height="61" alt="" border="0" style="display:block;" /></td>
    </tr>
</table>
</body>
</html>

Upvotes: 1

Views: 6594

Answers (1)

Bidstrup
Bidstrup

Reputation: 1617

First of all.. most of the android mail app are just horrible, they dosnt render html as any other mail client.

You have to make it <td width="203" height="104"> and not <td style="width:203px; height:104px;">, so not in style, but directly on the <td>.

I have found that android gmail app needs a style="min-width: XXX px" on all tds' otherwise it dosnt care about the widths.

See results in litmus: https://litmus.com/pub/9c8ab31

So the final code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<body bgcolor="#FFFFFF">
<table id="Table_01" width="600" height="619" border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td width="600" height="454" colspan="3"  style="min-width:600px"><img src="http://www.netmockup.com/gmailtest/images/index_01.png" width="600" height="454" alt="" border="0" style="display:block;" /></td>
  </tr>
  <tr>
    <td width="203" height="104" style="min-width:203px"><img src="http://www.netmockup.com/gmailtest/images/index_02.png" width="203" height="104" alt="" border="0" style="display:block;" /></td>
    <td width="194" height="104" style="min-width:194px"><img src="http://www.netmockup.com/gmailtest/images/index_03.png" width="194" height="104" alt="" border="0" style="display:block;" /></td>
    <td width="203" height="104" style="min-width:203px"><img src="http://www.netmockup.com/gmailtest/images/index_04.png" width="203" height="104" alt="" border="0" style="display:block;" /></td>
  </tr>
  <tr>
    <td width="600" height="61" colspan="3" style="min-width:600px"><img src="http://www.netmockup.com/gmailtest/images/index_05.png" width="600" height="61" alt="" border="0" style="display:block;" /></td>
  </tr>
</table>
</body>
</html>

Upvotes: 2

Related Questions