Getting Extra Vert between tables Gmail Firefox

I'm trying to figure out why I'm getting extra vertical space between tables using gmail / fire fox...hotmail/firefox, and a few other firefox/email solutions.  Looks fine in Outlook .

Thanks in advance

Jarrod Jarrod, 5 years ago

Hi torweb,

If you could kindly post your HTML code here, we'll gladly take a look over it and run some tests.

roshodgekiss roshodgekiss, 5 years ago

To second what Jarrod said, also try adding img { display: block; } to your styles. This tends to clear up a lot of these issues.


Get in touch with us on Twitter: http://twitter.com/campaignmonitor
We're also on Facebook: http://facebook.com/campaignmonitor
torweb, 5 years ago

The img dispaly: block; helped but I've still go this big space between title and description sections.  The code is below...thanks in advance

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>WA REA</title>
<style type="text/css">
<!--

body  {

    margin-top: 0px;
}

td a:link, a:visited { color: black; } /* just using a color that stands out */

#container {
    width: 100%;
}

img { display: block; }

.banner_box   {

            border-top-color:#333333;
            border-top-style:solid;
            border-top-width:thin;

}

    td.permission {
            font-family: Arial, Helvetica, sans-serif;
            font-size: 11px;
            font-weight: normal;
            color: #333333;
            padding: 20px 0 10px 0;
        }
        td.permission a {
            font-family: Arial, Helvetica, sans-serif;
            font-size: 11px;
            font-weight: normal;
            color: #000000;
        }
       .boxtop  {

    margin-top: 30px;
    }

      .sale_box  {
       
       background-color: #415968;
       color:#FFFFFF;
       width: 214px;
       height: 300px;
      
      }
      
.person_txt  {

font:Arial, Helvetica, sans-serif;
font-size:16px;
color: #B16F0E;
}

.sale_header_txt  {

font:Arial, Helvetica, sans-serif;
font-size:17px;
font-weight: normal;
color: #ffffff;
}

.sale_sub_header_txt  {

font:Arial, Helvetica, sans-serif;
font-size:13px;
line-height: 28px;
font-weight:bold;
color: #ffffff;
}

.contact   {
font:Arial, Helvetica, sans-serif;
font-size:11px;
color: #000000;

}

.webtext   {
font:Arial, Helvetica, sans-serif;
font-size:11px;
color: #000000;

}

.property_info   {

font:Arial, Helvetica, sans-serif;
font-size:12px;
color: #ffffff;
}

.address_info   {

font:Arial, Helvetica, sans-serif;
font-size:12px;
color: #ffffff;
}

.footer_1 {

font:Arial, Helvetica, sans-serif;
font-size:11px;
color: #000000;
line-height: 20px;
border-top-color: #415968;
border-top-style:solid;
border-top-width:thin;

}

.footer_2 {

font:Arial, Helvetica, sans-serif;
font-size:8px;
color: #000000;
margin-top: 8px;

}

ul {margin: 0px; 
    padding-left: 12px;}
    
ul li {
  line-height: 19px;
}
a:link {
    color: #415968;
    text-decoration: none;
}
a:visited {
    text-decoration: none;
    color: #415968;
}
a:hover {
    text-decoration: none;
    color: #415968;
}
a:active {
    text-decoration: underline;
    color: #415968;
}

/* lists */ 
ol, ul { margin: 0; padding: 0; }
td#bullets ol li, td#bullets ul li { margin-left: 1.45em; }
-->
.bullet_links {

font: Arial, Helvetica, sans-serif;
font-size:13px;
font-weight:bold;
color: #415968;

}

</style>

</head>

<body>
<div id="container" align="center">
  <table width="600" border="0" cellspacing="0" cellpadding="0" class="boxtop" >
    <tr>
      </td>
    </tr>
    <tr>
      <td><table width="600" border="0" cellspacing="0" cellpadding="0" class="banner_box">
        <tr>
          <td width="445"><img src="<$imagesrc link='true' default='banner_top.jpg'$>" width="455" height="68"></td>
          <td width="155" align="left" valign="middle"><table width="100%"  border="0" cellspacing="0" cellpadding="0">
            <tr>
              <td width="12%" align="left" valign="middle"><img src="/Newsletter/button.jpg" width="18" height="18" alt=""></td>
              <td width="88%" align="left" valign="middle" class="bullet_links" style="color:#415968 "><$description default=' Brochure'$></span></td>
            </tr>
            <tr>
              <td align="left" valign="middle"><img src="/Newsletter/button.jpg" width="18" height="18" alt=""></td>
              <td align="left" valign="middle" class="bullet_links" style="color:#415968 "><$description default=' Map'$></span></td>
            </tr>
          </table></td>
        </tr>
      </table></td>
    </tr>
    <tr>
      <td><table width="600" border="0" cellspacing="0" cellpadding="0">
        <tr>
          <td align="center" valign="middle" class="sale_box"><table width="100%"  border="0" cellspacing="0" cellpadding="0">
            <tr align="left" valign="top" >
              <td width="15">&nbsp;</td>
              <td><table width="99%"  border="0" cellspacing="0" cellpadding="0">
                  <tr>
                    <td width="187" align="left" valign="top" class="sale_header_txt"><$description default=' Enter title here'$></td>
                  </tr>
                  <tr>
                    <td width="187" align="left" valign="top" class="address_info"><$description default=' Enter address here'$></td>
                  </tr>
                  <tr>
                    <td width="187" align="center" valign="top"><hr></td>
                  </tr>
                  <tr>
                    <td align="left" valign="top" class="property_info" id="bullets"><$description default=' Enter bullets here'$></td>
                  </tr>
              </table></td>
              <td width="10">&nbsp;</td>
            </tr>
          </table></td>
          <td width="395" align="left" valign="top"><img src="<$imagesrc link='true' default='property.jpg'$>" width="380" height="300"></td>
        </tr>
        <tr>
          <td height="122" align="left" valign="middle"><img src="logo_left.jpg" alt="WA REA" width="214" height="102"></td>
          <td align="left" valign="middle"><table width="386 border="0" cellspacing="0" cellpadding="0">
            <tr align="left" valign="top">
              <td width="27">&nbsp;</td>
              <td width="357" class="person_txt">WILMA WARSHAK, SIOR </td>
            </tr>
            <tr align="left" valign="top">
              <td><br></td>
              <td class="contact">C 206 409 1432 | P 206 838 5492 | <a href="mailto:wilma.warshak@wa-rea.com">wilma.warshak@wa-rea.com</a></td>
            </tr>
            <tr align="left" valign="top">
              <td height="9"><img src="5x5.gif" alt="name" width="7" height="7"></td>
              <td height="9" class="contact"><img src="5x5.gif" alt="name" width="7" height="7"></td>
            </tr>
            <tr align="left" valign="top">
              <td>&nbsp;</td>
              <td class="person_txt">ZANE D. SHIRAS</td>
            </tr>
            <tr align="left" valign="top">
              <td height="19">&nbsp;</td>
              <td class="contact">C 206 724 7120 | P 206 838 5493 | <a href="mailto:zane.shiras@wa-rea.com">zane.shiras@wa-rea.com</a></td>
            </tr>
          </table></td>
        </tr>
      </table></td>
    </tr>
    <tr>
      <td align="left" valign="top" class="footer_1">1725 Westlake Ave N, Suite 210, Seattle WA 98109 | Washington Real Estate Advisors, LLC | wa-rea.com | <unsubscribe>Unsubscribe</unsubscribe></td>
    </tr>
    <tr>
      <td><p class="footer_2">All information in this document including, without limitation, all descriptions, dimensions, and references to condition, use and occupation and other details relating to the advertised property (&ldquo;Information&rdquo;) has been obtained from various sources that Washington Real Estate Advisors, LLC (&ldquo;WA-REA&rdquo;) believes to be reliable. However, such Information is provided &ldquo;as is&rdquo;, with no guarantee of completeness or accuracy, and without warranty of any kind, express or implied, including, without limitation, any warranties of performance, merchantability and fitness for a particular purpose. Potential purchasers or tenants are not entitled to rely on any of the Information and should satisfy themselves by appropriate inspections, surveys, searches, inquiries or otherwise with regard to the accuracy of such Information. In no event will WREA, or its owners, agents or employees be liable to you or anyone else for any decision made or action taken in reliance on the Information or for any consequential, special or similar damages, even if advised of the possibility of such damages. This document is for informational purposes only and is not an offer to sell or lease.</p>
        <p align="center" class="webtext">Having trouble reading this email? <webversion>View it on your browser</webversion></p></td>
    </tr>
    <tr>
    </tr>
  </table>
</div>
</body>
</html>
roshodgekiss roshodgekiss, 5 years ago

Hi torweb, I've got a couple of suggestions:

- Remove the height property from .sale_box { }, the height of the 3 cells is probably causing the big gaps between "Title" and "Address"
- Remove all instances of align="left" or valign="middle" (these are defaults anyway and sometimes add gaps)
- There's a " missing from this bit: <td align="left" valign="middle"><table width="386 border="0" cellspacing="0" cellpadding="0">

That's my first guess - let us know how you go :)


Get in touch with us on Twitter: http://twitter.com/campaignmonitor
We're also on Facebook: http://facebook.com/campaignmonitor

Join 200,000 companies around the world that use Campaign Monitor to run email marketing campaigns that deliver results for their business.

Get started for free
1-888-533-8098