CODEWITHSUNDEEP
htmlcssemailhtml-email
brando
brando

Reputation: 161

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 hereHere is my codepen.

Thanks all in advance!

Upvotes: 0

Views: 229

Answers (1)

Aloso
Aloso

Reputation: 5387

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>

Upvotes: 1

Related Questions