Abdul Jabbar
Reputation: 2573
Sending HTML through Email - Formatting issue
i have few different HTML files which i'd like to send to in email (Not as attachment, but as HTML email). Now those HTML files contain different type components like Images, Tables, Charts, Lines, differently formatted text. The alignment of these elements is mixed.. some absolute, some relative. It shows normal as intended in a browser.. the problem comes when i try to send it through Email, in the email (tested on Gmail) the formatting of text and elements is all over the place.. It just totally loses its form and also don't display some elements. I'd like it to be displayed in the same form in email as well as it gets displayed in a browser. The sample HTML is:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body style="background-color:black">
<!-- Page 1 -->
<div style="background-color:white; position:relative; margin-left:auto; margin-right:auto; width:595pt; height:842pt; overflow:hidden; ">
<div style="position:absolute; top:25.4922pt; left:35pt; font-family:Times New Roman; font-weight:Bold; font-style:Italic; font-size:14pt; color:rgb(40,191,56); white-space:pre-wrap;">1291 CrocoDoc Lane
</div>
<div style="position:absolute; top:22.0195pt; left:226pt; font-family:Arial; font-weight:Bold; font-size:14pt; color:rgb(255,0,0); white-space:pre-wrap;">Its beautiful Pakistan.
</div>
<div style="position:absolute; top:24.4609pt; left:443pt; font-family:Arial; font-weight:Regular; font-size:16pt; color:rgb(0,0,0); white-space:pre-wrap;">1291 crocodoc lane
</div>
<!-- LINE -->
<div style="position:absolute; top:43.291pt; left:443pt; width:139.641pt; height:2pt; background-color:rgb(0,0,0); "></div>
<div style="position:absolute; top:105pt; left:103pt;">
<img src="Images\ELAINE.png" style="width:186pt; height:99pt;">
</div>
<div style="position:absolute; top:105pt; left:357pt; width:100%; height:100% ">
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" version="1.1">
<path d="M 144 68 L 175.19 58.3792 A 32.64 32.64 0 0 1 176.64 68 L 144 68 " style="fill:rgb(87,138,202);stroke-width:0;" />
</svg>
</div>
<div style="position:absolute; top:105pt; left:357pt; width:100%; height:100% ">
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" version="1.1">
<path d="M 144 68 L 170.968 49.6132 A 32.64 32.64 0 0 1 175.19 58.3792 L 144 68 " style="fill:rgb(192,80,77);stroke-width:0;" />
</svg>
</div>
<div style="position:absolute; top:105pt; left:357pt; width:100%; height:100% ">
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" version="1.1">
<path d="M 144 68 L 164.351 42.481 A 32.64 32.64 0 0 1 170.968 49.6132 L 144 68 " style="fill:rgb(155,187,89);stroke-width:0;" />
</svg>
</div>
<div style="position:absolute; top:105pt; left:357pt; width:100%; height:100% ">
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" version="1.1">
<path d="M 144 68 L 155.925 37.6163 A 32.64 32.64 0 0 1 164.351 42.481 L 144 68 " style="fill:rgb(128,100,162);stroke-width:0;" />
</svg>
</div>
<div style="position:absolute; top:105pt; left:357pt; width:100%; height:100% ">
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" version="1.1">
<path d="M 144 68 L 146.439 35.4513 A 32.64 32.64 0 0 1 155.925 37.6163 L 144 68 " style="fill:rgb(65,152,175);stroke-width:0;" />
</svg>
</div>
<div style="position:absolute; top:105pt; left:357pt; width:100%; height:100% ">
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" version="1.1">
<path d="M 144 68 L 136.737 36.1784 A 32.64 32.64 0 0 1 146.439 35.4513 L 144 68 " style="fill:rgb(219,132,61);stroke-width:0;" />
</svg>
</div>
<div style="position:absolute; top:105pt; left:357pt; width:100%; height:100% ">
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" version="1.1">
<path d="M 144 68 L 127.68 39.7329 A 32.64 32.64 0 0 1 136.737 36.1784 L 144 68 " style="fill:rgb(147,169,207);stroke-width:0;" />
</svg>
</div>
<div style="position:absolute; top:105pt; left:357pt; width:100%; height:100% ">
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" version="1.1">
<path d="M 144 68 L 120.073 45.7992 A 32.64 32.64 0 0 1 127.68 39.7329 L 144 68 " style="fill:rgb(209,147,146);stroke-width:0;" />
</svg>
</div>
<div style="position:absolute; top:105pt; left:357pt; width:100%; height:100% ">
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" version="1.1">
<path d="M 144 68 L 114.592 53.8381 A 32.64 32.64 0 0 1 120.073 45.7992 L 144 68 " style="fill:rgb(87,138,202);stroke-width:0;" />
</svg>
</div>
<div style="position:absolute; top:105pt; left:357pt; width:100%; height:100% ">
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" version="1.1">
<path d="M 144 68 L 111.725 63.1353 A 32.64 32.64 0 0 1 114.592 53.8381 L 144 68 " style="fill:rgb(192,80,77);stroke-width:0;" />
</svg>
</div>
<div style="position:absolute; top:105pt; left:357pt; width:100%; height:100% ">
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" version="1.1">
<path d="M 144 68 L 111.725 72.8648 A 32.64 32.64 0 0 1 111.725 63.1353 L 144 68 " style="fill:rgb(155,187,89);stroke-width:0;" />
</svg>
</div>
<div style="position:absolute; top:105pt; left:357pt; width:100%; height:100% ">
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" version="1.1">
<path d="M 144 68 L 114.592 82.162 A 32.64 32.64 0 0 1 111.725 72.8648 L 144 68 " style="fill:rgb(128,100,162);stroke-width:0;" />
</svg>
</div>
<div style="position:absolute; top:105pt; left:357pt; width:100%; height:100% ">
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" version="1.1">
<path d="M 144 68 L 120.073 90.2009 A 32.64 32.64 0 0 1 114.592 82.162 L 144 68 " style="fill:rgb(65,152,175);stroke-width:0;" />
</svg>
</div>
<div style="position:absolute; top:105pt; left:357pt; width:100%; height:100% ">
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" version="1.1">
<path d="M 144 68 L 127.68 96.2671 A 32.64 32.64 0 0 1 120.073 90.2009 L 144 68 " style="fill:rgb(219,132,61);stroke-width:0;" />
</svg>
</div>
<div style="position:absolute; top:105pt; left:357pt; width:100%; height:100% ">
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" version="1.1">
<path d="M 144 68 L 136.737 99.8217 A 32.64 32.64 0 0 1 127.68 96.2671 L 144 68 " style="fill:rgb(147,169,207);stroke-width:0;" />
</svg>
</div>
<div style="position:absolute; top:105pt; left:357pt; width:100%; height:100% ">
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" version="1.1">
<path d="M 144 68 L 146.439 100.549 A 32.64 32.64 0 0 1 136.737 99.8217 L 144 68 " style="fill:rgb(209,147,146);stroke-width:0;" />
</svg>
</div>
<div style="position:absolute; top:105pt; left:357pt; width:100%; height:100% ">
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" version="1.1">
<path d="M 144 68 L 155.925 98.3837 A 32.64 32.64 0 0 1 146.439 100.549 L 144 68 " style="fill:rgb(87,138,202);stroke-width:0;" />
</svg>
</div>
<div style="position:absolute; top:105pt; left:357pt; width:100%; height:100% ">
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" version="1.1">
<path d="M 144 68 L 164.351 93.519 A 32.64 32.64 0 0 1 155.925 98.3837 L 144 68 " style="fill:rgb(192,80,77);stroke-width:0;" />
</svg>
</div>
<div style="position:absolute; top:105pt; left:357pt; width:100%; height:100% ">
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" version="1.1">
<path d="M 144 68 L 170.968 86.3867 A 32.64 32.64 0 0 1 164.351 93.519 L 144 68 " style="fill:rgb(155,187,89);stroke-width:0;" />
</svg>
</div>
<div style="position:absolute; top:105pt; left:357pt; width:100%; height:100% ">
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" version="1.1">
<path d="M 144 68 L 175.19 77.6208 A 32.64 32.64 0 0 1 170.968 86.3867 L 144 68 " style="fill:rgb(128,100,162);stroke-width:0;" />
</svg>
</div>
<div style="position:absolute; top:105pt; left:357pt; width:100%; height:100% ">
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" version="1.1">
<path d="M 144 68 L 176.64 68 A 32.64 32.64 0 0 1 175.19 77.6208 L 144 68 " style="fill:rgb(65,152,175);stroke-width:0;" />
</svg>
</div>
<div style="position:absolute; top:147.869pt; left:470.441pt; font-family:Times New Roman; font-weight:; font-size:10pt; color:rgb(0,0,0); white-space:pre-wrap;">5%
</div>
<div style="position:absolute; top:144.383pt; left:469.366pt; font-family:Times New Roman; font-weight:; font-size:10pt; color:rgb(0,0,0); white-space:pre-wrap;">5%
</div>
<div style="position:absolute; top:141.368pt; left:467.31pt; font-family:Times New Roman; font-weight:; font-size:10pt; color:rgb(0,0,0); white-space:pre-wrap;">5%
</div>
<div style="position:absolute; top:139.093pt; left:464.458pt; font-family:Times New Roman; font-weight:; font-size:10pt; color:rgb(0,0,0); white-space:pre-wrap;">5%
</div>
<div style="position:absolute; top:137.76pt; left:461.062pt; font-family:Times New Roman; font-weight:; font-size:10pt; color:rgb(0,0,0); white-space:pre-wrap;">5%
</div>
<div style="position:absolute; top:137.488pt; left:457.423pt; font-family:Times New Roman; font-weight:; font-size:10pt; color:rgb(0,0,0); white-space:pre-wrap;">5%
</div>
<div style="position:absolute; top:138.299pt; left:453.866pt; font-family:Times New Roman; font-weight:; font-size:10pt; color:rgb(0,0,0); white-space:pre-wrap;">5%
</div>
<div style="position:absolute; top:140.124pt; left:450.706pt; font-family:Times New Roman; font-weight:; font-size:10pt; color:rgb(0,0,0); white-space:pre-wrap;">5%
</div>
<div style="position:absolute; top:142.798pt; left:448.225pt; font-family:Times New Roman; font-weight:; font-size:10pt; color:rgb(0,0,0); white-space:pre-wrap;">5%
</div>
<div style="position:absolute; top:146.086pt; left:446.642pt; font-family:Times New Roman; font-weight:; font-size:10pt; color:rgb(0,0,0); white-space:pre-wrap;">5%
</div>
<div style="position:absolute; top:149.693pt; left:446.098pt; font-family:Times New Roman; font-weight:; font-size:10pt; color:rgb(0,0,0); white-space:pre-wrap;">5%
</div>
<div style="position:absolute; top:153.301pt; left:446.642pt; font-family:Times New Roman; font-weight:; font-size:10pt; color:rgb(0,0,0); white-space:pre-wrap;">5%
</div>
<div style="position:absolute; top:156.588pt; left:448.225pt; font-family:Times New Roman; font-weight:; font-size:10pt; color:rgb(0,0,0); white-space:pre-wrap;">5%
</div>
<div style="position:absolute; top:159.263pt; left:450.706pt; font-family:Times New Roman; font-weight:; font-size:10pt; color:rgb(0,0,0); white-space:pre-wrap;">5%
</div>
<div style="position:absolute; top:161.087pt; left:453.866pt; font-family:Times New Roman; font-weight:; font-size:10pt; color:rgb(0,0,0); white-space:pre-wrap;">5%
</div>
<div style="position:absolute; top:161.899pt; left:457.423pt; font-family:Times New Roman; font-weight:; font-size:10pt; color:rgb(0,0,0); white-space:pre-wrap;">5%
</div>
<div style="position:absolute; top:161.626pt; left:461.062pt; font-family:Times New Roman; font-weight:; font-size:10pt; color:rgb(0,0,0); white-space:pre-wrap;">5%
</div>
<div style="position:absolute; top:160.294pt; left:464.458pt; font-family:Times New Roman; font-weight:; font-size:10pt; color:rgb(0,0,0); white-space:pre-wrap;">5%
</div>
<div style="position:absolute; top:158.019pt; left:467.31pt; font-family:Times New Roman; font-weight:; font-size:10pt; color:rgb(0,0,0); white-space:pre-wrap;">5%
</div>
<div style="position:absolute; top:155.004pt; left:469.366pt; font-family:Times New Roman; font-weight:; font-size:10pt; color:rgb(0,0,0); white-space:pre-wrap;">5%
</div>
<div style="position:absolute; top:151.518pt; left:470.441pt; font-family:Times New Roman; font-weight:; font-size:10pt; color:rgb(0,0,0); white-space:pre-wrap;">5%
</div>
<div style="position:absolute; top:103.895pt; left:357pt; font-family:Times New Roman; font-weight:; font-size:10pt; color:rgb(0,0,0); white-space:pre-wrap;">19940630
</div>
<div style="position:absolute; top:222pt; left:37pt;">
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA8AAAADwAQMAAAD1ip/oAAAAA1BMVEX///+nxBvIAAAAEnRFWHRUaXRsZQBCYXIgY29kZSBQTkegthbWAAAACnRFWHRBdXRob3IASERGosqhsgAAAKNJREFUeJztzYsJwDAIBUA36P7bOFjABhv6IyMcSHiaBxcjYhzVk1XZa4d5WV+/nHGXV34613G+c6LLn87LCjAYDAaDwWAwGAwGg8FgMBgMBoPBYDAYDAaDwWAwGAwGg8FgMBgMBoPBYDAYDAaDwWAwGAwGg8FgMBgMBoPBYDAYDAaDwWAwGAwGg8FgMBgMBoPBYDAYDAaDwWAwGAwGg8HgPXwCutCUztm+BWQAAAAASUVORK5CYII=" style="width:526pt; height:102pt;">
</div>
<!-- RECTANGLE -->
<div style="position:absolute; top:350pt; left:39pt; width:178pt; height:82pt; border:1pt solid; border-color:rgb(0,0,0);background-color:rgb(40,191,56);"></div>
<!-- LINE -->
<div style="position:absolute; top:396pt; left:253pt; width:153pt; height:1pt; background-color:rgb(199,74,220); "></div>
<div style="position:absolute; top:335.5pt; left:427.5pt; width:100%; height:100% ">
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" version="1.1">
<ellipse cx="85.6667" cy="72.6667" rx="85" ry="72" style="fill:rgb(255,0,0);stroke-width:1pt; stroke:rgb(0,0,0)"/>
</svg>
</div>
</div>
<div style="background-color:black; position:relative; height:6pt; width:auto;"> </div>
<!-- Page 2 -->
<div style="background-color:white; position:relative; margin-left:auto; margin-right:auto; width:595pt; height:842pt; overflow:hidden; ">
<div style="position:absolute; top:22.0195pt; left:226pt; font-family:Arial; font-weight:Bold; font-size:14pt; color:rgb(255,0,0); white-space:pre-wrap;">Its beautiful Pakistan.
</div>
<div style="position:absolute; top:24.4609pt; left:443pt; font-family:Arial; font-weight:Regular; font-size:16pt; color:rgb(0,0,0); white-space:pre-wrap;">1240 crocodoc lane
</div>
<!-- LINE -->
<div style="position:absolute; top:43.291pt; left:443pt; width:139.641pt; height:2pt; background-color:rgb(0,0,0); "></div>
<div style="position:absolute; top:105pt; left:103pt;">
<img src="Images\ELAINE.png" style="width:186pt; height:99pt;">
</div>
<div style="position:absolute; top:105pt; left:357pt; width:100%; height:100% ">
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" version="1.1">
<path d="M 144 68 L 111.36 67.9998 A 32.64 32.64 0 0 1 176.64 68 L 144 68 " style="fill:rgb(87,138,202);stroke-width:0;" />
</svg>
</div>
<div style="position:absolute; top:105pt; left:357pt; width:100%; height:100% ">
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" version="1.1">
<path d="M 144 68 L 176.64 68 A 32.64 32.64 0 1 1 111.36 67.9998 L 144 68 " style="fill:rgb(192,80,77);stroke-width:0;" />
</svg>
</div>
<div style="position:absolute; top:137.453pt; left:455.842pt; font-family:Times New Roman; font-weight:; font-size:10pt; color:rgb(0,0,0); white-space:pre-wrap;">50%
</div>
<div style="position:absolute; top:161.933pt; left:455.842pt; font-family:Times New Roman; font-weight:; font-size:10pt; color:rgb(0,0,0); white-space:pre-wrap;">50%
</div>
<div style="position:absolute; top:103.895pt; left:357pt; font-family:Times New Roman; font-weight:; font-size:10pt; color:rgb(0,0,0); white-space:pre-wrap;">19940630
</div>
<div style="position:absolute; top:222pt; left:37pt;">
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA8AAAADwAQMAAAD1ip/oAAAAA1BMVEX///+nxBvIAAAAEnRFWHRUaXRsZQBCYXIgY29kZSBQTkegthbWAAAACnRFWHRBdXRob3IASERGosqhsgAAAKBJREFUeJztzdEJwDAIBUA36P7bOFjANhJCGzrCQT5enuLFiBhX9cuq7G+Hp1mjI2fs5ZV3P8uj/9x8WQEGg8FgMBgMBoPBYDAYDAaDwWAwGAwGg8FgMBgMBoPBYDAYDAaDwWAwGAwGg8FgMBgMBoPBYDAYDAaDwWAwGAwGg8FgMBgMBoPBYDAYDAaDwWAwGAwGg8FgMBgMBoPBYDAY/A/fpnc9ndGJuV4AAAAASUVORK5CYII=" style="width:526pt; height:102pt;">
</div>
<!-- RECTANGLE -->
<div style="position:absolute; top:350pt; left:39pt; width:178pt; height:82pt; border:1pt solid; border-color:rgb(0,0,0);background-color:rgb(40,191,56);"></div>
<!-- LINE -->
<div style="position:absolute; top:396pt; left:253pt; width:153pt; height:1pt; background-color:rgb(199,74,220); "></div>
<div style="position:absolute; top:335.5pt; left:427.5pt; width:100%; height:100% ">
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" version="1.1">
<ellipse cx="85.6667" cy="72.6667" rx="85" ry="72" style="fill:rgb(255,0,0);stroke-width:1pt; stroke:rgb(0,0,0)"/>
</svg>
</div>
</div>
<div style="background-color:black; position:relative; height:6pt; width:auto;"> </div>
<!-- Page 3 -->
<div style="background-color:white; position:relative; margin-left:auto; margin-right:auto; width:595pt; height:842pt; overflow:hidden; ">
<div style="position:absolute; top:25.4922pt; left:35pt; font-family:Times New Roman; font-weight:Bold; font-style:Italic; font-size:14pt; color:rgb(40,191,56); white-space:pre-wrap;">1230 CrocoDoc Lane
</div>
<div style="position:absolute; top:22.0195pt; left:226pt; font-family:Arial; font-weight:Bold; font-size:14pt; color:rgb(255,0,0); white-space:pre-wrap;">Its beautiful Pakistan.
</div>
<div style="position:absolute; top:24.4609pt; left:443pt; font-family:Arial; font-weight:Regular; font-size:16pt; color:rgb(0,0,0); white-space:pre-wrap;">1230 crocodoc lane
</div>
<!-- LINE -->
<div style="position:absolute; top:43.291pt; left:443pt; width:139.641pt; height:2pt; background-color:rgb(0,0,0); "></div>
<div style="position:absolute; top:105pt; left:103pt;">
<img src="Images\ELAINE.png" style="width:186pt; height:99pt;">
</div>
<div style="position:absolute; top:105pt; left:357pt; width:100%; height:100% ">
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" version="1.1">
<path d="M 144 68 L 154.086 36.9575 A 32.64 32.64 0 0 1 176.64 68 L 144 68 " style="fill:rgb(87,138,202);stroke-width:0;" />
</svg>
</div>
<div style="position:absolute; top:105pt; left:357pt; width:100%; height:100% ">
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" version="1.1">
<path d="M 144 68 L 117.594 48.8146 A 32.64 32.64 0 0 1 154.086 36.9576 L 144 68 " style="fill:rgb(192,80,77);stroke-width:0;" />
</svg>
</div>
<div style="position:absolute; top:105pt; left:357pt; width:100%; height:100% ">
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" version="1.1">
<path d="M 144 68 L 117.594 87.1853 A 32.64 32.64 0 0 1 117.594 48.8146 L 144 68 " style="fill:rgb(155,187,89);stroke-width:0;" />
</svg>
</div>
<div style="position:absolute; top:105pt; left:357pt; width:100%; height:100% ">
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" version="1.1">
<path d="M 144 68 L 154.086 99.0425 A 32.64 32.64 0 0 1 117.594 87.1853 L 144 68 " style="fill:rgb(128,100,162);stroke-width:0;" />
</svg>
</div>
<div style="position:absolute; top:105pt; left:357pt; width:100%; height:100% ">
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" version="1.1">
<path d="M 144 68 L 176.64 68 A 32.64 32.64 0 0 1 154.086 99.0425 L 144 68 " style="fill:rgb(65,152,175);stroke-width:0;" />
</svg>
</div>
<div style="position:absolute; top:142.499pt; left:465.744pt; font-family:Times New Roman; font-weight:; font-size:10pt; color:rgb(0,0,0); white-space:pre-wrap;">20%
</div>
<div style="position:absolute; top:138.052pt; left:452.059pt; font-family:Times New Roman; font-weight:; font-size:10pt; color:rgb(0,0,0); white-space:pre-wrap;">20%
</div>
<div style="position:absolute; top:149.693pt; left:443.602pt; font-family:Times New Roman; font-weight:; font-size:10pt; color:rgb(0,0,0); white-space:pre-wrap;">20%
</div>
<div style="position:absolute; top:161.334pt; left:452.059pt; font-family:Times New Roman; font-weight:; font-size:10pt; color:rgb(0,0,0); white-space:pre-wrap;">20%
</div>
<div style="position:absolute; top:156.888pt; left:465.744pt; font-family:Times New Roman; font-weight:; font-size:10pt; color:rgb(0,0,0); white-space:pre-wrap;">20%
</div>
<div style="position:absolute; top:103.895pt; left:357pt; font-family:Times New Roman; font-weight:; font-size:10pt; color:rgb(0,0,0); white-space:pre-wrap;">19940630
</div>
<div style="position:absolute; top:222pt; left:37pt;">
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA8AAAADwAQMAAAD1ip/oAAAAA1BMVEX///+nxBvIAAAAEnRFWHRUaXRsZQBCYXIgY29kZSBQTkegthbWAAAACnRFWHRBdXRob3IASERGosqhsgAAAKNJREFUeJztzdEJwDAIBUA36P7bOFggbUyQUjrCgR8vT8nFiBjXrMk5s54VnuasPjmjj0/ufpV7+p89UQdvK8BgMBgMBoPBYDAYDAaDwWAwGAwGg8FgMBgMBoPBYDAYDAaDwWAwGAwGg8FgMBgMBoPBYDAYDAaDwWAwGAwGg8FgMBgMBoPBYDAYDAaDwWAwGAwGg8FgMBgMBoPBYDAYDAaD/+Ebn0mPLCMI9gAAAAAASUVORK5CYII=" style="width:526pt; height:102pt;">
</div>
<!-- RECTANGLE -->
<div style="position:absolute; top:350pt; left:39pt; width:178pt; height:82pt; border:1pt solid; border-color:rgb(0,0,0);background-color:rgb(40,191,56);"></div>
<!-- LINE -->
<div style="position:absolute; top:396pt; left:253pt; width:153pt; height:1pt; background-color:rgb(199,74,220); "></div>
<div style="position:absolute; top:335.5pt; left:427.5pt; width:100%; height:100% ">
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" version="1.1">
<ellipse cx="85.6667" cy="72.6667" rx="85" ry="72" style="fill:rgb(255,0,0);stroke-width:1pt; stroke:rgb(0,0,0)"/>
</svg>
</div>
</div>
<div style="background-color:black; position:relative; height:6pt; width:auto;"> </div>
</body>
</html>
Im using PutsMail to send this to my inbox as html email. I know there has to be some issues and it wont exactly be displayed as in browser but surprisingly i cant really find some solutions to solve this problem. Any help would be appreciated. Thanks
Upvotes: 0
Views: 128
Answers (2)
Nick Allen
Reputation: 932
Email clients are all over the place for their support of CSS and HTML. You really have to structure it like a 1990's website, using tables, br, etc. Campaign Monitor has a really good guide on email clients and what elements they support. I'd start there for your references. https://www.campaignmonitor.com/css/
It may be useful to start with an email template too. Zurb has some good ones at http://zurb.com/playground/responsive-email-templates and http://zurb.com/ink/templates.php.
Upvotes: 2
regdoug
Reputation: 1213
To be honest, you are probably going to have to change your page around a little bit. As you quickly found out, email clients (and Gmail in particular) don't support full HTML. I'm especially concerned with your SVG elements.
I would recommend (as a first step) to turn the SVG into images (PNG is probably best) and see how much more work you have to do.
The next step would be styling. https://www.campaignmonitor.com/css/ gives a very good list of what CSS you can use in emails, but not that for many email clients, you cannot use external stylesheets, but must use tags.
Good luck!
Upvotes: 1
Related Questions
- CSS in HTML Email
- Formatting the body of an email sent with JavaScript
- Applying HTML formatting in email's body
- Styling html in email
- Html not displaying correctly in email
- Formatting emails using html
- sending a formatted email
- Problem formating Html string in Javascript to send mail
- How do I send formated html emails?
- HTML Email using CSS