<table align="left> problem content overflow

There is a problem with tables side by side

http://winzerchor.de/bug.jpg

I have a fixed table width (395 px). Inside this table there are content tables. those tables have a width (197px)
if I include more than two tables there are now an overflow in outlook and yahoo, but not in hotmail.

Any ideas to fix this?

fyredefyre fyredefyre, 6 years ago

You probably need to review your table setup and make good use of nestled tables. To really get assistance here I'd advise sharing your HTML so it can be analyzed in more details.

Thanks.


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

Thanks for you advice, Here we go

<table width="395" border="0" cellspacing="0" cellpadding="0">
<colgroup>
<col width="395">
</colgroup>
  <tr>
    <td width="395" height="15"><img src="http://newsletter.umg-cms.eu/img/grfx/spacer.gif" width="1" height="15" hspace="0" vspace="0" border="0" style="display:block;" /></td>
  </tr>
  
  <tr>
    <td width="395" align="left" valign="top" style="font-family:Arial, Helvetica, sans-serif;font-size:14px;color:#990000;"><font face="Arial, Helvetica, sans-serif" size="2" color="#990000" style="font-family:Arial, Helvetica, sans-serif;font-size:14px;color:#990000;margin:0;padding:0;"><strong>Videos</strong></font></td>
  </tr>
   
    <tr>
    <td width="395" height="1" style="border-bottom:1px solid #000000;"><img src="http://newsletter.umg-cms.eu/img/grfx/spacer.gif" width="1" height="1" hspace="0" vspace="0" border="0" style="display:block;" /></td>
   </tr>
   
  <tr>
    <td width="395" height="9"><img src="http://newsletter.umg-cms.eu/img/grfx/spacer.gif" width="1" height="9" hspace="0" vspace="0" border="0" style="display:block;" /></td>
   </tr>


  <tr>
    <td width="395" align="left" valign="top">
<!-- Table Anordnung Video -->
<table width="394" border="0" cellspacing="0" cellpadding="0">
<colgroup>
<col width="394" />
</colgroup>
  <tr>
    <td width="394" align="left" valign="top">
<!-- Table Video -->







<table width="197" border="0" cellspacing="0" cellpadding="0" align="left">
<colgroup>
<col width="197" />
</colgroup>
  <tr>
    <td width="197" align="left" valign="top"><a href="#VIDEO LINK" target="_blank" alt="view video" title="view video"><img src="VIDEO THUMBNAIL" width="180" alt="" hspace="0" vspace="0" border="0" style="1px solid #000000;display:block;"/></a></td>
  </tr>
    <tr>
    <td width="197" height="4" align="left" valign="top"><img src="http://newsletter.umg-cms.eu/img/grfx/spacer.gif" width="1" height="4" hspace="0" vspace="0" border="0" style="display:block;" /></td>
  </tr>
    <tr>
    <td width="197" align="left" valign="top">
<!-- Table Text -->
<table width="182" border="0" cellspacing="0" cellpadding="0">
<colgroup>
<col width="182" />
</colgroup>
        <tr>
    <td width="182" align="left" valign="top">
    
    <table width="182" border="0" cellspacing="0" cellpadding="0">
<colgroup>
<col width="182" />
</colgroup>    
  <tr>
    <td width="182" align="left" valign="top" style="font-family:Arial, Helvetica, sans-serif;font-size:11px;color:#000000;"><font face="Arial, Helvetica, sans-serif" size="1" color="#000000" style="font-family:Arial, Helvetica, sans-serif;font-size:11px;color:#000000;margin:0;padding:0;"><strong>Artist</strong><br />
    </font>
<font face="Arial, Helvetica, sans-serif" size="1" color="#000000" style="font-family:Arial, Helvetica, sans-serif;font-size:12px;color:#000000;margin:0;padding:0;"><strong>Video Title</strong></font></td>
    </tr>
</table>

    
    </td>
  </tr>
    <tr>
   <td width="182" height="4"><img src="http://newsletter.umg-cms.eu/img/grfx/spacer.gif" width="1" height="4" hspace="0" vspace="0" border="0" style="display:block;" /></td>
  </tr>
  
    <tr>
   <td width="182" align="left" valign="top" style="font-family:Arial, Helvetica, sans-serif;font-size:11px;color:#990000;"><font face="Arial, Helvetica, sans-serif" size="1" color="#990000" style="font-family:Arial, Helvetica, sans-serif;font-size:11px;color:#990000;margin:0;padding:0;"><a href="<%=$this->Data['detail_link']['url']['value']%>" target="_blank" alt="view video" title="view video" style="font-family:Arial, Helvetica, sans-serif;font-size:11px;color:#990000;"><font face="Arial, Helvetica, sans-serif" size="1" color="#990000" style="font-family:Arial, Helvetica, sans-serif;font-size:11px;color:#990000;"><u>view video</u></font></a></font></td>
  </tr>
</table>
<!-- Table Text -->    
    
    </td>
  </tr>
      <tr>
    <td width="197" height="15"><img src="http://newsletter.umg-cms.eu/img/grfx/spacer.gif" width="1" height="15" hspace="0" vspace="0" border="0" style="display:block;" /></td>
  </tr>
</table>

   
<!-- Table Video -->    
    </td>
  </tr>
</table>
<!-- Table Anordnung Video -->

    </td>
   </tr>

</table>

The content is CMS based, so I have to use a template. I displayed the HTML for the video (thumbnail) section here. My problem is: Even I have more than 2 content items side by side, there is no break after the second video-sceenshoot. Only hotmail shows the way it used to be:

http://www.winzerchor.de/no_bug.jpg

chris2011, 6 years ago

The CMS renders the video screenshoots first  things first (is PRADO based), so I have no change for any other workarounds.  I was thinking to give the <table> or <td> who encloses the video a max-width (but it was not working).

fyredefyre fyredefyre, 6 years ago

There's limited support for content overflow in email clients so I'd ditch that code and reformat

Check out CM's CSS support guide for more details: http://www.campaignmonitor.com/css/

As far as your code goes something along these lines is ideally what you need: (widths differ from your own)

<html>
<body>
<table border="0" cellspacing="0" cellpadding="0" width="600">
      <tr>
        <td height="25" colspan="5" valign="top">Title</td>
      </tr>
      <tr>
        <td colspan="5"><hr></td>
      </tr>
      <tr>
        <td height="10" colspan="5"></td>
      </tr>
      <tr>
        <td width="10" rowspan="3"></td>
        <td width="285" valign="top">
        <!-- Nestled Table -->
        <table width="285" border="0" cellspacing="0" cellpadding="0">
          <tr>
            <td>[IMAGE]</td>
          </tr>
          <tr>
            <td height="10"></td>
          </tr>
          <tr>
            <td>Comments + Image</td>
          </tr>
        </table>
        
        
        </td>
        <td width="10" rowspan="3"></td>
        <td width="285" valign="top"> <!-- Nestled Table -->
        <table width="285" border="0" cellspacing="0" cellpadding="0">
          <tr>
            <td>[IMAGE]</td>
          </tr>
          <tr>
            <td height="10"></td>
          </tr>
          <tr>
            <td>Comments + Image</td>
          </tr>
        </table></td>
        <td width="10" rowspan="3"></td>
      </tr>
      <tr>
        <td height="10"></td>
        <td height="10"></td>
      </tr>
      <tr>
        <td valign="top"> <!-- Nestled Table -->
        <table width="285" border="0" cellspacing="0" cellpadding="0">
          <tr>
            <td>[IMAGE]</td>
          </tr>
          <tr>
            <td height="10"></td>
          </tr>
          <tr>
            <td>Comments + Image</td>
          </tr>
        </table></td>
        <td valign="top"> <!-- Nestled Table -->
        <table width="285" border="0" cellspacing="0" cellpadding="0">
          <tr>
            <td>[IMAGE]</td>
          </tr>
          <tr>
            <td height="10"></td>
          </tr>
          <tr>
            <td>Comments + Image</td>
          </tr>
        </table></td>
      </tr>
    </table>
      <!-- Table Video --></td>
</tr></body>
</html>

Hope that helps.


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

Thx, you´re right that should be the right code, when you work with static content. But my content is CMS based, so I don´t know how many items should be displayed at the newsletter. Therefore I have to work with a table for every item ...

fyredefyre fyredefyre, 6 years ago

Well my last suggestion is to make use of Campaign Monitors repeating article setup, and plug in as little or many articles as you like. This may not be an option for you, but will give you the flexibility at least to govern how your email renders your info & amount of stories.


www.phenom.com.au - Everything Email.
Email: jordan.hunt@phenom.com.au Skype: fyredefyre

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