Frame height being ignored in webmail clients

Hi,
I have a shadow effect in an email that is created by some frames.
I just did a design test and in all the webmail clients (gmail, hotmail, yahoo) the frame heights seem to be being ignored.
Here are some screenshots:
http://dl.dropbox.com/u/52127/gmailproblem.png
Here is the code:

<table width='100%' border='0' cellspacing='0' cellpadding='0'>
    <tr>
        <td height="75"bgcolor='#2c2c2c'><img src='../Design Images/Trends/EMlogo.jpg' width='200' height='75' alt='Trends Collection' /></td>
        <td rowspan="6" width="205" align="right" bgcolor='#2c2c2c'><img src="../Design Images/USB/2011/right.jpg" width="205" height="98" /></td>
    </tr>
    <tr>
        <td height="1" bgcolor='#333333'><img src="../Design Images/Trends/spacer.gif" width="1" height="1" /></td>
    </tr>
    <tr>
        <td height="1" bgcolor='#666666'><img src="../Design Images/Trends/spacer.gif" width="1" height="1" /></td>
    </tr>
    <tr>
        <td height="1" bgcolor='#999999'><img src="../Design Images/Trends/spacer.gif" width="1" height="1" /></td>
    </tr>
    <tr>
        <td height="1" bgcolor='#CCCCCC'><img src="../Design Images/Trends/spacer.gif" width="1" height="1" /></td>
    </tr>
        <tr>
        <td bgcolor='#FFFFFF'><img src="../Design Images/Trends/spacer.gif" width="1" height="19" /></td>
    </tr>
</table>

Any help would be appreciated

Bullchicken Bullchicken, 5 years ago

Solved it!
If you have this problem, add this code inside your img tags
style="display:block"

Carissa Carissa, 5 years ago

Hi Bullchicken,

Great! Thanks so much for updating your thread(s) with the solutions you found, they will be really helpful to others.


Carissa
Campaign Monitor
jimmenycricket jimmenycricket, 5 years ago

Hi,

I've had a quick look at your code and amended;

<table width="100%" border="0" cellspacing="0" cellpadding="0">
    <tr>
      <td>
        <table width="405" border="0" cellspacing="0" cellpadding="0">
          <tr>
            <td height="98" valign="top">
              <table width="200" border="0" cellspacing="0" cellpadding="0">
                <tr>
                  <td width="200" height="75" bgcolor="#2c2c2c"><img src="DesignImages/Trends/EMlogo.jpg" width="200" height="75" alt="Trends Collection" border="0" style="display:block;"></td>
                </tr>
              </table>
              <table width="200" border="0" cellspacing="0" cellpadding="0">
                 <tr>
                   <td width="200" height="1" bgcolor="#333333"></td>
                 </tr>
                 <tr>
                   <td width="200"height="1" bgcolor="#666666"></td>
                 </tr>
                 <tr>
                   <td width="200" height="1" bgcolor="#999999"></td>
                 </tr>
                 <tr>
                   <td width="200" height="1" bgcolor="#CCCCCC"></td>
                 </tr>
              </table>
            </td>
            <td width="205" bgcolor="#2c2c2c"><img src="DesignImages/USB/2011/right.jpg" width="205" height="98" border="0" style="display:block;"></td>
          </tr>
        </table>
      </td>
  </table>

I've made sure all the attributes have double quotes as some had single. To the img tags i've added border 0 and style display block. I've also given all the appropriate <td> tags a width.

I've slightly re-structred the code aswell, the 'shadow effect' now sits under the left image in the same cell.

Unfortunately I can't see if everything is correct as your images are not full pathed. If this is what you are after then you will need to amend the image paths and I think the img widths are wrong...

Why did you decided to hard code the shaddow effect here?


Get in touch for any freelance work!

Join 150,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