Layout goes to hell in Gmail

My beloved Gmail has struck me a nasty blow. Observe (shrunk for speedy loading):

http://bopjodesign.com/xactlyit/invites/toronto/gmail.html

Here's the (correct) way it looks in (most) other clients:

http://bopjodesign.com/xactlyit/invites/toronto/toronto.html

Can anyone tell me why the 'guts' of the email are laying out to the side in Gmail?

fyredefyre fyredefyre, 7 years ago

A couple of quick fixes should stop this from happening:

img { display: block; }

Also within your nestled tables remove any reference to the % and change with a pixel value instead, as it looks like Gmail is rendering this to fit on the whole screen.

Let me know if this helps you out.


www.phenom.com.au - Everything Email.
Email: jordan.hunt@phenom.com.au Skype: fyredefyre
BThies BThies, 7 years ago

Try this instead:

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Toronto Invite</title>
<style type="text/css">
<!--
table {
    border-collapse:collapse;
}
-->
</style>
</head>
<body bgcolor="#000000" marginheight="0" marginwidth="0" style="margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; padding-left:0px; padding-right:0px; padding-top:0px; padding-bottom:px;">
<table width="100%" cellpadding="0" cellspacing="0" border="0">
  <tr>
    <td bgcolor="#000000"><table align="center" width="734" border="0" cellpadding="0" cellspacing="0">
        <tr>
          <td width="734" bgcolor="#000000"><div style="font-size:11px;">&nbsp;</div>
            <div align="center" style="color:#FFFFFF; font-family:'Times New Roman', Times, serif; font-size:10px;">Having trouble reading this email? Click <a style="color:#e96a03;" href="http://www.bopjodesign.com/xactlyit/invites/toronto/toronto.html">here</a> to view it in a browser</div>
            <div style="font-size:11px;">&nbsp;</div></td>
        </tr>
        <tr>
          <td width="734" bgcolor="#000000"><table width="734" border="0" cellpadding="0" cellspacing="0">
              <tr>
                <td width="70"><img src="http://bopjodesign.com/xactlyit/invites/toronto/images/header_left.jpg" width="70" height="311" style="display:block;" /></td>
                <td width="607"><img src="http://bopjodesign.com/xactlyit/invites/toronto/images/header_middle.jpg" alt="A Sophisticated Evening of Unique Value - Febuary 18th, 2010" width="607" height="311" style="display:block;" /></td>
                <td width="57"><img src="http://bopjodesign.com/xactlyit/invites/toronto/images/header_right.jpg" width="57" height="311" style="display:block;" /></td>
              </tr>
            </table>
            <table width="734" border="0" cellpadding="0" cellspacing="0">
              <tr>
                <td width="70"><img src="http://bopjodesign.com/xactlyit/invites/toronto/images/r2_left.jpg" width="70" height="245" style="display:block;" /></td>
                <td width="35">&nbsp;</td>
                <td width="537" align="center" valign="top" bgcolor="#000000"><div align="center" style="color:#FFFFFF; font-family:'Times New Roman', Times, serif; font-size:15px; line-height:21px;">Join Empowered Networks and CA as you enjoy an evening of unique value. We know that you will enjoy our sophisticated evening of exquisite beverages, hors d'oeuvres, hand-rolled cigars, desserts and coffee at Club V, while we also engage in a lively discussion on building an end-to-end view of IT and <strong>&quot;Changing the Game with Service Assurance.&quot;</strong> Come join the conversation!</div>
                  <div style="font-size:15px;">&nbsp;</div>
                  <div style="font-size:15px;">&nbsp;</div>
                  <img src="http://bopjodesign.com/xactlyit/invites/toronto/images/r2_middle.jpg" width="484" height="65" style="display:inline;" /></td>
                <td width="35">&nbsp;</td>
                <td width="57"><img src="http://bopjodesign.com/xactlyit/invites/toronto/images/r2_right.jpg" width="57" height="245" style="display:block;" /></td>
              </tr>
            </table></td>
        </tr>
        <tr>
          <td width="734" bgcolor="#000000"><img src="http://bopjodesign.com/xactlyit/invites/toronto/images/r3_all.jpg" width="734" height="73" alt="Location | Agenda" style="display:block;" /></td>
        </tr>
        <tr>
          <td width="734" bgcolor="#000000"><table width="734" border="0" cellpadding="0" cellspacing="0">
              <tr>
                <td width="70"><img src="http://bopjodesign.com/xactlyit/invites/toronto/images/r4_left.jpg" width="70" height="203" style="display:block;" /></td>
                <td width="303" valign="top" align="left"><table width="243" cellpadding="0" cellspacing="0" border="0">
                    <tr>
                      <td width="243"><div align="center" style="color:#e96a03; font-family:'Times New Roman', Times, serif; font-size:20px;">Club V</div>
                        <div align="center" style="color:#FFFFFF; font-family:'Times New Roman', Times, serif; font-size:13px;">88 Yorkville Ave, Toronto, ON M5R 1C1</div>
                        <div align="center" style="font-family:'Times New Roman', Times, serif; font-size:13px;"><span style="color:#e96a03;"><a style="color:#e96a03;" href="http://www.vclubv.com">www.vclubv.com</a></span> <span style="color:#FFFFFF; font-size:13px;">416-975-4397</span></div></td>
                    </tr>
                  </table>
                  <div style="font-size:18px;">&nbsp;</div>
                  <div style="font-size:18px;">&nbsp;</div>
                  <div style="font-size:8px;">&nbsp;</div>
                  <img src="http://bopjodesign.com/xactlyit/invites/toronto/images/coolest.jpg" width="276" height="47" style="display:block;" alt="Coolest Nightclub in Town!" /></td>
                <td width="304" valign="top"><table width="304" border="0" cellspacing="0" cellpadding="0">
                    <tr>
                      <td width="49" align="right" valign="top"><div align="left" style="color:#e96a03; font-family:'Times New Roman', Times, serif; font-size:13px; line-height:15px;">5:30pm</div></td>
                      <td width="255"><div align="left" style="color:#FFFFFF; font-family:'Times New Roman', Times, serif; font-size:13px; line-height:15px;"><span style="text-decoration:underline;">Arrival</span><br />
                          Hors d oeuvres and Cocktails</div></td>
                    </tr>
                    <tr>
                      <td width="49" align="right" valign="top"><div align="left" style="color:#e96a03; font-family:'Times New Roman', Times, serif; font-size:13px; line-height:15px;">6:30pm</div></td>
                      <td width="255"><div align="left" style="color:#FFFFFF; font-family:'Times New Roman', Times, serif; font-size:13px; line-height:15px;"><span style="text-decoration:underline;">Presentation</span><br />
                          &quot;Changing The Game with Service Assurance&quot;<br />
                          Mark Luckianchuk, VP Executive Advisor - CA</div></td>
                    </tr>
                    <tr>
                      <td width="49" align="right" valign="top"><div align="left" style="color:#e96a03; font-family:'Times New Roman', Times, serif; font-size:13px; line-height:15px;">7:30pm</div></td>
                      <td width="255"><div align="left" style="color:#FFFFFF; font-family:'Times New Roman', Times, serif; font-size:13px; line-height:15px;"><span style="text-decoration:underline;">Scotch Tasting</span><br />
                          Selections of Single Malt Scotch<br />
                          Paired with Gourmet Foods<br />
                          Led by Local Scotch Expert</div></td>
                    </tr>
                    <tr>
                      <td width="49" align="right" valign="top"><div align="left" style="color:#e96a03; font-family:'Times New Roman', Times, serif; font-size:13px; line-height:15px;">8:30pm</div></td>
                      <td width="255"><div align="left" style="color:#FFFFFF; font-family:'Times New Roman', Times, serif; font-size:13px; line-height:15px;"><span style="text-decoration:underline;">After - Thoughts</span><br />
                          Cognac &amp; Cigars on HEATED 
                          patio. <br />
                          Dessert and Coffee</div></td>
                    </tr>
                  </table></td>
                <td width="57"><img src="http://bopjodesign.com/xactlyit/invites/toronto/images/r4_right.jpg" width="57" height="203" style="display:block;" /></td>
              </tr>
            </table></td>
        </tr>
        <tr>
          <td width="734" bgcolor="#000000"><table width="734" border="0" cellpadding="0" cellspacing="0">
              <tr>
                <td width="70"><img src="http://bopjodesign.com/xactlyit/invites/toronto/images/bottom_left.jpg" width="70" height="197" style="display:block;" /></td>
                <td width="276"><img src="http://bopjodesign.com/xactlyit/invites/toronto/images/hipster.jpg" width="276" height="197" alt="This could be you" style="display:block;" /></td>
                <td width="331"><a href="http://www.regonline.com/empowered_ca_clubv"><img src="http://bopjodesign.com/xactlyit/invites/toronto/images/click_here.jpg" alt="Click here to register!" width="317" height="78" border="0" style="display:block;" /></a>
                  <div align="center" style="color:#FFFFFF; font-family:Arial, Helvetica, sans-serif; font-size:11px; line-height:15px;">FOR MORE INFORMATION, PLEASE CONTACT US AT</div>
                  <div align="center" style="color:#ee4324; font-family:Arial, Helvetica, sans-serif; font-size:11px; line-height:15px;"><a style="color:#ee4324;" href="mailto:EVENTS@XACTLYIT.COM">EVENTS@XACTLYIT.COM</a></div></td>
                <td width="57"><img src="http://bopjodesign.com/xactlyit/invites/toronto/images/bottom_right.jpg" width="57" height="197" style="display:block;" /></td>
              </tr>
            </table></td>
        </tr>
        <tr>
          <td width="734"><img src="http://bopjodesign.com/xactlyit/invites/toronto/images/bottom_border.jpg" width="734" height="31" style="display:block;" /></td>
        </tr>
        <tr>
          <td width="734"><img src="http://bopjodesign.com/xactlyit/invites/toronto/images/logos.jpg" alt="Sponsored by Empowered Networks and CA" width="734" height="74" style="display:block;" /></td>
        </tr>
      </table></td>
  </tr>
</table>
</body>
</html>

Brian Thies
Professional Email Developer
Thies Publishing
BThies BThies, 7 years ago

Oh, you probably want the "why" as well.

- Every <TD> should have an EXACT set px amount to it (except for the initial 100% container).
- There were a couple missing beginning/closing table elements
- Margin & Padding are not fully supported, so extra columns are added for horizontal spacing as well as <DIV>'s for vertical spacing
- Some of the nested tables were unnecessary
- <P> tags tend to display different across various e-mail clients (thus why I use <DIV>'s)
- As fyredefyre stated, images need to have display:block or display:inline - or you'll run into a number of display issues


Brian Thies
Professional Email Developer
Thies Publishing
bopjo1 bopjo1, 7 years ago

You guys are incredibly helpful. Thanks very, very much! It was driving me crazy. I'm gonna study the code and your explanations thoroughly tomorrow and test the email in the other email clients after a good night's sleep.

Thanks again for your very generous assistance.

bopjo1 bopjo1, 7 years ago

You're using empty divs for vertical spacing. That's an interesting technique. A substitute for paragraph margins....

You put <tr> tags within <td> tags. I never knew you could do that...

bopjo1 bopjo1, 7 years ago

I see now what you mean by the missing table elements. Right near the top I was missing a <tr>. Strange that it rendered properly in Outlook 2007 with such a glaring omission.

jmp909, 7 years ago

MS renderers tend to be quite forgiving on bad table code., which is why you need to test across numerous clients

i would suggest

Desktop:
Pegasus (free)
Eudora (free)
Thunderbird (free)
Outlook Express
Outlook 2003
Outlook 2007

Browser-based (Firefox & IE):
Hotmail
Gmail
AOL
Yahoo
Mail2Web (for Pop3)

Also Entourage for Mac and Lotus Notes 8.5 if you can

it'll take a while to be able to code a consistent look across these, but trial&error and persistence will pay off!

j.

200,000 companies around the world can't be wrong.

From Australia to Zimbabwe, and everywhere in between, companies count on 
Campaign Monitor for email campaigns that drive real business results.

Get started for free
1-888-533-8098