HTML position:absolute, e-mail signature
Question
I know that probably position will not work on many platforms as an e-mail signature, but I want to fix another problem: when I start typing text in the e-mail, the text slowly goes bellow the signature, instead of "pushing" it away to the bottom (he text gathers over it and not above it). How can I fix it? enter image description here
<html> <head> <title>sig-noborders</title> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> </head> <body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0"> <div style="position:absolute; left:0px; top:0px; width:1312px; height:612px;"> <div style="background-image:url(sig-noborders_01.png); position:absolute; left:0px; top:0px; width:1312px; height:126px;" title=""> </div> <div style="background-image:url(sig-noborders_02.png); position:absolute; left:0px; top:126px; width:146px; height:486px;" title=""> </div> <div style="background-image:url(http://i1228.photobucket.com/albums/ee449/benjaminjayshand/sig-noborders_03.png~original); position:absolute; left:146px; top:126px; width:374px; height:370px;" title=""> </div> <div style="background-image:url(sig-noborders_04.png); position:absolute; left:520px; top:126px; width:160px; height:255px;" title=""> </div> <a href="http://benjaminjayshand.com" target="_blank" style="cursor:hand"> <div style="background-image:url(http://i1228.photobucket.com/albums/ee449/benjaminjayshand/sig-noborders_05.png~original); position:absolute; left:680px; top:126px; width:31px; height:30px;" title=""> </div></a> <div style="background-image:url(sig-noborders_06.png); position:absolute; left:711px; top:126px; width:601px; height:3px;" title=""> </div> <div style="background-image:url(sig-noborders_07.png); position:absolute; left:711px; top:129px; width:59px; height:252px;" title=""> </div> <a href="http://benjaminjayshand.com" target="_blank" style="cursor:hand"> <div style="background-image:url(http://i1228.photobucket.com/albums/ee449/benjaminjayshand/sig-noborders_08.png~original); position:absolute; left:770px; top:129px; width:352px; height:25px;" title=""> </div></a> <div style="background-image:url(sig-noborders_09.png); position:absolute; left:1122px; top:129px; width:190px; height:167px;" title=""> </div> <div style="background-image:url(sig-noborders_10.png); position:absolute; left:770px; top:154px; width:352px; height:58px;" title=""> </div> <div style="background-image:url(sig-noborders_11.png); position:absolute; left:680px; top:156px; width:31px; height:53px;" title=""> </div> <div style="background-image:url(sig-noborders_12.png); position:absolute; left:680px; top:209px; width:2px; height:84px;" title=""> </div> <a href="http://designtel.co" target="_blank" style="cursor:hand"> <div style="background-image:url(http://i1228.photobucket.com/albums/ee449/benjaminjayshand/sig-noborders_13.png~original); position:absolute; left:682px; top:209px; width:27px; height:29px;" title=""> </div></a> <div style="background-image:url(sig-noborders_14.png); position:absolute; left:709px; top:209px; width:2px; height:84px;" title=""> </div> <a href="http://designtel.co" target="_blank" style="cursor:hand"> <div style="background-image:url(http://i1228.photobucket.com/albums/ee449/benjaminjayshand/sig-noborders_15.png~original); position:absolute; left:770px; top:212px; width:220px; height:25px;" title=""> </div></a> <div style="background-image:url(sig-noborders_16.png); position:absolute; left:990px; top:212px; width:132px; height:84px;" title=""> </div> <div style="background-image:url(sig-noborders_17.png); position:absolute; left:770px; top:237px; width:220px; height:59px;" title=""> </div> <div style="background-image:url(sig-noborders_18.png); position:absolute; left:682px; top:238px; width:27px; height:55px;" title=""> </div> <div style="background-image:url(sig-noborders_19.png); position:absolute; left:680px; top:293px; width:1px; height:88px;" title=""> </div> <a href="https://www.instagram.com/benjaminjayshand/" target="_blank" style="cursor:hand"> <div style="background-image:url(http://i1228.photobucket.com/albums/ee449/benjaminjayshand/sig-noborders_20.png~original); position:absolute; left:681px; top:293px; width:30px; height:31px;" title=""> </div></a> <div style="background-image:url(sig-noborders_21.png); position:absolute; left:770px; top:296px; width:3px; height:86px;" title=""> </div> <a href="https://www.instagram.com/designtel" target="_blank" style="cursor:hand"> <div style="background-image:url(http://i1228.photobucket.com/albums/ee449/benjaminjayshand/sig-noborders_22.png~original); position:absolute; left:773px; top:296px; width:236px; height:25px;" title=""> </div></a> <div style="background-image:url(sig-noborders_23.png); position:absolute; left:1009px; top:296px; width:33px; height:5px;" title=""> </div> <a href="https://www.instagram.com/designtel" target="_blank" style="cursor:hand"> <div style="background-image:url(http://i1228.photobucket.com/albums/ee449/benjaminjayshand/sig-noborders_24.png~original); position:absolute; left:1042px; top:296px; width:127px; height:25px;" title=""> </div></a> <div style="background-image:url(sig-noborders_25.png); position:absolute; left:1169px; top:296px; width:143px; height:316px;" title=""> </div> <div style="background-image:url(sig-noborders_26.png); position:absolute; left:1009px; top:301px; width:9px; height:81px;" title=""> </div> <div style="background-image:url(http://i1228.photobucket.com/albums/ee449/benjaminjayshand/sig-noborders_27.png~original); position:absolute; left:1018px; top:301px; width:13px; height:14px;" title=""> </div> <div style="background-image:url(sig-noborders_28.png); position:absolute; left:1031px; top:301px; width:11px; height:81px;" title=""> </div> <div style="background-image:url(sig-noborders_29.png); position:absolute; left:1018px; top:315px; width:13px; height:67px;" title=""> </div> <div style="background-image:url(sig-noborders_30.png); position:absolute; left:773px; top:321px; width:236px; height:61px;" title=""> </div> <div style="background-image:url(sig-noborders_31.png); position:absolute; left:1042px; top:321px; width:127px; height:61px;" title=""> </div> <div style="background-image:url(sig-noborders_32.png); position:absolute; left:681px; top:324px; width:30px; height:57px;" title=""> </div> <div style="background-image:url(sig-noborders_33.png); position:absolute; left:520px; top:381px; width:159px; height:231px;" title=""> </div> <a href="mailto:info@benjaminjayshand.com"> <div style="background-image:url(http://i1228.photobucket.com/albums/ee449/benjaminjayshand/sig-noborders_34.png~original); position:absolute; left:679px; top:381px; width:33px; height:27px;" title=""> </div></a> <div style="background-image:url(sig-noborders_35.png); position:absolute; left:712px; top:381px; width:58px; height:1px;" title=""> </div> <div style="background-image:url(sig-noborders_36.png); position:absolute; left:712px; top:382px; width:57px; height:89px;" title=""> </div> <a href="mailto:info@benjaminjayshand.com"> <div style="background-image:url(http://i1228.photobucket.com/albums/ee449/benjaminjayshand/sig-noborders_37.png~original); position:absolute; left:769px; top:382px; width:340px; height:25px;" title=""> </div></a> <div style="background-image:url(sig-noborders_38.png); position:absolute; left:1109px; top:382px; width:60px; height:230px;" title=""> </div> <div style="background-image:url(sig-noborders_39.png); position:absolute; left:769px; top:407px; width:340px; height:62px;" title=""> </div> <div style="background-image:url(sig-noborders_40.png); position:absolute; left:679px; top:408px; width:33px; height:63px;" title=""> </div> <div style="background-image:url(sig-noborders_41.png); position:absolute; left:769px; top:469px; width:1px; height:143px;" title=""> </div> <div style="background-image:url(http://i1228.photobucket.com/albums/ee449/benjaminjayshand/sig-noborders_42.png~original); position:absolute; left:770px; top:469px; width:156px; height:19px;" title=""> </div> <div style="background-image:url(sig-noborders_43.png); position:absolute; left:926px; top:469px; width:183px; height:143px;" title=""> </div> <div style="background-image:url(sig-noborders_44.png); position:absolute; left:679px; top:471px; width:1px; height:9px;" title=""> </div> <div style="background-image:url(http://i1228.photobucket.com/albums/ee449/benjaminjayshand/sig-noborders_45.png~original); position:absolute; left:680px; top:471px; width:33px; height:8px;" title=""> </div> <div style="background-image:url(sig-noborders_46.png); position:absolute; left:713px; top:471px; width:56px; height:141px;" title=""> </div> <div style="background-image:url(sig-noborders_47.png); position:absolute; left:680px; top:479px; width:33px; height:1px;" title=""> </div> <div style="background-image:url(http://i1228.photobucket.com/albums/ee449/benjaminjayshand/sig-noborders_48.png~original); position:absolute; left:679px; top:480px; width:11px; height:6px;" title=""> </div> <div style="background-image:url(sig-noborders_49.png); position:absolute; left:690px; top:480px; width:12px; height:132px;" title=""> </div> <div style="background-image:url(http://i1228.photobucket.com/albums/ee449/benjaminjayshand/sig-noborders_50.png~original); position:absolute; left:702px; top:480px; width:11px; height:6px;" title=""> </div> <div style="background-image:url(sig-noborders_51.png); position:absolute; left:679px; top:486px; width:11px; height:126px;" title=""> </div> <div style="background-image:url(sig-noborders_52.png); position:absolute; left:702px; top:486px; width:11px; height:126px;" title=""> </div> <div style="background-image:url(sig-noborders_53.png); position:absolute; left:770px; top:488px; width:156px; height:124px;" title=""> </div> <div style="background-image:url(sig-noborders_54.png); position:absolute; left:146px; top:496px; width:374px; height:116px;" title=""> </div> </div> </body> </html>
1 answers
solution1
0 ACCPTED 2016-03-30 11:40:27
the text is overlapping/going below the signature due to the mass absolute positioning of elements within the html signature.
i'd strongly recommend using simpler html table's as you will be able to achieve the desired layout as well as a cross client solution.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Responsive HTML E-mail Signature
E-Mail Signature
HTML e-mail signature is disaplayed differently by gmail
Styling HTML e-mail
HTML e-mail with PHP
Sending HTML e-mail
HTML E-mail form
HTML e-mail template
HTML E-Mail as fileattachment
Remove underline from link in e-mail signature on mobile screen with HTML/CSS
Related Tags