I need to send mail with the image embedded as mail body. Below is the code
<!DOCTYPE html>
<html>
<head></head>
<body>
<div style="background: url(http://localhost/image/mvp-bg.jpg) no-repeat top left; width: 800px; height:685px; margin: 0 auto; color: #ffffff; font-family: Arial; font-size: 16px;">
<div style="width: 700px; margin: 0 auto; padding-top: 80px;">
<p>Mail Body</p>
</div>
</div>
</body>
</html>
Could some one let me know how to fix this.
Thanks
For email templates better refer the images from server instead of localhost, You cannot expect the user will have the images loaded in their localhost :)
Change it to url(http://domain.com/image/mvp-bg.jpg)
Got the solution from html email with background-image style not shown . Also below is the code i modified so that css are rendered properly in mail. When using tags the css were not rendering, so instaed used table tags.
<!DOCTYPE html>
<html xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<style type="text/css">
v\:*
{
behavior: url(#default#VML);
display: inline-block;
}
</style>
</head>
<body>
<table style="background-image: url('image/mvp-bg.jpg'); background-repeat: no-repeat;width: 800px; height:685px; margin: 0 auto; color: #ffffff; font-family: Arial; font-size: 16px;" >
<!--[if gte vml 1]>
<v:shape
stroked='f'
style='position:absolute;margin-left:-90pt;margin-top:-1.55pt;
z-index:-503306481;
visibility:visible;
width:720pt;
height:475pt;
top:0;
left:0;
border:0;
'>
<v:imagedata src="http://www.domain.com/image/mvp-bg.jpg"/>
</v:shape>
<![endif]-->
<tbody>
<tr>
<td>
<div style="width: 700px; margin: 0 auto; padding-top: 85px; font-family: Arial; font-size: 16px;">
<table cellspacing="0" cellpadding="0" border="0">
<tr>
<td colspan="2" valign="top" style="padding: 10px; color: #ffffff;">
Mail Body
</td>
</tr>
</table>
</div>
</td>
</tr>
</tbody>
</table>
Related
In the following example the gray "td" bar will fill the entire window width, but I can't get the encapsulated link to. I want the entire bar to be an active link, not just the text:
<html>
<head>
<style type="text/css">
<!-- table,
tr,
td {
width: 100%;
background: gray;
}
a {
width: 100%;
text-align: left;
color: white;
background-color: black;
font-size: 24px
}
-->
</style>
</head>
<body>
<table>
<tr>
<td>test</td>
</tr>
</table>
</body>
</html>
Unfortunately, I don't have the ability to change the order of the HTML elements. This must be solved only by CSS/Javascript.
Simply add display: flex; to a in the CSS:
<html>
<head>
<style type="text/css">
<!--
table, tr, td {width: 100%;background: gray;}
a {width:100%;
text-align:left;
color:white;
background-color:black;
font-size: 24px;
display: flex;
}
-->
</style>
</head>
<body>
<table>
<tr>
<td>test</td>
</tr>
</table>
</body>
</html>
Adding display:block could do it.
<html>
<head>
<style type="text/css">
<!-- table,
tr,
td {
width: 100%;
background: gray;
}
a {
width: 100%;
text-align: left;
color: white;
background-color: black;
font-size: 24px;
display:block
}
-->
</style>
</head>
<body>
<table>
<tr>
<td>test</td>
</tr>
</table>
</body>
</html>
so I started doing HTML email template with using the table form or the tr>td codes and stuff, my template mostly combine with small text and mostly graphic my main concern is that when I test my email template in my pc It jus work fine also. the images and graphic ay pretty responsive but when I test it on my mobile the image is not even loading even the place holders for it does bother to load I really confuse
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Application Accepted </title>
<head>
<style type="text/css">
#import url('https://fonts.googleapis.com/css2?family=Manrope:wght#200&display=swap');
.body{
margin: 0px;
background-color: #ffffff;
font-family:'Manrope', sans-serif;
}
.table{
border-spacing: 0;
}
.td{
padding: 0;
}
.img{
border: 0;
}
.wrapper{
width: 100%;
table-layout: fixed;
background-color: #ffffff;
padding-bottom: 40px;
}
.main{
background-color: #ffffff;
margin: 0 auto;
width: 100%;
max-width: 600px;
border-spacing: 0;
font-family:'Manrope',sans-serif;
color: #FDB833;
}
.Logo{
padding: 10px;
text-align: left;
}
.content{
padding: 0px;
text-align: center;
line-height: 0;
}
.logo{
text-align: right;
}
#media screen and (max-width: 600px){
.content .img{
width: 600px!important;
max-width: 600px!important;
}
.Logo .img{
width: 400px!important;
max-width: 400px!important;
}
}
</style>
</head>
<body>
<center class="wrapper">
<table class="main" width= 100%>
<!--header-->
<tr>
<td>
<table width="100%">
<tr>
<td class="Logo">
<img src="https://lh3.googleusercontent.com/dydWcJy6wrBvml0hAPEw12f9CiHgEEf9MN0vFDkrEPx7i0bzCpdq4_WqDhC9mGCeMv3CsWnq2BH1jgaDXsEhCd9DWaRMu1LBPJCCCWsnt9NrRyucZf5qeJz1wOMUsNjZ2rl4CITbE4GXf1_FudMM473BriHc_gILDFmQ4qdD0rUeJkfDVdXFns0bJUA0HqPFh9nyWoNbSe5g5SHTulxEYCemom23K-5_ld1zMvX_AkZwC-brRTN4gTAHk_eWAi6wbdXzVujAhc6_IrYByYd3HMqhD8WJBe8qi9FsR95AlX1ncMVvzXwEmd4Ozz_KvSxf2BXi8tWTZJc6pUEhkVTlCOHrqgiVP13HzYOEhUol1_3X3fJUD6IxTcKzI5kGBA4byp_47cQWqnSRVx_9t5QH3dVEzJjsorPEH19JhQ54NSdhoQg3KkHsJzS0lJTLIfDdP8EQv90kGWKh8Up7B4XLn0z0Hycp_WciuaEupO_ykCDFrPhRNk74vjWyo8mMhxzkQEvRf2Jvvmn8-yzp8B_AB9J4SmbnUXehwabt13SSgK8QN70cYzpjij3HX7ABng0kXiyVH_pGlcXruVNokaisVr4lpCHGUgsTuTLC83A9iEsoNPuViaYJPQm_Rs-tvYS2jJy-ejXCd8W5FynfxibIL9CXynSzqEWQKlGBtc2LHDfcHowtXMuEVddGUCJ9lg=w400-h113-no?authuser=0"
alt="" width="200px">
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td width=100% height= 20px style="background-color: #007F5F;"></td>
</tr>
<!--content-->
<tr>
<td class="content">
<img src="https://lh3.googleusercontent.com/mU8vN1xEsyHYAbV7IZZEbvpxRijXbTf7B2OlX_0kKDKTIWDeREXmRymFksPekBaVkX-fZ9MwYlGTH4roD9K0qzu8LHpyfOJwJ54fZO9m6O6Cl4jn1ErWRNqEcRMXNr3LescX20M-lTDsiiMrjik5fiPKoKPiy-WxsEDP3r3VtQllkE4ISTjwSrTSYbDBawi2Hx-2VAJSL34CZwDAeIICqcQSxJPD5JCE1FEejrGCdQPzrYr7tUpUyfygTn5_5SOoNHvCbnZW3GsnMzQ4nSqWyFTZF1qrmN1tlVlAbL6lVSsF_V9QY5xRqhaxjtyky6kBNxAXBjU6QX4WlpFD-8Dj2hMDM9X9ckzMuZWuju5C_bKni1bw1OpsYKyO0lyiNamABd5l8rrkRVFK7Z_5gz3KJJYsBqcSn97hmhxjkgQjt0HJwfEIbd_H5bKGcl3GikiCNOsNY5sb_L7c6mx65y_vlKln4DJ25jk927_t6VM0aCZUMah1KrbcQdqUvopeDD0vp008cnREa15_17waa3_hZD1yJwzmFEmtmOq_Z7UItGr5rWIvPCZfQFznX-k6znGJ7xr7i-MGZihGplciBV-5rn6ncMjXzEkd-JQvQbOcM8HbJFZOiLNDYaJPPJYWV4hgNJi9ueuCjPmoVXLsdS7PfqcxhT4Kqse6SviuXwktYziddS_quS_EjrJexDrImg=w495-h695-no?authuser=0"
alt="" width= auto style="max-width: 600px;">
</td>
</tr>
<!--footer-->
<tr>
<td class="footer" style="background-color: #007F5F; padding: 15px;">
<p style="text-align: left;font-size: 15px; font-weight: bold;">Courtesy:</p>
<p style="text-align: left;font-size: 10px;"> Approved by the St.Jerome School Administration and Club Committee<br>
Valid only for Academic year 2020-2021</p>
</td>
</tr>
</table>
</center>
</body>
this my code for it I also the check the sizing if that the case yet it seems it's not, I am really new in coding and this is not even my forte.
This is how it looks everywhere except in Outlook:
In Outlook it looks like that:
Three tables are used to create the 2-column design, this is the code:
#import url(https://fonts.googleapis.com/css?family=Montserrat:400,700);
#import url(https://fonts.googleapis.com/css?family=Open+Sans);
.ReadMsgBody {
width: 100%;
background-color: #ffffff;
}
.ExternalClass {
width: 100%;
background-color: #ffffff;
}
.ExternalClass,
.ExternalClass p,
.ExternalClass span,
.ExternalClass font,
.ExternalClass td,
.ExternalClass div {
line-height: 100%;
}
html { width: 100%; }
body {
-webkit-text-size-adjust: none;
-ms-text-size-adjust: none;
margin: 0;
padding: 0;
}
table {
border-spacing: 0;
border-collapse: collapse;
}
table td { border-collapse: collapse; }
.yshortcuts a { border-bottom: none !important; }
img { display: block !important; }
a {
text-decoration: none;
color: #e54a39;
}
/* Media Queries */
#media only screen and (max-width: 640px) {
body { width: auto !important; }
table[class="table600"] { width: 450px !important; }
table[class="table-container"] { width: 90% !important; }
table[class="container2-2"] {
width: 47% !important;
text-align: left !important;
}
table[class="full-width"] {
width: 100% !important;
text-align: center !important;
}
img[class="img-full"] {
width: 100% !important;
height: auto !important;
}
}
#media only screen and (max-width: 479px) {
body { width: auto !important; }
table[class="table600"] { width: 290px !important; }
table[class="table-container"] { width: 82% !important; }
table[class="container2-2"] {
width: 100% !important;
text-align: left !important;
}
table[class="full-width"] {
width: 100% !important;
text-align: center !important;
}
img[class="img-full"] { width: 100% !important; }
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1" />
<title>Test</title>
</head>
<body marginwidth="0" marginheight="0" style="margin-top: 0; margin-bottom: 0; padding-top: 0; padding-bottom: 0; width: 100%; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%;" offset="0" topmargin="0" leftmargin="0">
<!-- PREFOOTER -->
<table width="100%">
<tr>
<td align="center" bgcolor="orange">
<table class="table600" width="600">
<tr>
<td>
<table class="full-width" width="287" align="left">
<tr>
<td align="left" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;">
Why do I get this mail?
</td>
</tr>
</table>
<!-- SPACE -->
<table class="full-width" width="1" align="left" border="0" cellpadding="0" cellspacing="0" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;">
<tr>
<td width="1" height="30" style="font-size: 30px; line-height: 30px;"></td>
</tr>
</table>
<!-- END SPACE -->
<table class="full-width" width="287" align="right">
<tr>
<td align="left" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;">
Contact Us
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!-- END PREFOOTER -->
</body>
</html>
I already figured that the problem is caused by:
<!-- SPACE -->
<table class="full-width" width="1" align="left" border="0" cellpadding="0" cellspacing="0" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;">
<tr>
<td width="1" height="30" style="font-size: 30px; line-height: 30px;"></td>
</tr>
</table>
<!-- END SPACE -->
But I don't understand why. How can I replace the spacer to make it work in Outlook but keep the space?
To answer your follow-up about the spacing. Just use padding on the td, padding is well supported and will work fine.
<table class="table600" width="600">
<tr>
<td style="padding-bottom: 30px;">
You can then also adjust that padding with a class in the media query.
Also a side note: You don't need to use attribute css selectors for css anymore. It was an old bug that's been fixed now. So you're free to use standard .class selectors.
<style>
#ctrtable{width:600px;margin-left:auto;margin-right:auto;}
</style>
Web page has the above style block above to to center table on viewport
When in VisStudio 2013 express running in debug mode css does not render, table is aligned left. However, if I copy and paste the style to an inline style="", the table is rendered in center
???
tom
when defining a style in this way:
<style>
#ctrtable{width: 600px; margin-left: auto; margin-right: auto;}
</style>
You implement the style in this way:
<table id="ctrtable">
<tr>
<td>something</td>
</tr>
</table>
when defining a style in this way:
<style>
.ctrtable{width: 600px; margin-left: auto; margin-right: auto;}
</style>
You implement the style in this way:
<table class="ctrtable">
<tr>
<td>something</td>
</tr>
</table>
Try this sample
<!DOCTYPE>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style>
.cntrtable{text-align: center;}
</style>
</head>
<body>
<table style="width: 100%;">
<tr>
<td><table class="cntrtable" style="width: 50%; margin-left: auto; margin-right: auto; background-color: #FF0000;"><tr><td>table-1</td></tr></table></td>
</tr><tr>
<td><table class="cntrtable" style="width: 50%; margin-left: auto; margin-right: auto; background-color: #00FF00;"><tr><td>table-2</td></tr></table></td>
</tr><tr>
<td><table class="cntrtable" style="width: 50%; margin-left: auto; margin-right: auto; background-color: #0000FF;"><tr><td>table-3</td></tr></table></td>
</tr><tr>
<td><table class="cntrtable" style="width: 50%; margin-left: auto; margin-right: auto; background-color: #FF00FF;"><tr><td>table-4</td></tr></table></td>
</tr>
</table>
</body>
</html>
If I large my browser then my div header width don’t show 100%. But I set my div header width 100%. Please can someone point out what I may be doing wrong here? Many thanks. Here is my code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Welcome Page</title>
<link rel="shortcut icon" href="image/icon.ico" >
<link rel="StyleSheet" href="style/login.css" type="text/css"/>
</head>
<body>
<div id="header">
<div id="header_contain">
<table width="100%" cellpadding="0" cellspacing="0">
<tr>
<td width="50%" style="font-size: 18pt; font-weight: bold">Hello</td>
<td width="50%" align="right" style="font-size: 18pt; font-weight: bold">What's Up!</td>
</tr>
</table>
</div>
</div>
</body>
</html>
css code
body
{
margin: 0px;
padding: 0px;
font-family: arial, helvetica, sans-serif;
font-size:10pt;
}
#header
{
width: 100%;
height: 85px;
background: #006666;
}
#header_contain
{
color: white;
width: 980px;
height: auto;
margin: 0px auto;
padding-top: 30px;
}
You would need to set every element above the <div> to 100% width, including the <html> tag.
I have edited my code and its tested.
HTML Code:
<div id="header" style="width:1500px;">
<div id="header_contain" style="min-width:980px;">
<table>
<tr>
<td>
<div style="width:500px;">
Hie, Div1 Content Here.!!
</div>
</td>
<td>
<div style="width:500px;">
Hie, Div2 Content Here.!!
</div>
</td>
<td>
<div style="width:500px;">
Hie, Div3 Content Here.!!
</div>
</td>
</tr>
</table>
</div>
</div>
CSS Code..something like this.
html, body
{
height: 100%;
margin: 0px;
padding: 0px;
font-family: arial, helvetica, sans-serif;
font-size:10pt;
overflow:auto;
}
#header
{
height: 85px;
background: #006666;
}
#header_contain
{
color: white;
height: auto;
margin: 0px auto;
padding-top: 30px;
}
If It will helps you then don't forget to improve your accept rates. Cheers. !!
#header
width: 100%;
height: 85px;
background: #006666;
position:fixed;
z-index:999;
top:0;}
I use same color on header_contain div that I have already used in head div and this way I solve this problem.
#header
{
width: 100%;
height: 85px;
background: #006666;
}
#header_contain
{
color: white;
width: 980px;
height: 85px;
background: #006666;
margin: 0px auto;
padding-top: 30px;
}