brando brando - 1 month ago 16
CSS Question

HTML Table for image overlapping background

I'm trying to create a CTA button that has an image overlapping it for an HTML email I am coding.

I have a plan of action for building it, but it doesn't seem to work across browsers and email clients. It looks great in Google Chrome, but it starts to break in many other browsers and clients (Codepen for example)

I put my code, a screenshot of what I am trying to create, along with a wireframe for reference in this codepen. Where am I going wrong?

enter code here
Here is my codepen.

Thanks all in advance!

Answer

Like this it should work:

<table cellspacing="0" cellpadding="0">
  <tr>
    <td width="118" style="width: 118px;">
      <table border="0" cellspacing="0" cellpadding="0">
        <tr>
          <td width="118" height="9" style="font-size: 9px; line-height: 9px; height: 9.5px;"></td>
        </tr>
        <tr>
          <td bgcolor="#0069aa" height="48" style="color: #ffffff;font-style: italic;font-weight: bold;text-align: center;font-size: 10px !important;background-color: #0069aa;line-height: 16px !important; font-size: 15.5px !important;">
            Download
            <br />FREE e-book</td>
        </tr>
      </table>
    </td>
    <td width="54" height="57" bgcolor="#0069aa" style="width: 54px; background-color:#0069aa; vertical-align:top;">
      <img width="54" src="http://www.camping-trafoi.com/pricelist/dog.gif" alt="" style="display:block;margin:0;padding:0;">
    </td>
    <td width="8" height="57.5" style="height: 57.5px;width: 8px;">
      <table cellspacing="0" cellpadding="0">
        <tr>
          <td height="9.5" style="height: 9.5px; font-size: 9.5px; line-height: 9.5px;"></td>
        </tr>
        <tr>
          <td height="48" bgcolor="#0069aa" style="height: 48px; background-color: #0069aa;font-size: 48px; line-height: 48px;">&nbsp;</td>
        </tr>
      </table>
    </td>
  </tr>
</table>