Hi there,

I'm trying to figure out the best want to create a header image that spans 2 background colors, The lower of these two sections has an 2.5% gutter on each side. It renders as desired in Chrome, but not Firefox or Safari. Can this be done or do I need an alternate design? Image is below. Code is below that.

Rough mockup of what I want: https://www.dropbox.com/s/ozdh6x1xafsia05/help-mockup.png?dl=0

     <html>
      <head></head>
      <body>
      <table bgcolor="#ffffff" cellpadding="0" cellspacing="0" border="0" height="100%" width="100%" style="border-collapse: collapse; table-layout: fixed; margin: 0 auto; padding: 0;">
           <tr><td>
              <table bgcolor="#cdcdcd" border="0" width="100%" cellpadding="0" cellspacing="0" style="background-color: #cdcdcd; max-width: 600px; margin: 0 auto; border-spacing: 0; border-collapse: collapse;" id="email-container"> <!-- This is the outer table responsible for the border bacground, as this is currently built.-->
           <tr><!-- The problem area is in the next 15 lines, I think -->             
             <td colspan="5">
              <table width="100%" cellpadding="0" cellspacing="0" border="0" style="border-collapse:collapse; border-spacing: 0;">
                <tr>
                  <td width="2.5%" bgcolor="#ef2222">&nbsp;</td>
                  <td rowspan="2" height="100%">
                    <img src="http://placehold.it/360x360/10dddd/ffffff" alt="center image"/>
                  </td>
                  <td width="2.5%" bgcolor="#ef2222">&nbsp;</td>
                </tr>
                <tr>
                  <td width="2.5%" height="47.5%" bgcolor="#cdcdcd" style="border-right: 1px solid #000000">&nbsp;</td>
                  <td width="2.5%" height="47.5%" bgcolor="#cdcdcd" style="border-left: 1px solid #000000;">&nbsp;</td>
                </tr>
              </table>
            </td>
          </tr>
          <tr>
            <td width="2.5%" style="border-right: 1px solid #000000;">&nbsp;</td> 
            <td bgcolor="#ffffff" width="5%" class="spacer">&nbsp;</td>
            <td bgcolor="#ffffff" style="background-color: #ffffff; padding: 0;">
      <!-- Content table : BEGIN -->
              <table class="content-table" border="0" width="100%" cellpadding="0" cellspacing="0" style="background-color: #ffffff; color: #000000; margin: 0;">
                <tr>
                  <td style="color: #000000; font-family: Arial; font-size: 40px; font-weight: 100; padding-top:35px;">
                  Lorem Ipsum
                  </td>
                  <td bgcolor="#ffffff" width="5%" class="spacer">&nbsp;</td>
                  <td width="2.5%" style="border-right: 1px solid #000000;">&nbsp;></td>
                </tr>
              </table>
            </td>
          </tr>
        </table>
      </td></tr> 
      </table>
      </body>
      </html>
      ```