CODEWITHSUNDEEP
htmlcssemail
iman453
iman453

Reputation: 9535

Overlaying images within a html table

I'm creating an email template and using tables to position stuff. I wanted to overlap an image over the other, but am not able to do so. I'm using the following within a row, but it doesn't seem to work. If someone could help me out, I'd really appreciate it.

 <td colspan="3" style="padding: 14px; background-color: rgb(241, 241, 241); font-size: 11px; font-family: arial,helvetica; color: rgb(69, 85, 95);
.under{
position:absolute;
left:80px;
top:0px;
z-index:-1;
}
.over
{
position:absolute;
left:50px;
z-index:1;
}">

Upvotes: 3

Views: 12998

Answers (2)

mu is too short
mu is too short

Reputation: 434615

You have several problems:

  1. You can't put classes in a style attribute.
  2. You are, apparently, trying to absolutely position your images but their parent has position: static (the default) so they would be positioned with respect to (probably) the body rather than the table cell. Absolutely positioned elements are positioned with respect to their closest ancestor whose position is anything other than static.
  3. Setting a position on a <td> may or may not work depending on the browser, CSS2 actually says that setting position:relative on table elements results in undefined behavior.

You'll need to put a <div> inside your <td> and relatively position that. Then put the images inside the <div> and, since you're dealing with email, inline their styles. The result will be something like this:

<table>
    <tbody>
        <tr>
            <td>
                <div style="width: 100px; height: 100px; position: relative; border: 1px solid #000;">
                    <img src="http://placekitten.com/50/50" width="50" height="50" style="position: absolute; top: 0; left: 10px; z-index: 2; border: 1px solid #0ff;">
                    <img src="http://placekitten.com/75/75" width="75" height="75" style="position: absolute; top: 0; left: 20px; z-index: 1; border: 1px solid #f00;">
                </div>
            </td>
        </tr>
    </tbody>
</table>

I've added borders, kittens, and an explicit size on the <div> for demo purposes. There's a live version over here: http://jsfiddle.net/ambiguous/TkF24/

Email clients will filter CSS and what gets through depends on the client. You might have to paste the images together by hand and then reference just one image to make it work reliably.

Upvotes: 7

silverstrike
silverstrike

Reputation: 522

You can't write up a class(es) inside of the style attribute on elements. Style definitions should be written in the stylesheet or inside the <style> element

Upvotes: 2

Related Questions