Gmail Background Image Overhang

2 replies
  • WEB DESIGN
  • |
See the attached image. For the life of me, I cannot figure this out.

The left image is how it appears online and how it's suppose to be displayed. The right image shows how it appears in gmail. There's overhang with the background color/image for gmail. I've set row and table heights, borders to 0, padding and margins to 0, yet all tops and bottoms of tables in gmail with background colors have various overhangs! Argh! How can I fix this?

The code for the top box is shown.
Code:
                              <table cellpadding="0" cellspacing="0" border="0" width="150px" bgcolor="#7064aa">
                                <tr>
                                  <td><img width="10px" height="10px" src="#" alt="" /></td>
                                  <td width="130px" height="10px"></td>
                                  <td><img width="10px" height="10px" src="#" alt="" /></td>
                                </tr>
                                <tr>
                                  <td colspan="3" valign="top" style="padding:0 10px; color:#ffffff" height="160px">
                                    <div align="center" style="margin-bottom:10px"><img width="130px" src="#" alt="" />
                                    </div>
                                    Discover fun travel careers with top companies like
                                  </td>
                                </tr>
                                <tr>
                                  <td colspan="3" valign="bottom" align="right" style="padding:0 7px"><a href="#"><img border="0" src="#" alt="Learn More Here" /></a>
                                  </td>
                                </tr>
                                <tr>
                                  <td><img width="10px" height="10px" src="#" alt="" /></td>
                                  <td height="10px"></td>
                                  <td><img width="10px" height="10px" src="#f" alt="" /></td>
                                </tr>
                              </table>
#background #gmail #image #overhang
  • Profile picture of the author Joshua Uebergang
    After further investigation, I've discovered it's not Gmail specific. It occurs in hotmail exactly the same. It doesn't occur in Outlook. Still confused though

    The overhangs occur when there's some background color or background defined. You can see it doesn't occur for the columns with images.

    Someone who solves this gets a beer.
    {{ DiscussionBoard.errors[2879423].message }}
    • Profile picture of the author Joshua Uebergang
      After hours trying to solve this, it turns out the images in the table cause the problem! ARGH! I need to put the images in the background. For example, the start should be.

      Code:
                              <table cellpadding="0" cellspacing="0" border="0" width="150px" bgcolor="#7064aa">
                                      <tr>
                                        <td background="# width="10px" height="10px"></td>
                                        <td width="130px" height="10px"></td>
                                        <td background="# width="10px" height="10px"></td>
                                      </tr>
                                      <tr>
      ...
      {{ DiscussionBoard.errors[2883213].message }}

Trending Topics