How to send an email that has html and css in php
Question
when I am sending an email via PHP mail functon (I put this html code in one line and add it to the message), lets say this what I want to send:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style type="text/css">
.box h3{
text-align:right;
position:relative;
direction: rtl;
}
.box {
width:70%;
top:80px;
height:200px;
background: whitesmoke;
margin:40px auto;
text-align:right;
direction: rtl;
}
/*==================================================
* Effect 2
* ===============================================*/
.effect2
{
position: relative;
}
.effect2:before, .effect2:after
{
z-index: -1;
position: absolute;
content: "";
bottom: 15px;
left: 10px;
width: 50%;
top: 80%;
max-width:300px;
background: #777;
-webkit-box-shadow: 0 15px 10px #777;
-moz-box-shadow: 0 15px 10px #777;
box-shadow: 0 15px 10px #777;
-webkit-transform: rotate(-3deg);
-moz-transform: rotate(-3deg);
-o-transform: rotate(-3deg);
-ms-transform: rotate(-3deg);
transform: rotate(-3deg);
}
.effect2:after
{
-webkit-transform: rotate(3deg);
-moz-transform: rotate(3deg);
-o-transform: rotate(3deg);
-ms-transform: rotate(3deg);
transform: rotate(3deg);
right: 10px;
left: auto;
}
</style>
</head>
<body>
<div class="box effect2">
<b>שלום,</b>
<p>
אנא לחץ על הקישור המצורף ע"מ לאשר את התחברותך לאתרץ
</p>
<p>
הלינק הוא:
</p>
<b>
תודה מראש,
</b>
<p><b>
צוות האתר
</b></p>
</div>
</body>
</html>
I want to send it via php. When I send this email I am getting the email with it tags and not styled as I wanted.
Thanks
4 answers
solution1
5 ACCPTED 2012-10-05 17:25:18
email clients don't support css..
You have to right inline styles..
solution2
2 2012-10-05 17:43:45
HTML emails that appear to the receiver as you intended them to appear are not simple. They are more like late '90s html. Styles should be inlined, and you should use tables for layout. Backgrounds don't work reliably on many clients, and for sure you test on a variety of clients because html will vary WILDLY between various clients.
Bonus: forget about javascript / jQuery and the like....
Also, don't count on being able to display CSS3 and html5 elements etc. MANY clients have no support. Outlook doesn't even support margins very well, let alone all the css we have gotten used to. So keep it very simple, use tables for layout, test widely and don't think you will even get close to pixel-perfect.....
solution3
1 2012-10-05 17:42:20
As you have the CSS and HTML already, you can make use of this website to convert the CSS style into inline CSS style for HTML emails.
solution4
1 2013-07-24 11:34:34
Email client doesn't support CSS. So try to write inline CSS as below:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body style="margin:0;padding:0;border=0;font-size:14px;font-family:YOUR_FONT_FAMILY_NAME">
<div style="position:relative;">
<h3 style="text-align:right;position:relative;direction:rtl;">This is heading 3</h3>
<b>שלום,</b>
<p>אנא לחץ על הקישור המצורף ע"מ לאשר את התחברותך לאתרץ</p>
<p>הלינק הוא:</p>
<b>תודה מראש,</b>
<p><b>צוות האתר</b></p>
</div>
</body>
</html>
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.