CODEWITHSUNDEEP
htmlcsshtml-emailemail-client
Zakri
Zakri

Reputation: 65

How to put a picture on top of other without using Positioning, Divs or Backgrounds?

I'm using html for an Email campaign and I have a problem, I have the following code:

 <TABLE width="550px" height="723px" BACKGROUND="FlyerImage.jpg" border="0" cellpadding="0" cellspacing="0">
 <TR> 
    <TD style="padding-top:190px; padding-right:30px; line-height:0px;" align="right"> 
        <a style="line-height:0px;" href="http://LINK.com/"> 
            <img src="ViewOffer.png">
        </a> 
    </TD>
 </TR>

 <TR> 
    <TD style="padding-bottom:185px; padding-left:35px; line-height:0px;" align="left"> 
        <a style="line-height:0px;" href="http://LINK.com/"> 
            <img src="ViewMore.png">
        </a> 
    </TD>
 </TR>

</TABLE>

This code works perfectly on Gmail, Hotmail, Yahoo and some email clients, but in OUTLOOK it's not showing correctly, I'm pretty sure it is because Outlook doesn't support background images on tables.

I'm using an Email Campaign web client and the recommendations are to markup using inline css, not using html,head and body tags, not using divs and not using positioning (absolute,relative,fixed ...) and to markup with tables.

How do I position the two call to action buttons on top of the main image on specific places without using these techniques ?

Thanks in advance =] !

Upvotes: 0

Views: 329

Answers (3)

Litek
Litek

Reputation: 4888

I've never tried it but it looks like there is a hacky-ugly way to force Outlook to support background images. Link.

Upvotes: 0

ScottS
ScottS

Reputation: 72261

If CSS is not supported, then there is no way to guarantee positioning the buttons on top of the image. In that case, I would recommend changing to using an image map. That is pure html without css, though I really don't know if it is supported by all the email clients.

You would incorporate the button image into the main image and then set your coordinates (I don't know them, they are represented by "?'s" below). Something like:

<img src="FlyerImage.jpg" alt="alternative text" usemap="#flyer" />
<map name="flyer">
  <area shape="rect" coords="?,?,?,?" href="http://LINK.com/" /> <!--button 1-->
  <area shape="rect" coords="?,?,?,?" href="http://LINK.com/" /> <!--button 2-->
</map>

Upvotes: 2

Scott Simpson
Scott Simpson

Reputation: 3850

Neither background images nor positioning is very well supported in HTML Email. Here is a great reference: http://www.campaignmonitor.com/css/

Upvotes: 0

Related Questions