w3debugger w3debugger - 4 days ago 6
HTML Question

Email Newsletter <td> overlap each other

I'm working on email newsletter. I want to overlap text over image like following using

enter image description here

I have tried

position: relative; left: -30px;
and
margin-left: 30px;
but outlook 2010, outlook 2013, and many other email clients are showing following

enter image description here

Can anyone help me so I can fix this?



<table border="0" width="100%" cellpadding="0" cellspacing="0" align="center" style="margin-top: 20px; margin-bottom: 20px;">
<tr>
<td class="hh-force-col-center description-padding">
<p>
<img class="fluid" src="http://w3debugger.com/map_newsletter/occasionwear.jpg" alt="Product Image here (allow images to see product image)" style="display: block;5dadb; text-align: left; font-family: 'Ropa Sans', sans-serif; font-size: 16px; color: #733242;"
height="199" width="199" border="0">
</p>
</td>

<td class="hh-force-col-center">
<p class="overlap-text" style="margin: 0; margin-bottom: 22px; margin-left: -32px; color: #6f6472; font-family: 'Ropa Sans', sans-serif; font-size: 14px; line-height: 25px; text-transform: uppercase;">
Our Occasionwear is all about luxury outfits for those exceptional moments. Stunning pieces from the latest collection suitable from 0-3 years.
</p>

<a class="overlap-text" target="_blank" href="http://www.google.com" style="color: #475054; margin-left: -32px; font-family: 'Roboto Condensed', sans-serif; font-size: 700; font-size: 12px; line-height: 15px; text-align: center; text-decoration: none; display: inline-block; padding: 9px 20px; border: 2px solid #475054;">
<img src="http://w3debugger.com/map_newsletter/icon-arrow-left.png" alt="Left arrow" style="margin-right: 8px;" height="10" width="6" border="0">

<b>
<!--[if mso]>&nbsp;<![endif]-->GET THE LOOK<!--[if mso]>&nbsp;<![endif]-->
</b>
</a>
</td>
</tr>
</table>




Answer

You can set an image as a background:

<table border="0" width="100%" cellpadding="0" cellspacing="0" align="center" style="margin-top: 20px; margin-bottom: 20px;">
  <tr>
    <td class="hh-force-col-center description-padding" style=" text-align: left; font-family: 'Ropa Sans', sans-serif; font-size: 16px; color: #733242; background-image: url('http://w3debugger.com/map_newsletter/occasionwear.jpg'); background-repeat: no-repeat;"
        height="199" border="0">
      <p class="overlap-text" style="margin: 0 0 0 160px; color: #6f6472; font-family: 'Ropa Sans', sans-serif; font-size: 14px; line-height: 25px; text-transform: uppercase;">
        Our Occasionwear is all about luxury outfits for those exceptional moments. Stunning pieces from the latest collection suitable from 0-3 years.
      </p>

      <a class="overlap-text" target="_blank" href="http://www.google.com" style="color: #475054; margin: 50px 0 0 160px; font-family: 'Roboto Condensed', sans-serif; font-size: 700; font-size: 12px; line-height: 15px; text-align: center; text-decoration: none; display: inline-block; padding: 9px 20px; border: 2px solid #475054;">
        <img src="http://w3debugger.com/map_newsletter/icon-arrow-left.png" alt="Left arrow" style="left: 160px; margin: 0 8px 0 0;" height="10px" width="6px" border="0">

        <b>
                              <!--[if mso]>&nbsp;<![endif]-->GET THE LOOK<!--[if mso]>&nbsp;<![endif]-->
                            </b>
      </a>
    </td>
  </tr>
</table>

Comments