I am trying to develop tool for a platform that uses Symfony2. This tool needs to edit the full html file (with his html,head and style tags).
By now, i am passing the whole content of the file from the controller using file_get_contents, it passes the content correctly to the client.
on the PHP contoller:
When loading the page that contains the tool, the server receives a petition to controller, where i return some parameters that TWIG will render on the view. In this case i return a certain id needed for some stuff and a string that contains the whole content of the template file.
$file = file_get_contents($basePath.$this->getTemplate($template_id). '.html.twig');
return array('template_id' => $template_id, 'plantilla' => $file);
on the view:
TWIG uses the '{{ }}' notation to render the parameters returned by the controller on the petition. As I passed a string with a html content, TWIG features a filter that instead of rendering a string, renders the 'raw' data passed, in this case the HTML code.
<div id='plantilla-content'>
{{ plantilla | raw }}
</div>
<script>
tinyMCE.init({
theme : "advanced",
mode : "textareas",
plugins : "fullpage",
theme_advanced_buttons3_add : "fullpage"
});
<script>
this is the original mail template content :
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="es">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Company</title>
<style>
a:hover {
text-decoration: underline;
}
td.promocell p {
color:#FFFFFF;
font-size:16px;
line-height:26px;
font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;
margin-top:0;
margin-bottom:0;
padding-top:0;
padding-bottom:14px;
font-weight:normal;
}
td.contentblock h4 {
color:#444444 !important;
font-size:16px;
line-height:24px;
font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;
margin-top:0;
margin-bottom:10px;
padding-top:0;
padding-bottom:0;
font-weight:normal;
}
td.contentblock h4 a {
color:#444444;
text-decoration:none;
}
td.contentblock p {
color:#888888;
font-size:13px;
line-height:19px;
font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;
margin-top:0;
margin-bottom:12px;
padding-top:0;
padding-bottom:0;
font-weight:normal;
}
td.contentblock p a {
color:#3ca7dd;
text-decoration:none;
}
#media only screen and (max-device-width: 480px) {
div[class="header"] {
font-size: 16px !important;
}
table[class="table"], td[class="cell"] {
width: 300px !important;
}
table[class="promotable"], td[class="promocell"] {
width: 325px !important;
}
td[class="footershow"] {
width: 300px !important;
}
table[class="hide"], img[class="hide"], td[class="hide"] {
display: none !important;
}
img[class="divider"] {
height: 1px !important;
}
td[class="logocell"] {
padding-top: 15px !important;
padding-left: 15px !important;
width: 300px !important;
}
img[id="screenshot"] {
width: 325px !important;
height: 127px !important;
}
img[class="galleryimage"] {
width: 53px !important;
height: 53px !important;
}
p[class="reminder"] {
font-size: 11px !important;
}
h4[class="secondary"] {
line-height: 22px !important;
margin-bottom: 15px !important;
font-size: 18px !important;
}
}
</style>
</head>
<body bgcolor="#EEEEEE" topmargin="0" leftmargin="0" marginheight="0" marginwidth="0" style="-webkit-font-smoothing: antialiased;width:100% !important;background:#e4e4e4;-webkit-text-size-adjust:none;">
<table width="100%" cellpadding="0" cellspacing="0" border="0" bgcolor="#e4e4e4">
<tr>
<td bgcolor="#EEEEEE" width="100%"><table width="600" cellpadding="0" cellspacing="0" border="0" align="center" class="table">
<tr>
<td width="600" class="cell">
<table width="600" cellpadding="10" cellspacing="0" border="0" class="table" bgcolor="#e31818" >
<tr>
<td width="168" class="logocell">
<img src="{{ app.request.getSchemeAndHttpHost() }}/{{ app.request.getBasePath() }}/path/logo.png" alt="Plantilla email" width="168" height="54" style="display: block; -ms-interpolation-mode:bicubic;" /></td>
<td align="center" width="350" class="hide" style="color:#fff;font-size:12px;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;" valign="middle">
<strong>Some text</strong></td>
</tr>
</table>
<br>
<repeater>
<layout>
<table width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td bgcolor="#e31818" nowrap width="5"></td>
<td width="100%" bgcolor="#ffffff"><table width="100%" cellpadding="20" cellspacing="0" border="0">
<tr>
<td bgcolor="#ffffff" class="contentblock"><h4 class="secondary"> <strong>
<singleline label="Title"></singleline>
{{ subject }} </strong> </h4>
<multiline label="Description">
<p>{{ translate | raw }}</p>
{% block fos_user_content %}
{% endblock fos_user_content %}
</multiline></td>
</tr>
</table></td>
</tr>
</table>
<br>
</layout>
</repeater></td>
</tr>
</table>
<br>
<table width="100%" cellpadding="0" cellspacing="0" border="0" bgcolor="#f2f2f2">
<tr>
<td><br>
<table width="600" cellpadding="0" cellspacing="0" border="0" align="center" class="table">
<tr>
<td width="600" nowrap bgcolor="#f2f2f2" class="cell"><table width="600" cellpadding="0" cellspacing="0" border="0" class="table">
<tr>
<td width="380" valign="top" class="footershow"><table border="0" cellpadding="0" cellspacing="0" width="100%" style="font-size: 10px; color: #777;">
<tr>
<td style="padding: 15px 0px 15px 0px; color:#a6a6a6;font-size:10px;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;"> Si recibe este correo electrónico por error, por favor, tenga en cuenta que puede contener información confidencial, por lo tanto, el uso de esta información está estrictamente prohibida.
Sírvanse informar al remitente del error y elimine la información recibida.
Gracias por su colaboración. </td>
</tr>
<tr>
<td style="padding: 15px 0px 15px 0px; color:#a6a6a6;font-size:10px;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;"> If you receive this e-mail by error, please note that it may contain confidential information,therefore, the use of this information is strictly forbidden.
Please inform the sender of the error and delete the information received.
Thank you for your collaboration. </td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
<tr>
<td width="600" nowrap class="cell"><table width="600" cellpadding="0" cellspacing="0" border="0" class="table">
<tr>
<td align="center" style="color:#a6a6a6;font-size:12px;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;" valign="top" class="hide"><br>
<p>Company © 2014</p></td>
</tr>
</table></td>
</tr>
</table>
<br></td>
</tr>
</table></td>
</tr>
</table>
</body>
</html>
And this, is what TWIG is actually rendering. As you see, it does not match the original content that i want to edit. I am trying to use TinyMCE to edit the whole file but is not working properly, the CSS is not being loaded properly and some tags are being omited.
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Company</title>
<style>
a:hover {
text-decoration: underline;
}
td.promocell p {
color:#FFFFFF;
font-size:16px;
line-height:26px;
font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;
margin-top:0;
margin-bottom:0;
padding-top:0;
padding-bottom:14px;
font-weight:normal;
}
td.contentblock h4 {
color:#444444 !important;
font-size:16px;
line-height:24px;
font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;
margin-top:0;
margin-bottom:10px;
padding-top:0;
padding-bottom:0;
font-weight:normal;
}
td.contentblock h4 a {
color:#444444;
text-decoration:none;
}
td.contentblock p {
color:#888888;
font-size:13px;
line-height:19px;
font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;
margin-top:0;
margin-bottom:12px;
padding-top:0;
padding-bottom:0;
font-weight:normal;
}
td.contentblock p a {
color:#3ca7dd;
text-decoration:none;
}
#media only screen and (max-device-width: 480px) {
div[class="header"] {
font-size: 16px !important;
}
table[class="table"], td[class="cell"] {
width: 300px !important;
}
table[class="promotable"], td[class="promocell"] {
width: 325px !important;
}
td[class="footershow"] {
width: 300px !important;
}
table[class="hide"], img[class="hide"], td[class="hide"] {
display: none !important;
}
img[class="divider"] {
height: 1px !important;
}
td[class="logocell"] {
padding-top: 15px !important;
padding-left: 15px !important;
width: 300px !important;
}
img[id="screenshot"] {
width: 325px !important;
height: 127px !important;
}
img[class="galleryimage"] {
width: 53px !important;
height: 53px !important;
}
p[class="reminder"] {
font-size: 11px !important;
}
h4[class="secondary"] {
line-height: 22px !important;
margin-bottom: 15px !important;
font-size: 18px !important;
}
}
</style>
<table width="100%" cellpadding="0" cellspacing="0" border="0" bgcolor="#e4e4e4">
<tbody><tr>
<td bgcolor="#EEEEEE" width="100%"><table width="600" cellpadding="0" cellspacing="0" border="0" align="center" class="table">
<tbody><tr>
<td width="600" class="cell">
<table width="600" cellpadding="10" cellspacing="0" border="0" class="table" bgcolor="#e31818">
<tbody><tr>
<td width="168" class="logocell">
<img src="{{ app.request.getSchemeAndHttpHost() }}/{{ app.request.getBasePath() }}/path/logo.png" alt="Plantilla email" width="168" height="54" style="display: block; -ms-interpolation-mode:bicubic;"></td>
<td align="center" width="350" class="hide" style="color:#fff;font-size:12px;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;" valign="middle">
<strong>company</strong></td>
</tr>
</tbody></table>
<br>
<repeater>
<layout>
<table width="100%" cellpadding="0" cellspacing="0" border="0">
<tbody><tr>
<td bgcolor="#e31818" nowrap="" width="5"></td>
<td width="100%" bgcolor="#ffffff"><table width="100%" cellpadding="20" cellspacing="0" border="0">
<tbody><tr>
<td bgcolor="#ffffff" class="contentblock"><h4 class="secondary"> <strong>
<singleline label="Title"></singleline>
{{ subject }} </strong> </h4>
<multiline label="Description">
<p>{{ translate | raw }}</p>
{% block fos_user_content %}
{% endblock fos_user_content %}
</multiline></td>
</tr>
</tbody></table></td>
</tr>
</tbody></table>
<br>
</layout>
</repeater></td>
</tr>
</tbody></table>
<br>
<table width="100%" cellpadding="0" cellspacing="0" border="0" bgcolor="#f2f2f2">
<tbody><tr>
<td><br>
<table width="600" cellpadding="0" cellspacing="0" border="0" align="center" class="table">
<tbody><tr>
<td width="600" nowrap="" bgcolor="#f2f2f2" class="cell"><table width="600" cellpadding="0" cellspacing="0" border="0" class="table">
<tbody><tr>
<td width="380" valign="top" class="footershow"><table border="0" cellpadding="0" cellspacing="0" width="100%" style="font-size: 10px; color: #777;">
<tbody><tr>
<td style="padding: 15px 0px 15px 0px; color:#a6a6a6;font-size:10px;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;"> Si recibe este correo electrónico por error, por favor, tenga en cuenta que puede contener información confidencial, por lo tanto, el uso de esta información está estrictamente prohibida.
Sírvanse informar al remitente del error y elimine la información recibida.
Gracias por su colaboración. </td>
</tr>
<tr>
<td style="padding: 15px 0px 15px 0px; color:#a6a6a6;font-size:10px;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;"> If you receive this e-mail by error, please note that it may contain confidential information,therefore, the use of this information is strictly forbidden.
Please inform the sender of the error and delete the information received.
Thank you for your collaboration. </td>
</tr>
</tbody></table></td>
</tr>
</tbody></table></td>
</tr>
<tr>
<td width="600" nowrap="" class="cell"><table width="600" cellpadding="0" cellspacing="0" border="0" class="table">
<tbody><tr>
<td align="center" style="color:#a6a6a6;font-size:12px;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;" valign="top" class="hide"><br>
<p>Company</p></td>
</tr>
</tbody></table></td>
</tr>
</tbody></table>
<br></td>
</tr>
</tbody></table></td>
</tr>
</tbody></table>
Without the possibility to manipulate the structure/format of the original mail, how could be possible to edit the full content of the file?
Also, taking that the code is received correctly, i want to pass again to a method in the controller to store the changes, maybe using a string with the content. The other problem is that the HTML code contains simple and double quote simbols that interfer with the formation of the string.
Related
i have been searching on net to get an infographic email template to send email using PHP. Can we have functionalities like moving HTML content within the Email body or like popups within the email body on click event. Basically show and hide of HTML content will do.
Any sites or URLs which have achieved this can be very helpful for me to go forward with this development.
See the sample code below: (But the style gets removed in Gmail :( )
<!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" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
<!-- This code is part of a tutorial from Email on Acid: https://www.emailonacid.com/blog/article/email-development/build-an-interactive-carousel-for-email -->
<title>Interactive Carousel</title>
<!--[if !mso]><!-->
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<!--<![endif]-->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<style type="text/css">
#media only screen and (-webkit-min-device-pixel-ratio: 1), (min--moz-device-pixel-ratio: 1), (max-width: 480px), (max-device-width: 480px) {
.slide1-content,
.slide2-content,
.slide3-content {
display: block;position: absolute;top: 0px;left: 0px;width: 600px;height: 520px;background-color: #FFFFFF;
}
}
#media only screen and (-webkit-min-device-pixel-ratio: 1), (min--moz-device-pixel-ratio: 1) {
.slide1-content {left: 0px;}
.slide1:hover { background-color: #37B330;}
#slide-1:checked ~ .slide1 {background-color: #37B330 !important;}
#slide-1:checked + span + table .swoosh { left: 0px !important; }
.slide2 { top: 66px; left: 321px; }
.slide2-content { left: 600px; }
.slide2:hover { background-color: #37B330;}
#slide-2:checked ~ .slide2 {background-color: #37B330 !important;}
#slide-2:checked + span + table .swoosh { left: -600px !important; }
.slide3 { top: 122px; left: 321px; }
.slide3-content { left: 1200px; }
.slide3:hover { background-color: #37B330;}
#slide-3:checked ~ .slide3 {background-color: #37B330 !important;}
#slide-3:checked + span + table .swoosh { left: -1200px !important; }
}
</style>
</head>
<body style="background-color:#6c6c6c;margin: 0px;padding: 0px;" bgcolor="#6c6c6c">
<table width="100%" border="0" cellpadding="0" cellspacing="0" bgcolor="#6c6c6c" style="width: 100% !important; table-layout:fixed;mso-table-lspace: 0pt;mso-table-rspace: 0pt;">
<tr>
<td valign="top" align="center" style="border-collapse: collapse;">
<div class="wrapper" style="min-width: 640px;">
<table id="CarouselWrapper" width="600" border="0" cellpadding="0" cellspacing="0" bgcolor="#ffffff" class="shrink" style="width:600px; margin:0 auto;mso-table-lspace: 0pt;mso-table-rspace: 0pt;width: 415px !important;height: 895px !important;position: relative;display: block;overflow: hidden;">
<tr>
<td style="border-collapse: collapse;">
<table class="CarouselMain" width="600" bgcolor="#FFFFFF" cellpadding="0" cellspacing="0" style="border-collapse:collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;width: 600px !important;height: 1400px !important;">
<tr>
<td valign="top" style="border-collapse: collapse;">
<table border="0" cellpadding="0" cellspacing="0" style="mso-table-lspace: 0pt;mso-table-rspace: 0pt;">
<tr>
<td style="line-height:1px; font-size:0px;border-collapse: collapse;">
<!--[if mso]><p style="display: none;"><![endif]-->
<form action ="foo">
<input class="yahoo" type="radio" name="action" checked="checked" id="slide-1" style="display: none!important; max-height: 0; visibility: hidden;" />
<span style></span>
<!--[if mso]></p><![endif]-->
<table border="0" cellpadding="0" cellspacing="0" style="mso-table-lspace: 0pt;mso-table-rspace: 0pt;">
<tr>
<td style="line-height:1px; font-size:0px;border-collapse: collapse;">
<!--[if mso]><p style="display: none;"><![endif]-->
<input class="yahoo" type="radio" name="action" id="slide-2" style="display: none!important; max-height: 0; visibility: hidden;" />
<span style></span>
<!--[if mso]></p><![endif]-->
<table border="0" cellpadding="0" cellspacing="0" style="mso-table-lspace: 0pt;mso-table-rspace: 0pt;">
<tr>
<td style="line-height:1px; font-size:0px;border-collapse: collapse;">
<!--[if mso]><p style="display: none;"><![endif]-->
<input class="yahoo" type="radio" name="action" id="slide-3" style="display: none!important; max-height: 0; visibility: hidden;" />
<span style></span>
</form>
<!--[if mso]></p><![endif]-->
<table border="0" cellpadding="0" cellspacing="0" style="mso-table-lspace: 0pt;mso-table-rspace: 0pt;">
<tr>
<td style="border-collapse: collapse;">
<table class="swoosh" border="0" cellpadding="0" cellspacing="0" style="mso-table-lspace: 0pt;mso-table-rspace: 0pt;position: relative;transition: all 0.3s ease-out;-webkit-transition: all 0.3s ease-out;-moz-transition: all 0.3s ease-out;-ms-transition: all 0.3s ease-out;-o-transition: all 0.3s ease-out;">
<tr>
<td class="slide1-content" style="border-collapse: collapse;display: block;position: absolute;top: 0px;left: 0px;width: 600px;height: 520px;background-color: #FFFFFF">
<table width="100%" border="0" cellpadding="0" cellspacing="0" style="mso-table-lspace: 0pt;mso-table-rspace: 0pt;">
<tr>
<td valign="top" height="320" style="border-collapse: collapse;">
<img style="border: none !important;" src="https://www.emailonacid.com/images/emails/carousel/image3.jpg" width="320" />
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td height="10" style="line-height:1px;font-size:1px;display:block;border-collapse: collapse;"> </td>
</tr>
<tr>
<td class="slide2-content" style="border-collapse: collapse;">
<table width="100%" border="0" cellpadding="0" cellspacing="0" style="mso-table-lspace: 0pt;mso-table-rspace: 0pt;">
<tr>
<td valign="top" height="320" style="border-collapse: collapse;">
<img style="border: none !important;" src="https://www.emailonacid.com/images/emails/carousel/image2.jpg" width="320" />
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td height="10" style="line-height:1px;font-size:1px;display:block;border-collapse: collapse;"> </td>
</tr>
<tr>
<td class="slide3-content" style="border-collapse: collapse;">
<table width="100%" border="0" cellpadding="0" cellspacing="0" style="mso-table-lspace: 0pt;mso-table-rspace: 0pt;">
<tr>
<td valign="top" height="320" style="border-collapse: collapse;">
<img style="border: none !important;" src="https://www.emailonacid.com/images/emails/carousel/image4.jpg" width="320" />
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td height="10" style="line-height:1px;font-size:1px;display:block;border-collapse: collapse;"> </td>
</tr>
</table>
</td>
</tr>
</table>
<label class="button slide3" for="slide-3" style="display: none; max-height: 0; visibility: hidden; font-size:1px; line-height:1px;visibility: visible !important;max-height: 46px !important;width: 86px !important;padding:7px 0px 6px 0px;display: block !important;position: absolute !important;text-align: center;z-index: 7;background-color: #262626;box-sizing: content-box;color: #ffffff !important;font-family: Arial, Helvetica, sans-serif;font-size: 13px !important;line-height:16px !important;font-weight:bold;cursor:pointer;-webkit-transition: 0.1s ease-in;-moz-transition: 0.1s ease-in;-ms-transition: 0.1s ease-in;-o-transition: 0.1s ease-in;">
<span class="hide" style="color:#ffffff;">Three</span>
</label>
</td>
</tr>
</table>
<label class="button slide2" for="slide-2" style="display: none; max-height: 0; visibility: hidden; font-size:1px; line-height:1px;visibility: visible !important;max-height: 46px !important;width: 86px !important;padding:7px 0px 6px 0px;display: block !important;position: absolute !important;text-align: center;z-index: 7;background-color: #262626;box-sizing: content-box;color: #ffffff !important;font-family: Arial, Helvetica, sans-serif;font-size: 13px !important;line-height:16px !important;font-weight:bold;cursor:pointer;-webkit-transition: 0.1s ease-in;-moz-transition: 0.1s ease-in;-ms-transition: 0.1s ease-in;-o-transition: 0.1s ease-in;">
<span class="hide" style="color:#ffffff;">Two</span>
</label>
</td>
</tr>
</table>
<label class="button slide1" for="slide-1" style="display: none; max-height: 0; visibility: hidden; font-size:1px; line-height:1px;visibility: visible !important;max-height: 46px !important;width: 86px !important;padding:7px 0px 6px 0px;display: block !important;position: absolute !important;text-align: center;z-index: 7;background-color: #262626;box-sizing: content-box;color: #ffffff !important;font-family: Arial, Helvetica, sans-serif;font-size: 13px !important;line-height:16px !important;font-weight:bold;cursor:pointer;-webkit-transition: 0.1s ease-in;-moz-transition: 0.1s ease-in;-ms-transition: 0.1s ease-in;-o-transition: 0.1s ease-in;top: 10px; left: 321px;">
<span class="hide" style="color:#ffffff;">One</span>
</label>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
</body>
</html>
NB:
Is it possible to add dynamic moving content ie show and hide div elements within the Email body.
it's not possible to send scripts per Mail because of security issues. Also many of the major Mail Clients, like you noticed in Gmail, dont't support most of the simplest Html and Css.
Css animation works in some Clients, in others work gifs, but scripts wont work in any. Maybe you can design a workaround using this Recource. Css animation are complicated to design, pretty annoying to build, but can hide elements or move them around, if supported by the client.
Also you could have the button, that would start the animation, link to a webpage, where the animation will be. But in my expirience, this gives a terrible Usebility.
If most of your audience uses Outlook, its not worth to create something with Animations at all since Outlook doesn't support any of this.
Hope this was helpful!
This is the thank you page I am trying to have someones name be displayed like "Thank you John, ..."
But i can't seem to have it post the name. my $first_name is in another php file
<?php include("email.php"); ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN""http://www.w3.org/TR/REC-html40/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;">
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800' rel='stylesheet' type='text/css'>
<base target="_blank">
<title>Mid-Night Designs</title>
<style type="text/css">
body *{font-family: 'Open Sans', Arial, sans-serif !important}
div, p, a, li, td { -webkit-text-size-adjust:none; }
*{-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;}
td{word-break: break-word;}
a{word-break: break-word; text-decoration: none; color: inherit;}
body .ReadMsgBody
{width: 100%; background-color: #ffffff;}
body .ExternalClass
{width: 100%; background-color: #ffffff;}
body{width: 100%; height: 100%; background-color: #ffffff; margin:0; padding:0; -webkit-font-smoothing: antialiased;}
html{ background-color:#ffffff; width: 100%;}
body p {padding: 0!important; margin-top: 0!important; margin-right: 0!important; margin-bottom: 0!important; margin-left: 0!important; }
body img {user-drag: none; -moz-user-select: none; -webkit-user-drag: none;}
body a.rotator img {-webkit-transition: all 1s ease-in-out;-moz-transition: all 1s ease-in-out; -o-transition: all 1s ease-in-out; -ms-transition: all 1s ease-in-out; }
body a.rotator img:hover {-webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); -o-transform: rotate(360deg);-ms-transform: rotate(360deg); }
body .hover:hover {opacity:0.85;filter:alpha(opacity=85);}
body .jump:hover {opacity:0.75; filter:alpha(opacity=75); padding-top: 10px!important;}
body .logo img {width: 150px; height: auto;}
body .icon25 img {width: 25px; height: auto;}
body .icon18 img {width: 18px; height: auto;}
</style>
<style type="text/css">#media only screen and (max-width: 640px){
body body{width:auto!important;}
body table[class=full] {width: 100%!important; clear: both; }
body table[class=mobile] {width: 100%!important; padding-left: 30px; padding-right: 30px; clear: both; }
body table[class=fullCenter] {width: 100%!important; text-align: center!important; clear: both; }
body td[class=fullCenter] {width: 100%!important; text-align: center!important; clear: both; }
body .erase {display: none;}
body .buttonScale {float: none!important; text-align: center!important; display: inline-block!important; clear: both;}
body td[class=pad20] {padding-left: 20px!important; padding-right: 20px!important; text-align: center!important; clear: both; }
}</style>
<style type="text/css">#media only screen and (max-width: 479px){
body body{width:auto!important;}
body table[class=full] {width: 100%!important; clear: both; }
body table[class=mobile] {width: 100%!important; padding-left: 20px; padding-right: 20px; clear: both; }
body table[class=fullCenter] {width: 100%!important; text-align: center!important; clear: both; }
body td[class=fullCenter] {width: 100%!important; text-align: center!important; clear: both; }
body .erase {display: none;}
body .buttonScale {float: none!important; text-align: center!important; display: inline-block!important; clear: both;}
body td[class=pad20] {padding-left: 20px!important; padding-right: 20px!important; text-align: center!important; clear: both; }
}</style>
</head>
<body style='margin: 0; padding: 0;'>
<table width="100%" border="0" cellpadding="0" cellspacing="0" align="center" class="full" bgcolor="#1e1e1e" style="background-color: #1e1e1e;">
<tbody><tr>
<td align="center">
<table class="full" align="center" border="0" width="100%" cellpadding="0" cellspacing="0">
<tbody><tr>
<td align="center" class="pad20">
<table width="500" border="0" cellpadding="0" cellspacing="0" align="center" class="full">
<tbody><tr>
<td width="100%" height="15" style="font-size: 1px; line-height: 1px;"> </td>
</tr>
<tr>
<td valign="middle" width="100%" style="font-family: Helvetica, Arial, sans-serif, 'Open Sans'; color: #929292; font-weight: 400; font-size: 12px; line-height: 20px; text-align: center;">
<br>
</td>
</tr>
<tr>
<td width="100%" height="40" style="font-size: 1px; line-height: 1px;"> </td>
</tr>
<tr>
<td valign="middle" align="center" width="100%" class="logo" style="line-height: 1px; text-align: center;"></td>
</tr>
<tr>
<td width="100%" height="30" style="font-size: 1px; line-height: 1px;"> </td>
</tr>
</tbody></table>
</td>
</tr>
</tbody></table>
</td>
</tr>
</table><table width="100%" border="0" cellpadding="0" cellspacing="0" align="center" class="full" bgcolor="#1e1e1e" style="background-color: #1e1e1e;">
<tbody><tr>
<td align="center" class="pad20">
<table class="full" align="center" border="0" width="500" cellpadding="0" cellspacing="0" bgcolor="#ffffff" style="background-color: #ffffff; border-top-left-radius: 5px; border-top-right-radius: 5px;">
<tbody><tr>
<td width="100%" height="30" style="font-size: 1px; line-height: 1px;"> </td>
</tr>
</tbody></table>
</td>
</tr>
</tbody></table>
<table width="100%" border="0" cellpadding="0" cellspacing="0" align="center" class="full" bgcolor="#1e1e1e" style="background-color: #1e1e1e;">
<tbody><tr>
<td align="center" class="pad20">
<table class="full" align="center" border="0" width="500" cellpadding="0" cellspacing="0" bgcolor="#ffffff" style="background-color: #ffffff;">
<tbody><tr>
<td align="center" class="pad20">
<table width="450" border="0" cellpadding="0" cellspacing="0" align="center" class="full">
<tbody><tr>
<td width="100%" height="10" style="font-size: 1px; line-height: 1px;"> </td>
</tr>
<tr>
<td valign="middle" width="100%" style="font-family: Helvetica, Arial, sans-serif, 'Open Sans'; color: #111111; font-weight: 800; font-size: 30px; line-height: 36px; text-align: center; text-transform: uppercase;">
Thank you!
</td>
</tr>
<tr>
<td width="100%" height="20" style="font-size: 1px; line-height: 1px;"> </td>
</tr>
<tr>
<td width="100%" style="color: #929292; font-family: Helvetica, Arial, sans-serif, 'Open Sans'; font-weight: 400; vertical-align: top; font-size: 14px; text-align: center; line-height: 22px;" class="fullCenter">
<span style="color:#000000;"><span style="font-size:14px;"><strong>Thank you<?php echo $_POST['first_name'];?>
, for using our quote calculator. If you have any further questions feel free to contact us!</strong></span></span>
</td>
</tr>
<tr>
<td width="100%" height="20" style="font-size: 1px; line-height: 1px;"> </td>
</tr>
</tbody></table>
</td>
</tr>
</tbody></table>
</td>
</tr>
</table>
<table width="100%" border="0" cellpadding="0" cellspacing="0" align="center" class="full" bgcolor="#1e1e1e" style="background-color: #1e1e1e;">
<tbody><tr>
<td align="center" class="pad20">
<table class="full" align="center" border="0" width="500" cellpadding="0" cellspacing="0" bgcolor="#ffffff" style="background-color: #ffffff;">
<tbody><tr>
<td width="100%" height="30" style="font-size: 1px; line-height: 1px;"> </td>
</tr>
<tr>
<td align="center" class="pad20">
<table width="450" border="0" cellpadding="0" cellspacing="0" align="center" class="full">
<tbody><tr>
<td valign="top" width="100%">
<table width="75" border="0" cellpadding="0" cellspacing="0" align="left" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;" class="fullCenter">
<tbody><tr>
<td valign="middle" align="center" width="30" class="fullCenter" style="line-height: 1px;"></td>
</tr>
</tbody></table>
<table width="15" border="0" cellpadding="0" cellspacing="0" align="left" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;" class="full">
<tbody><tr>
<td width="100%" height="10" style="font-size: 1px; line-height: 1px;"> </td>
</tr>
</tbody></table>
<table width="350" border="0" cellpadding="0" cellspacing="0" align="left" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;" class="fullCenter">
<tbody><tr>
<td width="100%" style="color: #111111; font-family: Helvetica, Arial, sans-serif, 'Open Sans'; font-weight: 700; vertical-align: top; font-size: 13px; text-align: left; line-height: 24px;" class="fullCenter">
Lorenzo Preciado
</td>
</tr>
<tr>
<td width="100%" style="color: #61b94d; font-family: Helvetica, Arial, sans-serif, 'Open Sans'; font-weight: 600; vertical-align: top; font-size: 13px; text-align: left; line-height: 24px text-transform: uppercase;" class="fullCenter">
<span style="color:#000000;">Web Designer & Developer </span>
</td>
</tr>
<tr>
<td width="100%" style="color: #929292; font-family: Helvetica, Arial, sans-serif, 'Open Sans'; font-weight: 400; vertical-align: top; font-size: 13px; text-align: left; line-height: 24px;" class="fullCenter">
Owner of Mid-Night Designs
</td>
</tr>
<tr>
<td width="100%" style="color: #929292; font-family: Helvetica, Arial, sans-serif, 'Open Sans'; font-weight: 400; vertical-align: top; font-size: 13px; text-align: left; line-height: 24px;" class="fullCenter">
+81 080-6499-4974 | help#mid-nightdesigns.com
</td>
</tr>
<tr>
<td width="100%" height="5" style="font-size: 1px; line-height: 1px;"> </td>
</tr>
<tr>
<td width="100%" align="center" class="icon18">
<!-- Social Icons -->
<table width="120" border="0" cellpadding="0" cellspacing="0" align="left" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;" class="buttonScale">
<tbody><tr>
<td valign="middle" align="left" width="30" class="buttonScale" style="line-height: 1px;"></td>
<td valign="middle" align="left" width="30" class="buttonScale" style="line-height: 1px;"></td>
<td valign="middle" align="left" width="30" class="buttonScale" style="line-height: 1px;"></td>
<td valign="middle" align="left" width="30" class="buttonScale" style="line-height: 1px;"></td>
</tr>
</tbody></table>
</td>
</tr>
</tbody></table>
</td>
</tr>
<tr>
<td width="100%" height="10" style="font-size: 1px; line-height: 1px;"> </td>
</tr>
</tbody></table>
</td>
</tr>
</tbody></table>
</td>
</tr>
</table>
<table width="100%" border="0" cellpadding="0" cellspacing="0" align="center" class="full" bgcolor="#1e1e1e" style="background-color: #1e1e1e;">
<tbody><tr>
<td align="center" class="pad20">
<table class="full" align="center" border="0" width="500" cellpadding="0" cellspacing="0" bgcolor="#ffffff" style="background-color: #ffffff; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px;">
<tbody><tr>
<td width="100%" height="30" style="font-size: 1px; line-height: 1px;"> </td>
</tr>
</tbody></table>
</td>
</tr>
</tbody></table>
<table width="100%" border="0" cellpadding="0" cellspacing="0" align="center" class="full" bgcolor="#1e1e1e" style="background-color: #1e1e1e;">
<tbody><tr>
<td width="100%" valign="top" align="center">
<table width="100%" border="0" cellpadding="0" cellspacing="0" align="center" class="mobile">
<tbody><tr>
<td align="center">
<table width="450" border="0" cellpadding="0" cellspacing="0" align="center" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt; text-align: center;" class="fullCenter">
<tbody><tr>
<td width="100%" height="30" style="font-size: 1px; line-height: 1px;"> </td>
</tr>
<tr>
<td width="100%" style="color: #d2d2d2; font-family: Helvetica, Arial, sans-serif, 'Open Sans'; font-weight: 400; vertical-align: top; font-size: 12px; text-align: center; line-height: 24px;" class="fullCenter">
© Copyright - Mid-Nightd<span style="color:#FFFFFF;"></span>esigns.com
</td>
</tr>
<tr>
<td width="100%" style="color: #61b94d; font-family: Helvetica, Arial, sans-serif, 'Open Sans'; font-weight: 400; vertical-align: top; font-size: 12px; text-align: center; line-height: 24px;" class="fullCenter">
<br>
</td>
</tr>
<tr>
<td width="100%" height="50" style="font-size: 1px; line-height: 1px;"> </td>
</tr>
<tr>
<td width="100%" height="1" style="font-size: 1px; line-height: 1px;"> </td>
</tr>
</tbody></table>
</td>
</tr>
</tbody></table>
</td>
</tr>
</tbody></table>
</body>
</html>
This is the portion of the form
<label>
First Name
<input NAME="first_name" type="text" required="required" class="SV_validate" placeholder="First Name">
</label>
This is part of my email.php and it works, displaying the name in the email sent but doesn't work in the thank you.
$first_name = $_POST['first_name'];
PHP File that receives POST will be somewthing along the lines of
<?php
session_start();
$_SESSION['Name'] = $_POST['first_name'];
?>
Second File will be
<?php
session_start();
echo $_SESSION['Name'];
?>
Not recommended to do exactly that but that's the basis. You also can't set a session on the same page and call it on the same page.
Please check the simple scenario created for you, change the form action to thank-you.php file.
index.php
<form action="thank-you.php" method="post">
<input type="text" name="firstname">
<input type="text" name="email">
<input type="submit" name="contact" value="Contact">
</form>
thank-you.php
<?php
include_once('email.php');
$firstname = '';
if(isset($_POST['firstname'])) {
$firstname = $_POST['firstname'];
}
?>
<div class="message">Thank you for contacting - <?php echo $firstname;?></div>
email.php
<?php
if(isset($_POST['contact'])) {
$to = 'email#example.com';
$subject = 'Contact';
$message = 'Message';
if(mail($to,$subject,$message)) {
echo "mail sent";
}
}
?>
i have used on my site Width and height like
<table width="800px" height="600px" border="0" cellspacing="0" cellpadding="0" class="leftborder"/>
i have to changed this code media query for responsive but its not working i set background color red when i re size my browser its showing color only not in resize content
My code:
<style type="text/css">
#media only screen and (min-width: 320px) and (max-width : 780px)
{
.leftborder
{
background-color:skyblue;
}
.rightborder {
border-right: 1px solid #000000;
}
.leftborder {
border-left: 1px solid #000000;
border-right: 1px solid #000000;
border-bottom: 1px solid #000000;
border-style: thin;
}
.style2 {font-size: xx-small}
.descriptor_row
{
background:#003366;
font-size:x-small;
color:#FFFFFF;
border:#FFFFFF;
}
BODY { font-family: Arial, Helvetica, sans-serif;
line-height:160%;
font-size:14px;
color:#000;
background: url(images/gradient2.jpg);
background-repeat: repeat-x;
background-color:#FFF;
}
table.leftborder{
align:"right";
width:800px ! Important;
height:600px ! Important;
}
}
/* MOBILE LANDSCAPE */
#media only screen and (min-width: 480px) and (max-width: 780px)
{
.leftborder {
background-color:blue;
}
}
/* SMALL TABLET */
#media only screen and (min-width: 600px) and (max-width:780px)
{
.leftborder
{
background-color:green;
}
}
/* TABLET/NETBOOK */
#media only screen and (min-width: 768px) and (max-width: 780px)
{
.leftborder
{
background-color:yellow;
}
}
.rightborder {
border-right: 1px solid #000000;
}
.leftborder {
border-left: 1px solid #000000;
border-right: 1px solid #000000;
border-bottom: 1px solid #000000;
border-style: thin;
}
.style2 {font-size: xx-small}
.descriptor_row
{
background:#003366;
font-size:x-small;
color:#FFFFFF;
border:#FFFFFF;
}
BODY { font-family: Arial, Helvetica, sans-serif;
line-height:160%;
font-size:14px;
color:#000;
background: url(images/gradient2.jpg);
background-repeat: repeat-x;
background-color:#FFF;
}
</style>
<script type="text/javascript">
function openWindow(winName)
{
window.open(winName,"FAQs", "width=950,height=650,resizable=no,scrollbars=no,toolbar=no,status=no,menubar=no,copyhistory=no,left=100,top=100,screenX=100,location=no,screenY=100");
}
</script>
</head>
<link href="style.css" rel="stylesheet" type="text/css">
<body bgcolor="#FFFFFF" TOPMARGIN="0" LEFTMARGIN="0" RIGHTMARGIN="0">
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="design"/ >
<tr>
<td align="center">
<table width="800px" height="600px" border="0" cellspacing="0" cellpadding="0" class="leftborder"/>
<tr bgcolor="#FFFFFF">
<td colspan="2" style="background-image:url('site_conf/images/det_banner.jpg'); background-repeat:no-repeat; background-position:center;" width="100%" height="100" align="right" />
<?php
if(!is_null($sid)&&$session_error=="none")
{
$_SESSION['lms_username']=$lms_username;
?><TABLE BORDER="0" CELLPADDING="2" CELLSPACING="0" WIDTH="190" >
<TR>
<TD><FONT FACE="VERDANA" SIZE="1" COLOR="#000000">Logged in as: <B><?php echo $lms_username; ?></B></TD>
</TR>
<?php
if($lms_groups=="on" && $lms_user_group!=""){
?>
<TR>
<TD><FONT FACE="VERDANA" SIZE="1" COLOR="#000000"><?php echo"$lms_gtitle: "; if($lms_groups=="on"){echo"<B>$lms_user_group</B>";}?></TD>
</TR>
<TR>
<TD><FONT FACE="VERDANA" SIZE="1" COLOR="#000000"><?php echo "$lms_sgtitle: "; if($lms_groups=="on"){echo"<B>$lms_user_subgroup</B>";}?></TD>
</TR>
<tr>
<TD><FONT FACE="VERDANA" SIZE="1" COLOR="#000000"><?php if($section=="reports" && $report){echo"<A HREF='index.php?section=reports&sid=$sid'>Back to Detailed Reports Section";}?></FONT></TD>
</tr>
<?php }?>
</TABLE>
<?php
}
?></td>
</tr>
<tr>
<td colspan="2" height="20" background="images/bg.gif">
<table width="100%" height="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td> </td>
<TD align="right"><?php
if(!is_null($sid)&&$session_error=="none")
{
?><a style="" href="index.php?section=<?php echo $section; ?>&logout=YES&sid=<?php echo $sid; ?>"><img src="images/logout.gif" border="0" align="ABSMIDDLE" alt="Click here to Log Out"></a><?php
}
?></TD>
</tr>
</table></td>
</tr>
<tr>
<?php
if(is_null($sid)||$session_error!="none")
{
$nav_display = 'display: none';
}
?>
<td valign="top" style=" <?php echo $nav_display; ?> ">
<!---------BEGIN SIDE NAV TABLE------------->
<table width="198" border="0" cellspacing="0" cellpadding="0" >
<tr valign="top" bordercolor="#FFFFFF">
<td width="198" bordercolor="#FFFFFF"><?php
if((!is_null($sid)&&$session_error=="none"))
{
include($dir_components."navbar2.php");
}
?></td>
</tr>
<tr><td> </td></tr>
<tr>
<td></td>
</tr>
</table>
</td>
<td class="boxcontent" VALIGN="TOP" >
<?php
include($mysection);
?></td>
</tr>
</table>
</td>
</tr>
</table>
<hr width="200;">
</body>
</html>
added image what i am getting ?please help me any advise ?
On your media queries you have just changed the color and how do you supposed to get responsive design. You need to change other properties like width or height to adjust on that respective screen size. Or there are other options for you, like responsive tables plugins or if you want to fix via media queries you need to first decide how you wanna display on specific screen size, options are like scrollable tables or breaking table headings into blocks and columns below and so on then only you go to media queries to adjust as accordingly.
I am working on a web based game. I have made the navigation but the text is not aligned correctly.
HTML
<table width="123" height="253" border="0" align="right" cellpadding="0" cellspacing="2" class="table"> <tr>
<td height="23" class="header">Main Game</td> </tr> <tr>
<td height="65" valign="top" class="cell" align="center"> Homepage Staff Page
</td> </tr> <tr>
<td height="23" class="header">Social</td> </tr> <tr>
<td height="65" valign="top" class="cell">Discussions</td> </tr> <tr>
<td height="23" class="header">LogOut</td> </tr> </table>
CSS
.table {
border:#000000 1px solid; background-color:#363636;
}
.cell {
color:#FFFFFF; padding:3px; background-color:#1C1C1C; align:center;
}
.header {
padding:0px; padding-left:2px; color:#FFFFFF;
background:#3A0D07; font-family:verdana; font-size:10px;
line-height:18px; text-align:left; border-bottom:2px solid;
border-color:#000000; align:center;
}
output
for your code, the anchor tags are displayed inline-block by default
a quick fix for your code is to change the display for the a tags, add the following to your css:
.table .a{
display:block;
}
Instead of tables you should use list item as they render the same in every browser. Also you have better control over if.
HTML
<ul class="nav">
<li>Home</li>
<li>Stuff</li>
<li>About</li>
</ul>
CSS
ul {
list-style-type: none;
}
It's difficult to tell what is being asked here. This question is ambiguous, vague, incomplete, overly broad, or rhetorical and cannot be reasonably answered in its current form. For help clarifying this question so that it can be reopened, visit the help center.
Closed 10 years ago.
from morning I have been trying but at last I have to put this at stackoverflow. I have been trying to send HTML mail through php when when i see my mail i get the HTML coads exactly not the beautifully designed mail
<?php
$email = $_POST["email"];
$to = $email;
$from = "arshkapoor2015#gmail.com";
$subject = "Your thebigmall coupon code";
$headers = "From:" . $from;
ob_start();
?>
<html>
<head>
<title></title>
</head>
<body>
<p>
</p>
<div style="font-size: small; width: 797.4166870117188px; background-color: rgb(236, 236, 236); margin: 0px; padding: 0px; font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif; ">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr style="border-collapse: collapse; ">
<td align="center" bgcolor="#ececec" style="border-collapse: collapse; ">
<table border="0" cellpadding="0" cellspacing="0" style="margin: 0px 10px; " width="640">
<tbody>
<tr style="border-collapse: collapse; ">
<td height="20" style="border-collapse: collapse; " width="640">
</td>
</tr>
<tr style="border-collapse: collapse; ">
<td style="border-collapse: collapse; " width="640">
<table bgcolor="#00707b" border="0" cellpadding="0" cellspacing="0" style="border-top-left-radius: 6px; border-top-right-radius: 6px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; background-color: rgb(4, 57, 72); color: rgb(231, 203, 163); " width="640">
<tbody>
<tr style="border-collapse: collapse; ">
<td style="border-collapse: collapse; " width="15">
</td>
<td align="left" style="border-collapse: collapse; " valign="middle" width="350">
<table border="0" cellpadding="0" cellspacing="0" width="350">
<tbody>
<tr style="border-collapse: collapse; ">
<td height="8" style="border-collapse: collapse; " width="350">
</td>
</tr>
</tbody>
</table>
<div style="font-size: 12px; ">
Web Version</div>
<table border="0" cellpadding="0" cellspacing="0" width="350">
<tbody>
<tr style="border-collapse: collapse; ">
<td height="8" style="border-collapse: collapse; " width="350">
</td>
</tr>
</tbody>
</table>
</td>
<td style="border-collapse: collapse; " width="30">
</td>
<td align="right" style="border-collapse: collapse; " valign="middle" width="255">
<table border="0" cellpadding="0" cellspacing="0" width="255">
<tbody>
<tr style="border-collapse: collapse; ">
<td height="8" style="border-collapse: collapse; " width="255">
</td>
</tr>
</tbody>
</table>
<table border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr style="border-collapse: collapse; ">
<td style="border-collapse: collapse; " valign="middle">
<img alt="Facebook icon" border="0" height="14" src="https://img.createsend1.com/img/templatebuilder/like-glyph.png" style="min-height: auto; line-height: 13px; outline-style: none; display: block; " width="8" /></td>
<td style="border-collapse: collapse; " width="3">
</td>
<td style="border-collapse: collapse; " valign="middle">
<div style="font-size: 12px; ">
Like</div>
</td>
<td style="border-collapse: collapse; " width="10">
</td>
<td style="border-collapse: collapse; " valign="middle">
<img alt="Forward icon" border="0" height="14" src="https://img.createsend1.com/img/templatebuilder/forward-glyph.png" style="min-height: auto; line-height: 13px; outline-style: none; display: block; " width="19" /></td>
<td style="border-collapse: collapse; " width="3">
</td>
<td style="border-collapse: collapse; " valign="middle">
<div style="font-size: 12px; ">
Forward</div>
</td>
</tr>
</tbody>
</table>
<table border="0" cellpadding="0" cellspacing="0" width="255">
<tbody>
<tr style="border-collapse: collapse; ">
<td height="8" style="border-collapse: collapse; " width="255">
</td>
</tr>
</tbody>
</table>
</td>
<td style="border-collapse: collapse; " width="15">
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr style="border-collapse: collapse; ">
<td align="center" bgcolor="#00707b" style="border-collapse: collapse; " width="640">
<table border="0" cellpadding="0" cellspacing="0" width="640">
<tbody>
<tr style="border-collapse: collapse; ">
<td style="border-collapse: collapse; " width="30">
</td>
<td height="30" style="border-collapse: collapse; " width="580">
</td>
<td style="border-collapse: collapse; " width="30">
</td>
</tr>
<tr style="border-collapse: collapse; ">
<td style="border-collapse: collapse; " width="30">
</td>
<td style="border-collapse: collapse; " width="580">
<div align="center">
<p style="color: rgb(231, 203, 163); font-family: 'Helvetica Neue', Arial, Helvetica, Geneva, sans-serif; font-size: 36px; margin-top: 0px; margin-bottom: 30px; ">
<strong>TheBigMall Coupon code !</strong></p>
</div>
</td>
<td style="border-collapse: collapse; " width="30">
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr style="border-collapse: collapse; ">
<td bgcolor="#ffffff" height="30" style="border-collapse: collapse; " width="640">
</td>
</tr>
<tr style="border-collapse: collapse; ">
<td bgcolor="#ffffff" style="border-collapse: collapse; " width="640">
<table border="0" cellpadding="0" cellspacing="0" width="640">
<tbody>
<tr style="border-collapse: collapse; ">
<td style="border-collapse: collapse; " width="30">
</td>
<td style="border-collapse: collapse; " width="580">
<table border="0" cellpadding="0" cellspacing="0" width="580">
<tbody>
<tr style="border-collapse: collapse; ">
<td style="border-collapse: collapse; " width="580">
<h1 align="left" style="font-size: 18px; line-height: 24px; color: rgb(154, 150, 97); font-weight: bold; margin-top: 0px; margin-bottom: 18px; ">
25% off on modular kitchens (Faizabad Road)</h1>
<div align="left" style="font-size: 13px; line-height: 18px; color: rgb(68, 68, 68); margin-top: 0px; margin-bottom: 18px; ">
<p style="margin-bottom: 15px; ">
<strong>Offer Details</strong></p>
<p style="margin-bottom: 15px; ">
Make your kitchen a beautiful place to cook with RECENT KITCHEN WORLD</p>
<p style="margin-bottom: 15px; ">
Get 25% discount on total billing amount on modular kitchens manufacturing. </p>
<p style="margin-bottom: 15px; ">
Our Products:<br style="line-height: 13px; " />
Marine Ply Shutter (Weather Proof)<br style="line-height: 13px; " />
Marine Ply Carcass (Weather Proof)<br style="line-height: 13px; " />
Acrylic shutter<br style="line-height: 13px; " />
Civil work<br style="line-height: 13px; " />
Chimney<br style="line-height: 13px; " />
150 Colours available</p>
<p style="margin-bottom: 15px; ">
Offer for limited period. So don't leave this opportunity & make your kitchen beautiful !!!</p>
</div>
</td>
</tr>
<tr style="border-collapse: collapse; ">
<td height="10" style="border-collapse: collapse; " width="580">
</td>
</tr>
</tbody>
</table>
<table border="0" cellpadding="0" cellspacing="0" width="580">
<tbody>
<tr style="border-collapse: collapse; ">
<td style="border-collapse: collapse; " width="580">
<p align="left" style="font-size: 18px; line-height: 24px; color: rgb(154, 150, 97); font-weight: bold; margin-top: 0px; margin-bottom: 18px; ">
Coupon code !</p>
<div align="left" style="font-size: 13px; line-height: 18px; color: rgb(68, 68, 68); margin-top: 0px; margin-bottom: 18px; ">
<h1 style="margin-bottom: 15px; text-align: center; ">
12345$randstr$randstr2</h1>
<p style="margin-bottom: 15px; ">
</p>
</div>
</td>
</tr>
<tr style="border-collapse: collapse; ">
<td height="10" style="border-collapse: collapse; " width="580">
</td>
</tr>
</tbody>
</table>
<table border="0" cellpadding="0" cellspacing="0" width="580">
<tbody>
<tr style="border-collapse: collapse; ">
<td style="border-collapse: collapse; " width="580">
<p align="left" style="font-size: 18px; line-height: 24px; color: rgb(154, 150, 97); font-weight: bold; margin-top: 0px; margin-bottom: 18px; ">
Address :</p>
<div align="left" style="font-size: 13px; line-height: 18px; color: rgb(68, 68, 68); margin-top: 0px; margin-bottom: 18px; ">
<p style="text-align: center; margin-bottom: 15px; ">
Store Address :Kamta Check Post, Faizabad Road, Opp. Kamta Petrol Pump, Lucknow.<br style="line-height: 13px; " />
City :Lucknow<br style="line-height: 13px; " />
Contact No.9415255816, 9721961276, 9918404211<br style="line-height: 13px; " />
<span style="color: rgb(255, 0, 0); ">Offers valid for 48 hours only.</span></p>
</div>
</td>
</tr>
<tr style="border-collapse: collapse; ">
<td height="10" style="border-collapse: collapse; " width="580">
</td>
</tr>
</tbody>
</table>
</td>
<td style="border-collapse: collapse; " width="30">
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr style="border-collapse: collapse; ">
<td bgcolor="#ffffff" height="15" style="border-collapse: collapse; " width="640">
</td>
</tr>
<tr style="border-collapse: collapse; ">
<td style="border-collapse: collapse; " width="640">
<table bgcolor="#043948" border="0" cellpadding="0" cellspacing="0" style="border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 6px; border-bottom-left-radius: 6px; background-color: rgb(4, 57, 72); color: rgb(226, 226, 226); " width="640">
<tbody>
<tr style="border-collapse: collapse; ">
<td style="border-collapse: collapse; " width="30">
</td>
<td height="30" style="border-collapse: collapse; " width="360">
</td>
<td style="border-collapse: collapse; " width="60">
</td>
<td style="border-collapse: collapse; " width="160">
</td>
<td style="border-collapse: collapse; " width="30">
</td>
</tr>
<tr style="border-collapse: collapse; ">
<td style="border-collapse: collapse; " width="30">
</td>
<td style="border-collapse: collapse; " valign="top" width="360">
<p align="left" style="font-size: 12px; line-height: 15px; margin-top: 0px; margin-bottom: 15px; ">
</p>
<p align="left" style="font-size: 12px; line-height: 15px; margin-top: 0px; margin-bottom: 15px; ">
All Rights Reserved > TheBigMall.co.in - Great discounts in your city</p>
</td>
<td style="border-collapse: collapse; " width="60">
</td>
<td style="border-collapse: collapse; " valign="top" width="160">
<p align="right" style="font-size: 11px; line-height: 16px; margin-top: 0px; margin-bottom: 15px; color: rgb(231, 203, 163); ">
</p>
</td>
<td style="border-collapse: collapse; " width="30">
</td>
</tr>
<tr style="border-collapse: collapse; ">
<td style="border-collapse: collapse; " width="30">
</td>
<td height="15" style="border-collapse: collapse; " width="360">
</td>
<td style="border-collapse: collapse; " width="60">
</td>
<td style="border-collapse: collapse; " width="160">
</td>
<td style="border-collapse: collapse; " width="30">
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr style="border-collapse: collapse; ">
<td height="60" style="border-collapse: collapse; " width="640">
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<img border="0" height="1" src="https://createsend3.com/t/j-o-wukdik-l/o.gif" style="min-height: 1px !important; width: 1px !important; border-width: 0px !important; margin: 0px !important; padding: 0px !important; line-height: 13px; outline-style: none; display: block; " width="1" /></div>
<div>
</div>
<p>
</p>
</body>
</html>
<?
$message = ob_get_clean();
mail($to,$subject,$message,$headers);
echo "Mail Sent.";
?>
you are missing the mail headers
See example from php.net
http://php.net/manual/en/function.mail.php
<?php
// multiple recipients
$to = 'aidan#example.com' . ', '; // note the comma
$to .= 'wez#example.com';
// subject
$subject = 'Birthday Reminders for August';
// message
$message = '
<html>
<head>
<title>Birthday Reminders for August</title>
</head>
<body>
<p>Here are the birthdays upcoming in August!</p>
<table>
<tr>
<th>Person</th><th>Day</th><th>Month</th><th>Year</th>
</tr>
<tr>
<td>Joe</td><td>3rd</td><td>August</td><td>1970</td>
</tr>
<tr>
<td>Sally</td><td>17th</td><td>August</td><td>1973</td>
</tr>
</table>
</body>
</html>
';
// To send HTML mail, the Content-type header must be set
$headers = 'MIME-Version: 1.0' . "\r\n";
$headers .= 'Content-type: text/html; charset=iso-8859-1' . "\r\n";
// Additional headers
$headers .= 'To: Mary <mary#example.com>, Kelly <kelly#example.com>' . "\r\n";
$headers .= 'From: Birthday Reminder <birthday#example.com>' . "\r\n";
$headers .= 'Cc: birthdayarchive#example.com' . "\r\n";
$headers .= 'Bcc: birthdaycheck#example.com' . "\r\n";
// Mail it
mail($to, $subject, $message, $headers);
?>
I recommend you phpmailer
http://phpmailer.worxware.com/index.php?pg=examplebmail
http://sourceforge.net/projects/phpmailer/
Unfortunately its not as simple as just sending the html in the body. YOu need to tell the mail client the content type and a few more steps.
Your best bet is to use a library like Pear Mail or Zend_Mail to make your life easier