CODEWITHSUNDEEP
htmlcssadobe-illustrator
Saif Ali
Saif Ali

Reputation: 427

HTML Email signature does not move down

I have created the following HTML email signature using Adobe Illustrator and rendered HTML out of it. Now when I'm importing this in mail app it does not move down on new lines entered it stays there and my words get overlapped by it. Words overlapped

Here is the code of HTML signature:

<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<div style="position:absolute; left:0px; top:0px; width:280px; height:104px;">
    <div style="background-image:url(https://dl.dropbox.com/s/d9o4u9f9zjr3agu/dino_01.png?dl=0); position:absolute; left:0px; top:0px; width:280px; height:1px;" title="">
    </div>
    <div style="background-image:url(https://dl.dropbox.com/s/o44ty8kq5u4jcfm/dino_02.png?dl=0); position:absolute; left:0px; top:1px; width:112px; height:103px;" title="">
    </div>
    <div style="background-image:url(https://dl.dropbox.com/s/m8yjqdnvzt8jqzc/dino_03.png?dl=0); position:absolute; left:112px; top:1px; width:168px; height:42px;" title="">
    </div>
    <div style="background-image:url(https://dl.dropbox.com/s/hmq89agn8l0p54h/dino_04.png?dl=0); position:absolute; left:112px; top:43px; width:39px; height:60px;" title="">
    </div>
    <a href="[email protected]"><div style="background-image:url(https://dl.dropbox.com/s/mr69z622cd3zr1g/dino_05.png?dl=0); position:absolute; left:151px; top:43px; width:128px; height:14px;" title="">
    </div></a>
    <div style="background-image:url(https://dl.dropbox.com/s/jw9d0cydnvujunp/dino_06.png?dl=0); position:absolute; left:279px; top:43px; width:1px; height:61px;" title="">
    </div>
    <a href="tel:021-722-3332 "><div style="background-image:url(https://dl.dropbox.com/s/vl4lysbqrfxkf2b/dino_07.png?dl=0); position:absolute; left:151px; top:57px; width:128px; height:12px;" title="">
    </div></a>
    <a href="dl.itfs.ly"><div style="background-image:url(https://dl.dropbox.com/s/wlgzyuo7x4rheki/dino_08.png?dl=0); position:absolute; left:151px; top:69px; width:127px; height:35px;" title="">
    </div></a>
    <div style="background-image:url(https://dl.dropbox.com/s/3w02m6h0cue91un/dino_09.png?dl=0); position:absolute; left:278px; top:69px; width:1px; height:35px;" title="">
    </div>
    <div style="background-image:url(https://dl.dropbox.com/s/65eeqjtnt5sl14v/dino_10.png?dl=0); position:absolute; left:112px; top:103px; width:39px; height:1px;" title="">
    </div>
</div>
</body>

Please let me know if there's any CSS rule I'm missing here?

Upvotes: 0

Views: 306

Answers (4)

nimit8989
nimit8989

Reputation: 11

Upated first position:absolute to position:relative. Tested and it worked.

<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<div style="position:relative; left:0px; top:0px; width:280px; height:104px;">
    <div style="background-image:url(https://dl.dropbox.com/s/d9o4u9f9zjr3agu/dino_01.png?dl=0); position:absolute; left:0px; top:0px; width:280px; height:1px;" title="">
    </div>
    <div style="background-image:url(https://dl.dropbox.com/s/o44ty8kq5u4jcfm/dino_02.png?dl=0); position:absolute; left:0px; top:1px; width:112px; height:103px;" title="">
    </div>
    <div style="background-image:url(https://dl.dropbox.com/s/m8yjqdnvzt8jqzc/dino_03.png?dl=0); position:absolute; left:112px; top:1px; width:168px; height:42px;" title="">
    </div>
    <div style="background-image:url(https://dl.dropbox.com/s/hmq89agn8l0p54h/dino_04.png?dl=0); position:absolute; left:112px; top:43px; width:39px; height:60px;" title="">
    </div>
    <a href="[email protected]"><div style="background-image:url(https://dl.dropbox.com/s/mr69z622cd3zr1g/dino_05.png?dl=0); position:absolute; left:151px; top:43px; width:128px; height:14px;" title="">
    </div></a>
    <div style="background-image:url(https://dl.dropbox.com/s/jw9d0cydnvujunp/dino_06.png?dl=0); position:absolute; left:279px; top:43px; width:1px; height:61px;" title="">
    </div>
    <a href="tel:021-722-3332 "><div style="background-image:url(https://dl.dropbox.com/s/vl4lysbqrfxkf2b/dino_07.png?dl=0); position:absolute; left:151px; top:57px; width:128px; height:12px;" title="">
    </div></a>
    <a href="dl.itfs.ly"><div style="background-image:url(https://dl.dropbox.com/s/wlgzyuo7x4rheki/dino_08.png?dl=0); position:absolute; left:151px; top:69px; width:127px; height:35px;" title="">
    </div></a>
    <div style="background-image:url(https://dl.dropbox.com/s/3w02m6h0cue91un/dino_09.png?dl=0); position:absolute; left:278px; top:69px; width:1px; height:35px;" title="">
    </div>
    <div style="background-image:url(https://dl.dropbox.com/s/65eeqjtnt5sl14v/dino_10.png?dl=0); position:absolute; left:112px; top:103px; width:39px; height:1px;" title="">
    </div>
</div>
</body>

Upvotes: 1

Chris Marasti-Georg
Chris Marasti-Georg

Reputation: 34650

The problem is not just that the outer div was positioned absolutely, but also the inner divs are positioned absolutely. That means the outer div needs position:relative in order to have the inner divs position relative to it, rather than the mail body. I also don't think you need the body tag - I removed it, but if that makes things look odd you can add it back in.

<div style="position:relative; width:280px; height:104px;">
    <div style="background-image:url(https://dl.dropbox.com/s/d9o4u9f9zjr3agu/dino_01.png?dl=0); position:absolute; left:0px; top:0px; width:280px; height:1px;" title="">
    </div>
    <div style="background-image:url(https://dl.dropbox.com/s/o44ty8kq5u4jcfm/dino_02.png?dl=0); position:absolute; left:0px; top:1px; width:112px; height:103px;" title="">
    </div>
    <div style="background-image:url(https://dl.dropbox.com/s/m8yjqdnvzt8jqzc/dino_03.png?dl=0); position:absolute; left:112px; top:1px; width:168px; height:42px;" title="">
    </div>
    <div style="background-image:url(https://dl.dropbox.com/s/hmq89agn8l0p54h/dino_04.png?dl=0); position:absolute; left:112px; top:43px; width:39px; height:60px;" title="">
    </div>
    <a href="[email protected]"><div style="background-image:url(https://dl.dropbox.com/s/mr69z622cd3zr1g/dino_05.png?dl=0); position:absolute; left:151px; top:43px; width:128px; height:14px;" title="">
    </div></a>
    <div style="background-image:url(https://dl.dropbox.com/s/jw9d0cydnvujunp/dino_06.png?dl=0); position:absolute; left:279px; top:43px; width:1px; height:61px;" title="">
    </div>
    <a href="tel:021-722-3332 "><div style="background-image:url(https://dl.dropbox.com/s/vl4lysbqrfxkf2b/dino_07.png?dl=0); position:absolute; left:151px; top:57px; width:128px; height:12px;" title="">
    </div></a>
    <a href="dl.itfs.ly"><div style="background-image:url(https://dl.dropbox.com/s/wlgzyuo7x4rheki/dino_08.png?dl=0); position:absolute; left:151px; top:69px; width:127px; height:35px;" title="">
    </div></a>
    <div style="background-image:url(https://dl.dropbox.com/s/3w02m6h0cue91un/dino_09.png?dl=0); position:absolute; left:278px; top:69px; width:1px; height:35px;" title="">
    </div>
    <div style="background-image:url(https://dl.dropbox.com/s/65eeqjtnt5sl14v/dino_10.png?dl=0); position:absolute; left:112px; top:103px; width:39px; height:1px;" title="">
    </div>
</div>

Upvotes: 2

Αntonis Papadakis
Αntonis Papadakis

Reputation: 1240

Make the parent div relative instead of absolute.

<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
Test text

<!-- parent div -->
<div style="position:relative; left:0px; top:0px; width:280px; height:104px;">
    <div style="background-image:url(https://dl.dropbox.com/s/d9o4u9f9zjr3agu/dino_01.png?dl=0); position:absolute; left:0px; top:0px; width:280px; height:1px;" title="">
    </div>
    <div style="background-image:url(https://dl.dropbox.com/s/o44ty8kq5u4jcfm/dino_02.png?dl=0); position:absolute; left:0px; top:1px; width:112px; height:103px;" title="">
    </div>
    <div style="background-image:url(https://dl.dropbox.com/s/m8yjqdnvzt8jqzc/dino_03.png?dl=0); position:absolute; left:112px; top:1px; width:168px; height:42px;" title="">
    </div>
    <div style="background-image:url(https://dl.dropbox.com/s/hmq89agn8l0p54h/dino_04.png?dl=0); position:absolute; left:112px; top:43px; width:39px; height:60px;" title="">
    </div>
    <a href="[email protected]"><div style="background-image:url(https://dl.dropbox.com/s/mr69z622cd3zr1g/dino_05.png?dl=0); position:absolute; left:151px; top:43px; width:128px; height:14px;" title="">
    </div></a>
    <div style="background-image:url(https://dl.dropbox.com/s/jw9d0cydnvujunp/dino_06.png?dl=0); position:absolute; left:279px; top:43px; width:1px; height:61px;" title="">
    </div>
    <a href="tel:021-722-3332 "><div style="background-image:url(https://dl.dropbox.com/s/vl4lysbqrfxkf2b/dino_07.png?dl=0); position:absolute; left:151px; top:57px; width:128px; height:12px;" title="">
    </div></a>
    <a href="dl.itfs.ly"><div style="background-image:url(https://dl.dropbox.com/s/wlgzyuo7x4rheki/dino_08.png?dl=0); position:absolute; left:151px; top:69px; width:127px; height:35px;" title="">
    </div></a>
    <div style="background-image:url(https://dl.dropbox.com/s/3w02m6h0cue91un/dino_09.png?dl=0); position:absolute; left:278px; top:69px; width:1px; height:35px;" title="">
    </div>
    <div style="background-image:url(https://dl.dropbox.com/s/65eeqjtnt5sl14v/dino_10.png?dl=0); position:absolute; left:112px; top:103px; width:39px; height:1px;" title="">
    </div>
</div>
</body>

Upvotes: 2

Tural Ali
Tural Ali

Reputation: 23240

It's because you're setting an absolute position instead of relative to your <div>. Replacing absolute with relative should do the trick.

On the other hand, you can always export it as a PNG file and attach it to your emails.

Upvotes: 1

Related Questions