I'm working on a Responsive Html email and media query is not working properly.
https://drive.google.com/open?id=1brZBV7hLqRw_KL37NXMyWgwYJpuz1Hpq
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Our Vineyard</title>
<style type="text/css">
body {
margin: 0; padding: 0;
}
#media only screen and (max-width: 660px) {
table.container { width: 480px !important; }
td.logo img { display: none; }
td.logo { background: #fff url(images/logo_medium.gif) no-repeat 10px 10px; height: 45px; }
}
#media only screen and (max-width: 510px) {
table.container { width: 100% !important; }
table.container td { border: none !important; }
td.logo { background: #fff url(images/logo_small.gif) no-repeat center 10px; height: 32px; }
}
</style>
</head>
<body bgcolor="#efe1b0">
<table width="100%" border="0" cellspacing="0" cellpadding="0" bgcolor="#efe1b0">
<tr>
<td>
<table class="container" width="640" align="center" border="0" cellpadding="0" cellspacing="0">
<tr>
<td valign="top" class="logo" bgcolor="#ffffff" style="padding: 10px 20px 0px 30px;
border-left: 1px solid #dbc064; border-right: 1px solid #dbc064; border-top: 1px solid #dbc064;">
<img style="margin-left: -15px;" src="images/logo_large.gif" alt="Our Vineyard" width="585" height="45" border="0"></a>
</td>
</tr>
<tr>
<td valign="top" class="headline" bgcolor="#ffffff" style="padding: 15px 20px 5px 30px; border-left: 1px solid #dbc064; border-right: 1px solid #dbc064; font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 22px;">
<h1 style="margin: 0px 0px 15px 0px; font-weight: normal; font-size: 32px; color: #723c7f;">Main Heading Here</h1>
</td>
</tr>
<tr>
<td valign="top" bgcolor="#f5f2e5" class="banner" style="border-left: 1px solid #dbc064; border-right: 1px solid #dbc064;">
<img src="images/banner_large.jpg" width="638" height="180" alt="Photo of Our Vineyard">
</td>
</tr>
<tr>
<td valign="top" bgcolor="#f5f2e5" valign="top" class="content" style="padding: 30px 30px 10px 30px; border-right: 1px solid #dbc064; border-left: 1px solid #dbc064; font-family:Arial, Helvetica, sans-serif; font-size: 16px; line-height:22px; color: #654308; background: #f5f2e2 url(images/banner_large_ghost.jpg) no-repeat 0px 0px;">
<table width="160" align="right" class="button" style="margin: 0px 0px 10px 30px;">
<tr>
<td style="text-align: center; background-color: #71a412; padding: 10px 15px; border-radius: 5px;">
Learn More
</td>
</tr>
</table>
Lorem ipsum dolor sit amet consec tetur adip isicing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam quis nostrud exercita tion ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum eu fugiat nulla.
<br><br>
Enjoy,
<br>
<img src="images/chris.gif" alt="Chris" width="90" height="40">
</td>
</tr>
<tr>
<td valign="top" bgcolor="#f5f2e5" class="promos" style="padding: 10px 30px 25px 30px; border-right:1px solid #dbc064; border-left:1px solid #dbc064; background-color: #f5f2e5; font-family: Arial, Helvetica, sans-serif;">
<table class="promo_1" width="270" align="left">
<tr>
<td>
<img class="promo" alt="Promo image 1" src="images/promo_1_large.jpg">
<h3 style="font-size:16px;">Promo heading here</h3>
Lorem ipsum dolor sit amet consectetur incididunt ut labore et dolore magna aliqua elit sed do eiusmod.
<br><br>
Learn more
</td>
</tr>
</table>
<table class="promo_2" width="270" align="right">
<tr>
<td>
<img class="promo" alt="Promo image 2" src="images/promo_2_large.jpg">
<h3 style="font-size:16px;">Promo heading here</h3>
Lorem ipsum dolor sit amet consectetur incididunt ut labore et dolore magna aliqua elit sed do eiusmod.
<br><br>
Learn more
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td valign="top" bgcolor="#55315d" class="callout" style="background-color: #55315d; padding: 30px; border-right: 1px solid #dbc064; border-bottom: 1px solid #dbc064; border-left: 1px solid #dbc064;">
<table class="callout_1" width="135" align="left" border="0" cellspacing="0" cellpadding="0">
<tr>
<td valign="top" width="135" style="padding-left: 10px; padding-right: 10px; font-family:Arial, Helvetica, sans-serif; font-size:13px; line-height: 16px; color: #ffffff;">
<img src="images/icon_grapes.gif" width="75" height="75"><br>
Lorem ipsum dolor sit amet conctetur adipi eiu smod incid amet idun.
<br><br>
Learn more
</td>
</tr>
</table>
<table class="callout_2" width="135" align="left" border="0" cellspacing="0" cellpadding="0">
<tr>
<td valign="top" width="135" style="padding-left: 10px; padding-right: 10px; font-family:Arial, Helvetica, sans-serif; font-size:13px; line-height: 16px; color: #ffffff;">
<img src="images/icon_bottle.gif" width="75" height="75"><br>
Ddolore eu fugiat nulla pariatur cupi datat excepteur occaet cupi noin.
<br><br>
Learn more
</td>
</tr>
</table>
<table class="callout_3" width="135" align="left" border="0" cellspacing="0" cellpadding="0">
<tr>
<td valign="top" width="135" style="padding-left: 10px; padding-right: 10px; font-family: Arial, Helvetica, sans-serif; font-size: 13px; line-height: 16px; color: #ffffff;">
<img src="images/icon_basket.gif" width="75" height="75"><br>
Eiusmod tempor inci didunt ut magna aliqua ut enim ad iam quis.
<br><br>
Learn more
</td>
</tr>
</table>
<table class="callout_4" width="135" align="left" border="0" cellspacing="0" cellpadding="0">
<tr>
<td valign="top" width="135" style="padding-left: 10px; padding-right: 10px; font-family: Arial, Helvetica, sans-serif; font-size: 13px; line-height: 16px; color: #ffffff;">
<img src="images/icon_camera.gif" width="75" height="75"><br>
Excepteur sint occaecat cupidatat non proident sunt in culpa qui molit.
<br><br>
Learn more
</td>
</tr>
</table>
<br style="clear: both;">
</td>
</tr>
<tr>
<td valign="top" class="footer" style="padding: 10px 0px 30px 0px; font-family: Arial, Helvetica, sans-serif; font-size: 11px; color: #b2a16e;">
© Your Company Name. PLEASE DO NOT REPLY TO THIS MESSAGE:
<br><br>
Your privacy is important to us. Please use this link to unsubscribe.
<br><br>
Lorem ipsum dolor sit amet consectetur adipi sicing elit sed do eiusmod tempor inci didunt ut labore et dolore iqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
email.html
You missing the meta viewport at head tag
<meta name="viewport" content="width=device-width, initial-scale=1.0">
You need add to head tag, the #media will apply base on device witdh
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
And notice that css content will apply the last match selector from top to down.
If you want to hide the logo you need move #media 660px move down below #media 510px
#media only screen and (max-width: 510px) {
table.container { width: 100% !important; }
table.container td { border: none !important; }
td.logo { background: #fff url(images/logo_small.gif) no-repeat center 10px; height: 32px; }
}
#media only screen and (max-width: 660px) {
table.container { width: 480px !important; }
td.logo img { display: none; }
td.logo { background: #fff url(images/logo_medium.gif) no-repeat 10px 10px; height: 45px; }
}
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/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">
<title>Our Vineyard</title>
<style type="text/css">
body {
margin: 0; padding: 0;
}
#media only screen and (max-width: 660px) {
table.container { width: 480px !important; }
td.logo img { display: none; }
td.logo { background: #fff url(images/logo_medium.gif) no-repeat 10px 10px; height: 45px; }
}
#media only screen and (max-width: 510px) {
table.container { width: 100% !important; }
table.container td { border: none !important; }
td.logo { background: #fff url(images/logo_small.gif) no-repeat center 10px; height: 32px; }
}
</style>
</head>
<body bgcolor="#efe1b0">
<table width="100%" border="0" cellspacing="0" cellpadding="0" bgcolor="#efe1b0">
<tr>
<td>
<table class="container" width="640" align="center" border="0" cellpadding="0" cellspacing="0">
<tr>
<td valign="top" class="logo" bgcolor="#ffffff" style="padding: 10px 20px 0px 30px;
border-left: 1px solid #dbc064; border-right: 1px solid #dbc064; border-top: 1px solid #dbc064;">
<img style="margin-left: -15px;" src="images/logo_large.gif" alt="Our Vineyard" width="585" height="45" border="0"></a>
</td>
</tr>
<tr>
<td valign="top" class="headline" bgcolor="#ffffff" style="padding: 15px 20px 5px 30px; border-left: 1px solid #dbc064; border-right: 1px solid #dbc064; font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 22px;">
<h1 style="margin: 0px 0px 15px 0px; font-weight: normal; font-size: 32px; color: #723c7f;">Main Heading Here</h1>
</td>
</tr>
<tr>
<td valign="top" bgcolor="#f5f2e5" class="banner" style="border-left: 1px solid #dbc064; border-right: 1px solid #dbc064;">
<img src="images/banner_large.jpg" width="638" height="180" alt="Photo of Our Vineyard">
</td>
</tr>
<tr>
<td valign="top" bgcolor="#f5f2e5" valign="top" class="content" style="padding: 30px 30px 10px 30px; border-right: 1px solid #dbc064; border-left: 1px solid #dbc064; font-family:Arial, Helvetica, sans-serif; font-size: 16px; line-height:22px; color: #654308; background: #f5f2e2 url(images/banner_large_ghost.jpg) no-repeat 0px 0px;">
<table width="160" align="right" class="button" style="margin: 0px 0px 10px 30px;">
<tr>
<td style="text-align: center; background-color: #71a412; padding: 10px 15px; border-radius: 5px;">
Learn More
</td>
</tr>
</table>
Lorem ipsum dolor sit amet consec tetur adip isicing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam quis nostrud exercita tion ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum eu fugiat nulla.
<br><br>
Enjoy,
<br>
<img src="images/chris.gif" alt="Chris" width="90" height="40">
</td>
</tr>
<tr>
<td valign="top" bgcolor="#f5f2e5" class="promos" style="padding: 10px 30px 25px 30px; border-right:1px solid #dbc064; border-left:1px solid #dbc064; background-color: #f5f2e5; font-family: Arial, Helvetica, sans-serif;">
<table class="promo_1" width="270" align="left">
<tr>
<td>
<img class="promo" alt="Promo image 1" src="images/promo_1_large.jpg">
<h3 style="font-size:16px;">Promo heading here</h3>
Lorem ipsum dolor sit amet consectetur incididunt ut labore et dolore magna aliqua elit sed do eiusmod.
<br><br>
Learn more
</td>
</tr>
</table>
<table class="promo_2" width="270" align="right">
<tr>
<td>
<img class="promo" alt="Promo image 2" src="images/promo_2_large.jpg">
<h3 style="font-size:16px;">Promo heading here</h3>
Lorem ipsum dolor sit amet consectetur incididunt ut labore et dolore magna aliqua elit sed do eiusmod.
<br><br>
Learn more
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td valign="top" bgcolor="#55315d" class="callout" style="background-color: #55315d; padding: 30px; border-right: 1px solid #dbc064; border-bottom: 1px solid #dbc064; border-left: 1px solid #dbc064;">
<table class="callout_1" width="135" align="left" border="0" cellspacing="0" cellpadding="0">
<tr>
<td valign="top" width="135" style="padding-left: 10px; padding-right: 10px; font-family:Arial, Helvetica, sans-serif; font-size:13px; line-height: 16px; color: #ffffff;">
<img src="images/icon_grapes.gif" width="75" height="75"><br>
Lorem ipsum dolor sit amet conctetur adipi eiu smod incid amet idun.
<br><br>
Learn more
</td>
</tr>
</table>
<table class="callout_2" width="135" align="left" border="0" cellspacing="0" cellpadding="0">
<tr>
<td valign="top" width="135" style="padding-left: 10px; padding-right: 10px; font-family:Arial, Helvetica, sans-serif; font-size:13px; line-height: 16px; color: #ffffff;">
<img src="images/icon_bottle.gif" width="75" height="75"><br>
Ddolore eu fugiat nulla pariatur cupi datat excepteur occaet cupi noin.
<br><br>
Learn more
</td>
</tr>
</table>
<table class="callout_3" width="135" align="left" border="0" cellspacing="0" cellpadding="0">
<tr>
<td valign="top" width="135" style="padding-left: 10px; padding-right: 10px; font-family: Arial, Helvetica, sans-serif; font-size: 13px; line-height: 16px; color: #ffffff;">
<img src="images/icon_basket.gif" width="75" height="75"><br>
Eiusmod tempor inci didunt ut magna aliqua ut enim ad iam quis.
<br><br>
Learn more
</td>
</tr>
</table>
<table class="callout_4" width="135" align="left" border="0" cellspacing="0" cellpadding="0">
<tr>
<td valign="top" width="135" style="padding-left: 10px; padding-right: 10px; font-family: Arial, Helvetica, sans-serif; font-size: 13px; line-height: 16px; color: #ffffff;">
<img src="images/icon_camera.gif" width="75" height="75"><br>
Excepteur sint occaecat cupidatat non proident sunt in culpa qui molit.
<br><br>
Learn more
</td>
</tr>
</table>
<br style="clear: both;">
</td>
</tr>
<tr>
<td valign="top" class="footer" style="padding: 10px 0px 30px 0px; font-family: Arial, Helvetica, sans-serif; font-size: 11px; color: #b2a16e;">
© Your Company Name. PLEASE DO NOT REPLY TO THIS MESSAGE:
<br><br>
Your privacy is important to us. Please use this link to unsubscribe.
<br><br>
Lorem ipsum dolor sit amet consectetur adipi sicing elit sed do eiusmod tempor inci didunt ut labore et dolore iqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
Related
I'm using this footer as reference to my Website but I've detected a situation when the main content is short, which creates a gap between both elements (See image below).
Anyone can give me a hand in this? :) I'll post the necessary code!
#inherits LayoutComponentBase
<div class="sidebar">
<NavMenu />
</div>
<div class="main">
<div class="top-row px-4 auth">
<LoginDisplay />
</div>
#Body
<!-- footer -->
https://codepen.io/scanfcode/pen/MEZPNd (HTML and CSS of Footer is here)
</div>
main CSS:
You may need to update your HTML structure in right panel.
follow
<div class="content">
<h1>Sticky Footer with Negative Margin 1</h1>
<div class="push">
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.
</p>
</div>
</div>
<footer class="footer">
Footer
</footer>
<style>
html, body {
height: 100%;
margin: 0;
}
.content {
padding: 20px;
min-height: 100%;
margin: 0 auto -50px;
}
.footer,
.push {
height: 50px;
}
* {
box-sizing: border-box;
}
body {
font: 16px Sans-Serif;
}
h1 {
margin: 0 0 20px 0;
}
p {
margin: 20px 0 0 0;
}
footer {
background: #42A5F5;
color: white;
line-height: 50px;
padding: 0 20px;
}
</style>
I want to get email body from in html format,
defaults = {
'name': msg.get('subject') or _("No Subject"),
'email_from': msg.get('from'),
'email_cc': msg.get('cc'),
'partner_id': msg.get('author_id', False),
'description': msg.get('body'),
}
I want to get email body to description but when I use 'description': msg.get('body'), it takes all on text format,
I want to get email body on HTML format
<html xmlns="https://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office"><head>
<!--[if gte mso 9]><xml>
<o:OfficeDocumentSettings>
<o:AllowPNG/>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml><![endif]-->
<title>Christmas Email template</title>
<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 ">
<meta name="format-detection" content="telephone=no">
<!--[if !mso]><!-->
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700,800" rel="stylesheet">
<!--<![endif]-->
<style type="text/css">
body {
margin: 0 !important;
padding: 0 !important;
-webkit-text-size-adjust: 100% !important;
-ms-text-size-adjust: 100% !important;
-webkit-font-smoothing: antialiased !important;
}
img {
border: 0 !important;
outline: none !important;
}
p {
Margin: 0px !important;
Padding: 0px !important;
}
table {
border-collapse: collapse;
mso-table-lspace: 0px;
mso-table-rspace: 0px;
}
td, a, span {
border-collapse: collapse;
mso-line-height-rule: exactly;
}
.ExternalClass * {
line-height: 100%;
}
.em_defaultlink a {
color: inherit !important;
text-decoration: none !important;
}
span.MsoHyperlink {
mso-style-priority: 99;
color: inherit;
}
span.MsoHyperlinkFollowed {
mso-style-priority: 99;
color: inherit;
}
#media only screen and (min-width:481px) and (max-width:699px) {
.em_main_table {
width: 100% !important;
}
.em_wrapper {
width: 100% !important;
}
.em_hide {
display: none !important;
}
.em_img {
width: 100% !important;
height: auto !important;
}
.em_h20 {
height: 20px !important;
}
.em_padd {
padding: 20px 10px !important;
}
}
#media screen and (max-width: 480px) {
.em_main_table {
width: 100% !important;
}
.em_wrapper {
width: 100% !important;
}
.em_hide {
display: none !important;
}
.em_img {
width: 100% !important;
height: auto !important;
}
.em_h20 {
height: 20px !important;
}
.em_padd {
padding: 20px 10px !important;
}
.em_text1 {
font-size: 16px !important;
line-height: 24px !important;
}
u + .em_body .em_full_wrap {
width: 100% !important;
width: 100vw !important;
}
}
</style>
</head>
<body class="em_body" style="margin:0px; padding:0px;" bgcolor="#efefef">
<table class="em_full_wrap" valign="top" width="100%" cellspacing="0" cellpadding="0" border="0" bgcolor="#efefef" align="center">
<tbody><tr>
<td valign="top" align="center"><table class="em_main_table" style="width:700px;" width="700" cellspacing="0" cellpadding="0" border="0" align="center">
<!--Header section-->
<tbody><tr>
<td style="padding:15px;" class="em_padd" valign="top" bgcolor="#f6f7f8" align="center"><table width="100%" cellspacing="0" cellpadding="0" border="0" align="center">
<tbody><tr>
<td style="font-family:'Open Sans', Arial, sans-serif; font-size:12px; line-height:15px; color:#0d1121;" valign="top" align="center">Test Email Sample | View Online</td>
</tr>
</tbody></table></td>
</tr>
<!--//Header section-->
<!--Banner section-->
<tr>
<td valign="top" align="center"><table width="100%" cellspacing="0" cellpadding="0" border="0" align="center">
<tbody><tr>
<td valign="top" align="center"><img class="em_img" alt="merry Christmas" style="display:block; font-family:Arial, sans-serif; font-size:30px; line-height:34px; color:#000000; max-width:700px;" src="images/05be8b57-6b90-4ebd-ba17-4014c79f2e4b.jpg" width="700" border="0" height="345"></td>
</tr>
</tbody></table></td>
</tr>
<!--//Banner section-->
<!--Content Text Section-->
<tr>
<td style="padding:35px 70px 30px;" class="em_padd" valign="top" bgcolor="#0d1121" align="center"><table width="100%" cellspacing="0" cellpadding="0" border="0" align="center">
<tbody><tr>
<td style="font-family:'Open Sans', Arial, sans-serif; font-size:16px; line-height:30px; color:#ffffff;" valign="top" align="center">This is a sample email which shall be accommodated in a single paragraph</td>
</tr>
<tr>
<td style="font-size:0px; line-height:0px; height:15px;" height="15"> </td>
<!--—this is space of 15px to separate two paragraphs ---->
</tr>
<tr>
<td style="font-family:'Open Sans', Arial, sans-serif; font-size:18px; line-height:22px; color:#fbeb59; letter-spacing:2px; padding-bottom:12px;" valign="top" align="center">This is paragraph 2 of font size 18px and #fbeb59 font color with a line spacing of 15px</td>
</tr>
<tr>
<td class="em_h20" style="font-size:0px; line-height:0px; height:25px;" height="25"> </td>
<!--—this is space of 25px to separate two paragraphs ---->
</tr>
<tr>
<td style="font-family:'Open Sans', Arial, sans-serif; font-size:18px; line-height:22px; color:#fbeb59; text-transform:uppercase; letter-spacing:2px; padding-bottom:12px;" valign="top" align="center"> This is paragraph 3 of font size 18px and #fbeb59 font color with a line spacing of 25px and Uppercase</td>
</tr>
</tbody></table></td>
</tr>
<!--//Content Text Section-->
<!--Footer Section-->
<tr>
<td style="padding:38px 30px;" class="em_padd" valign="top" bgcolor="#f6f7f8" align="center"><table width="100%" cellspacing="0" cellpadding="0" border="0" align="center">
<tbody><tr>
<td style="padding-bottom:16px;" valign="top" align="center"><table cellspacing="0" cellpadding="0" border="0" align="center">
<tbody><tr>
<td valign="top" align="center"><img src="images/fb.png" alt="fb" style="display:block; font-family:Arial, sans-serif; font-size:14px; line-height:14px; color:#ffffff; max-width:26px;" width="26" border="0" height="26"></td>
<td style="width:6px;" width="6"> </td>
<td valign="top" align="center"><img src="images/tw.png" alt="tw" style="display:block; font-family:Arial, sans-serif; font-size:14px; line-height:14px; color:#ffffff; max-width:27px;" width="27" border="0" height="26"></td>
<td style="width:6px;" width="6"> </td>
<td valign="top" align="center"><img src="images/yt.png" alt="yt" style="display:block; font-family:Arial, sans-serif; font-size:14px; line-height:14px; color:#ffffff; max-width:26px;" width="26" border="0" height="26"></td>
</tr>
</tbody></table></td>
</tr>
<tr>
<td style="font-family:'Open Sans', Arial, sans-serif; font-size:11px; line-height:18px; color:#999999;" valign="top" align="center">PRIVACY STATEMENT | TERMS OF SERVICE | RETURNS<br>
© 2017 Companyname. All Rights Reserved.<br>
If you do not wish to receive any further emails from us, please unsubscribe</td>
</tr>
</tbody></table></td>
</tr>
<tr>
<td class="em_hide" style="line-height:1px;min-width:700px;background-color:#ffffff;"><img alt="" src="images/spacer.gif" style="max-height:1px; min-height:1px; display:block; width:700px; min-width:700px;" width="700" border="0" height="1"></td>
</tr>
</tbody></table></td>
</tr>
</tbody></table>
<div class="em_hide" style="white-space: nowrap; display: none; font-size:0px; line-height:0px;"> </div>
</body></html>
here is the basic function when creating new ticket (incoming message)
#api.model
def message_new(self, msg, custom_values=None):
""" Overrides mail_thread message_new that is called by the mailgateway
through message_process.
This override updates the document according to the email.
"""
# remove default author when going through the mail gateway. Indeed we
# do not want to explicitly set user_id to False; however we do not
# want the gateway user to be responsible if no other responsible is
# found.
create_context = dict(self.env.context or {})
create_context['default_user_id'] = False
defaults = {
'name': msg.get('subject') or _("No Subject"),
'email_from': msg.get('from'),
'email_cc': msg.get('cc'),
'partner_id': msg.get('author_id', False),
}
if custom_values:
defaults.update(custom_values)
res_id = super(ProjectIssue, self.with_context(create_context)).message_new(msg, custom_values=defaults)
issue = self.browse(res_id)
email_list = issue.email_split(msg)
partner_ids = filter(None, issue._find_partner_from_emails(email_list))
issue.message_subscribe(partner_ids)
return res_id
when I add
'description' : msg.get('body'),
I can get the body of the email, but its on text format,
then I check on 'description' and I found this
description = fields.text('Private Note')
that's why I only get text format, not HTML format,
so I change the description format to this
description = fields.Html('Private Note')
then the format of description is back to normal and readable.
I'm trying to make a newsletter sort of thing and this piece of bovine defecation won't stay the width I specify. I've already set the width in 100 different places and whenever I preview it on Outlook it completely stretches out to infinity.
I do have a "width:100%" piece of code here but It's inside the master div, and the master div specifies the width clearly so the child element should obey this size when setting it as 100%. Should be relative to the parent element.
It's driving me crazy. I'm editing this in Joomla 1.5 to top it off, which is seemingly annoying as dgwergh. Doesn't even let me make a style section and I can't think of another free way to edit and send html newsletters to thousands of people while presenting statistics for free.
And upgrading it is annoying as egewg because I need to test it in a different domain first which I don't have.
Here's my code:
<div style="font-family: century gothic;" align="center">
<table style="width: 600px; background-color: #ffffff; display: block;" border="0" cellspacing="0" cellpadding="0" bgcolor="#FFFFFF">
<tbody>
<tr>
<td rowspan="1" colspan="1" align="center" valign="top">
<table style="width: 600px; height: 0px;" cellspacing="0" cellpadding="0">
<tbody>
<tr style="line-height: 0px;">
<td>
<table style="margin-top: 0;">
<tbody>
<tr style="line-height: 0px;">
<td style="line-height: 0px; height: 83px; margin-top: 0; width: 600px;"><img src="" alt="SEMINARIO-header-14julho2014" width="100%" height="auto" /></td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td style="background-color: #fff; padding: 2px; width: 600px;" rowspan="1" colspan="1" align="left" valign="top" bgcolor="#000000">
<table style="width: 100%; vertical-align: middle;" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td style="padding: 0px; width: 600px;" rowspan="1" colspan="1" align="left" valign="top" width="600"></td>
</tr>
<tr>
<td style="background-color: #ffffff; width: 600px;" rowspan="1" colspan="1" align="left" valign="top" bgcolor="#FFFFFF" width="600">
<table style="display: table; width: 100%; font-family: century gothic; vertical-align: middle;" cellspacing="0" cellpadding="3" bgcolor="#888888">
<tbody>
<tr>
<td style="width: 600px; text-align: center; font-family: century gothic; color: #ffffff; vertical-align: middle;" rowspan="1" colspan="1" align="center" valign="top">
<div style="font-family: century gothic; vertical-align: middle;">
<div style="font-family: century gothic; vertical-align: middle;">
<div style="font-family: century gothic; vertical-align: middle;"><span style="font-family: 'century gothic'; font-size: 16pt;"><br /></span></div>
<div style="font-family: century gothic; vertical-align: middle;"><span style="font-family: 'century gothic'; font-size: 16pt;">SEMINÁRIO</span></div>
<p style="font-family: century gothic; font-size: 18pt; color: #eaeff4;"><strong style="color: #ffffff; background-color: transparent;">BIM & MODELAÇÃO DE ESTRUTURAS</strong><span style="color: #ffffff; font-size: 14pt; background-color: transparent;"><strong> </strong></span><span style="font-size: 16pt; color: #ffffff; background-color: transparent;"> </span></p>
<p><span style="font-size: 10pt;"> | 14 de Julho de 2014 | 15h30 - 18h30</span></p>
</div>
<div><span style="font-size: 14pt;"> </span></div>
</div>
</td>
</tr>
</tbody>
</table>
<table style="display: table; width: 100%; background-color: #efefef; font-family: century gothic; size: 8pt;" cellspacing="6" cellpadding="1">
<tbody>
<tr>
<td style="width: 600px; text-align: left; color: #000000;" rowspan="1" colspan="1" align="left" valign="top">
<div style="color: #000; font-size: 10.8pt; font-family: century gothic; text-align: justify; padding: 10px;" align="justify">
<p>Caro projectista/engenheiro,<br /><br /> <br />A convida-o a assitir e participar no seminário gratuito de BIM & Modelação de Estruturas no dia 14 de Julho, dedicado especialmente a projectistas e engenheiros, cuja preocupação é resolver a crescente necessidade de eficiência no projecto de estruturas, mantendo um elevado controlo nos procedimentos de cálculo e dimensionamento estrutural.</p>
<p>Contamos com uma participação muito significativa de pessoas que utilizam no seu dia-a-dia aplicações de modelação e cálculo de estruturas da CSI, mas também de outras empresas igualmente prestigiadas do mesmo sector. Sabemos que os softwares de cálculo estrutural progridem dia após dia, mas no entanto, muitos engenheiros e projectistas não sentem que isso reflicta directamente em acréscimo de produtividade e eficácia do trabalho.</p>
<p>Gostaríamos de poder contar com a sua presença no seminário, para lhe apresentar as nossas poderosas ferramentas de cálculo, de uso intuitivo e eficaz, as quais acreditamos ser do seu interesse.</p>
<p>As inscrições no seminário BIM & Modelação de Estruturas, a ter lugar na Universidade Lusófona do Porto, ainda estão abertas. Gostaríamos de renovar o nosso convite (caso ainda não tenha feito a inscrição), porque acreditamos que no fim, irá dar por bem investido o seu tempo. Pedimos-lhe esse tempo na certeza de que, independentemente dos programas que use, ficará com uma ideia sólida sobre as valências actuais da oferta de software de uma das empresas líderes mundiais em modelação e cálculo estrutural.</p>
<p>Assim, reenviamos o link com o programa do seminário, na expectativa de o encontrar presente neste grande evento, que irá reunir vários projectistas e engenheiros.</p>
</div>
<div style="font-family: century gothic; text-align: justify;" align="justify"> </div>
<div style="text-align: center;" align="center"> </div>
<div style="text-align: center;" align="center"> </div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td style="width: 100%;">
<table style="background-color: #507d90;">
<tbody>
<tr style="padding-bottom: 0px;">
<td style="width: 210px; height: 60px; padding-left: 5px;"><img src="" alt="csi logo" width="140" /></td>
<td style="width: 435px; height: 60px; text-align: right; color: #fff; font-weight: bold; font-size: 7pt;">
<p style="font-family: century gothic; padding-right: 5px;"><br />T: <br />E: <br />W:
</tr>
<tr>
<td style="text-justify: justify; line-height: 11px; font-family: century gothic; width: 640; padding-bottom: 20px; padding-left: 30px; padding-right: 25px; font-size: 7pt; color: #fff;" colspan="2">
<hr />
A mensagem que acabou de receber é um e-mail informativo da CSI Portugal, não devendo ser considerado como SPAM. De acordo com o Artº. 22 do Decreto lei 7/2004 de 7 de Janeiro, se o seu registo foi incluído na nossa lista de envio por erro ou se pretender simplesmente ser removido da mesma, por favor clique {unsubscribe}aqui{/unsubscribe}</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
Remove all the width: 100% you have in your code. I tried this in Outlook and it displayed the 600px-wide block in the middle of the mail, which I assume is the result you want to achieve.
Also, the width of your footer lacks an unit : I corrected it width: 640px.
See http://jsfiddle.net/w6rHj/ for the small changes.
That code works for me when I copy and paste it into Outlook (I assume you mean the rebranded Hotmail rather than Outlook Express).
Some bug fixing tips
Try sending it without using Joomla to see if it is Joomla or Outlook that is causing the problem.
Try inspecting the css of the wide element in Firebug to see what styles it is inheriting. Outlook styles may be overriding your styles. Firebug also allows you to turn off styles until you can spot the problematic one.
View the source of the email when it is in Outlook and see if it differs - has it changed in any way.
Also, you haven't closed your div surrounding the table in the example above. Doubt this would cause it, however.
I am trying to recreate something close to this table:
I am getting weird lines, though, with the way that I've gone about trying to do it. How do I get rid of them? Or could someone tell me the easiest way to achieve what is done in the table pictured above? Here is my code:
<!DOCTYPE html>
<html>
<head>
<title>Assignment #4</title>
<style>
table
{
font-family:"Courier New", Arial, Helvetica, sans-serif;
border-collapse:collapse;
margin: auto;
border-bottom-style: double; border-top-style: double;
}
table.border tr {border: 1px solid black; border-left: 0px solid;
border-right: 0px solid;}
th
{
font-size:18px;
font-style: bold;
padding-top:2px;
padding-bottom:2px;
background-color:lightblue;
color:#000000;
}
tr.white td
{
color:#000000;
background-color: #ffffff;
}
td,th
{
font-size:1em;
padding:3px 7px 2px 7px;
text-align: left;
</style>
</head>
<body>
<body>
<h3 style="text-align: center; font-family: courier new;">
<strong>Code-page support in microsoft windows</strong></h3>
<table class="border">
<tr>
<th>Code-Page ID</th>
<th style="border: 1px solid black; text-align: center;">Name</th>
<th colspan="2">ACP OEMCP</th>
</tr
<div>
<tr class="white">
<td style="background-color: lightblue;" rowspan="3">1200
<br/>1250
<br/>1251</td>
<td style="border: 1px solid black;" rowspan="3">Unicode
<br/>Windows 3.1 Eastern European
<br/>Windows 3.1 Cynillic</td>
<td rowspan="3"><br/>X <br/>X</td>
</tr>
<tr class="white">
<td style="border: 1px solid black;"></td>
</tr>
<tr class="white">
<td style="border: 1px solid black;"></td>
</tr>
</div>
<div>
<tr class="white">
<td style="background-color: lightblue;" rowspan="3">437 <br/>708 <br/>709</td>
<td style="border: 1px solid black;" rowspan="3">MS-DOS
<br/>Arabic (ASMO 708)
<br/>Arabic (ASMO 449)</td>
<td><br/></td>
<td colspan="2">X <br/>X <br/>X</td>
</tr>
<tr class="white">
<td style="border: 1px solid black;"></td>
</tr>
<tr class="white">
<td style="border: 1px solid black;"></td>
</tr>
</div>
<div>
<tr class="white">
<td style="background-color: lightblue;">Assignment#4</td>
<td style="border: 1px solid black;">
Mansfield University</td>
<td colspan="2"><center>
<img src="http://mansfield.edu/files/images/Facebook.gif"> </center></td>
</tr>
</div>
</table>
</body>
</html>
First of all the link of the image sample didn't work here for me :(
But if you mean the vertical lines like line1|line2 are your problem, you can use colspan=2. This will result in something like line1 line2.
Example:
<tr>
<td colspan=2>
</td>
<td>
</td>
</tr>
Hope that will help,
Regards,
Otacon
Your code is a mess! You put two "body" and forgot some "}" and ">".
Apart that the problem was the "td's" in blank that you put inside the "tr". Here you have the code:
<!DOCTYPE html>
<html>
<head>
<title>Assignment #4</title>
<style>
table {
font-family:"Courier New", Arial, Helvetica, sans-serif;
border-collapse:collapse;
margin: auto;
border-bottom-style: double; border-top-style: double;
}
table.border tr {
border: 1px solid black;
border-left: 0px solid;
border-right: 0px solid;
}
th{
font-size:18px;
font-style: bold;
padding-top:2px;
padding-bottom:2px;
background-color:lightblue;
color:#000000;
}
tr.white td {
color:#000000;
background-color: #ffffff;
}
td,th{
font-size:1em;
padding:3px 7px 2px 7px;
text-align: left;
}
</style>
</head>
<body>
<h3 style="text-align: center; font-family: courier new;">
<strong>Code-page support in microsoft windows</strong></h3>
<table class="border">
<tr>
<th>Code-Page ID</th>
<th style="border: 1px solid black; text-align: center;">Name</th>
<th colspan="2">ACP OEMCP</th>
</tr>
<tr class="white">
<td style="background-color: lightblue;" rowspan="3">1200
<br/>1250
<br/>1251</td>
<td style="border: 1px solid black;" rowspan="3">Unicode
<br/>Windows 3.1 Eastern European
<br/>Windows 3.1 Cynillic</td>
<td rowspan="3"><br/>X <br/>X</td>
</tr>
<tr class="white">
</tr>
<tr class="white">
</tr>
<tr class="white">
<td style="background-color: lightblue;" rowspan="3">437 <br/>708 <br/>709</td>
<td style="border: 1px solid black;" rowspan="3">MS-DOS
<br/>Arabic (ASMO 708)
<br/>Arabic (ASMO 449)</td>
<td><br/></td>
<td colspan="2">X <br/>X <br/>X</td>
</tr>
<tr class="white">
</tr>
<tr class="white">
</tr>
<tr class="white">
<td style="background-color: lightblue;">Assignment#4</td>
<td style="border: 1px solid black;">
Mansfield University</td>
<td colspan="2"><center>
<img src="http://mansfield.edu/files/images/Facebook.gif"> </center></td>
</tr>
</table>
</body>
</html>
I think that's what you're looking for.
Hope this answer helped you.
Regards,
LGhost
I need help setting up an email newsletter template as one of the columns is not being displayed properly, the column containing heading 2 is not being displayed properly it is being displayed towards right side of the page instead of aligning with the template elements.
Here is the code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
</head>
<body>
<!--Table Start-->
<table border="0" align="center" cellpadding="0" cellspacing="0" class="cont-bg" bgcolor="#f1f1f1" style="background-color: #f1f1f1; padding: 27px 0px 0px; width: 100%; background-position: initial initial; background-repeat: initial initial;">
<tbody>
<tr>
<td align="center" valign="top" width="1133"> <!--Main Part Start-->
<table border="0" align="center" cellpadding="0" cellspacing="0" style="width: 650px;">
<tbody>
<tr>
<td align="left" valign="top"> <!--Header Part Start-->
<table border="0" align="center" cellpadding="0" cellspacing="0" style="width: 650px; height: 682px;">
<tbody>
<tr>
<td colspan="2" align="right" valign="top" mc:edit="view" style="font: normal 12px arial, helvetica, sans-serif; color: #000000; padding-bottom: 22px;">You can’t see this email? View it in your browser.</td>
</tr>
<tr><!--Logo Start-->
<td width="287" align="left" valign="top" bgcolor="#ffffff" style="background: #fff;">
<p align="left"><br />
<img src="commstellogo.png" width="208" height="45" border="0" align="left" /></p></td>
<!--Logo End--><!--Menu Part Start-->
<td width="363" height="94" align="left" valign="middle" bgcolor="#ffffff" style="background: #fff;">
<table border="0" cellspacing="0" cellpadding="0" style="width: 340px;">
<tbody>
<tr>
<td align="right" valign="top" mc:edit="date" style="font: bold 18px arial, helvetica, sans-serif; color: #2f2f2f; text-transform: uppercase; padding-bottom: 8px;">01727 260 101</td>
</tr>
<tr>
<td align="left" valign="top">
<table border="0" cellspacing="0" cellpadding="0" style="width: 340px;">
<tbody>
<tr>
<td width="16" align="left" valign="top"><img mc:edit="h-icin" src="images/home-icon.png" width="16" height="19" alt="" /></td>
<td width="64" align="left" valign="middle" mc:edit="h-text" style="font: bold 12px arial, helvetica, sans-serif; color: #414141; padding-left: 9px;">Home</td>
<td width="16" align="left" valign="top"><img mc:edit="s-icon" src="images/setting.png" width="16" height="19" alt="" /></td>
<td width="79" align="left" valign="middle" mc:edit="s-text" style="font: bold 12px arial, helvetica, sans-serif; color: #414141; padding-left: 9px;">Services</td>
<td width="16" align="left" valign="top"><img mc:edit="a-icon" src="images/about-us.png" width="16" height="19" alt="" /></td>
<td width="77" align="left" valign="middle" mc:edit="a-text" style="font: bold 12px arial, helvetica, sans-serif; color: #414141; padding-left: 9px;">About us</td>
<td width="18" align="left" valign="top"><img mc:edit="s-icon" src="images/support.png" width="16" height="19" alt="" /></td>
<td width="54" align="right" valign="middle" mc:edit="s-text" style="font: bold 12px arial, helvetica, sans-serif; color: #414141; padding-left: 9px;">Contact</td>
</tr>
</tbody>
</table></td>
</tr>
</tbody>
</table></td>
<!--Menu Part End--></tr>
<tr>
<td colspan="2" align="left" valign="top" height="548"> <!--Banner Start-->
<table border="0" cellspacing="0" cellpadding="0" style="width: 650px;">
<tbody>
<tr>
<td align="left" valign="top"><img mc:edit="banner-image" src="#" width="649" height="356" alt="" style="display: block;" /></td>
</tr>
<tr>
<td align="left" valign="top" bgcolor="#2f2f2f" style="padding: 25px 0px 18px 20px; background: #2f2f2f;">
<table border="0" cellspacing="0" cellpadding="0" style="width: 611px;">
<tbody>
<tr>
<td align="left" valign="top" mc:edit="banner-title" style="font: normal 24px arial, helvetica, sans-serif; color: #fff; padding-bottom: 8px;">Heading Area</td>
</tr>
<tr>
<td align="left" valign="top" mc:edit="banner-text" style="font: normal 12px arial, helvetica, sans-serif; color: #fff; line-height: 18px; padding: 0px 0px 12px 4px;">Vivamus interdum mauris urna. Nullam egestas augue elit. Aliquam pretium elit varius metus hendrerit volutpat. <b>20% off</b> Vivamus interdum mauris urna. Nullam egestas augue elit. Aliquam pretium elit varius metus hendrerit volutpat.</td>
</tr>
<tr>
<td align="left" valign="top"><img mc:edit="banner-read-more" src="#" width="128" height="31" alt="" /></td>
</tr>
</tbody>
</table></td>
</tr>
</tbody>
</table>
<!--Banner End--> </td>
</tr>
</tbody>
</table>
<!--Header Part End--> </td>
</tr>
<tr><!--Body Part Start--></tr>
<tr>
<td width="330" align="left" valign="top"> <!--Two column 1 Start-->
<table border="0" cellspacing="0" cellpadding="0" style="width: 320px;">
<tbody>
<tr>
<td align="left" valign="top"><img mc:edit="two-coulmn-image1" src="businesstelephone.png" width="320" height="172" alt="" style="display: block;" /></td>
</tr>
<tr>
<td align="left" valign="top" bgcolor="#2f2f2f" style="padding: 15px 0px 18px 20px; background: #2f2f2f;">
<table border="0" cellspacing="0" cellpadding="0" style="width: 288px;">
<tbody>
<tr>
<td align="left" valign="top" mc:edit="banner-title" style="font: normal 24px arial, helvetica, sans-serif; color: #fff; padding-bottom: 5px;">Heading 2</td>
</tr>
<tr>
<td align="left" valign="top" mc:edit="banner-text" style="font: normal 12px arial, helvetica, sans-serif; color: #fff; line-height: 18px; padding: 0px 0px 12px 4px;">Praesent viverra dui in orci pulvinar convallis. Nunc interdum, metus eget adipiscing rutrum, leo quam accumsan tellus, eget . It's easy and hassle free!</td>
</tr>
<tr>
<td align="left" valign="top"><img mc:edit="read-more" src="#" width="128" height="31" alt="" /></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<!--Two column 1 End--> </td>
<td width="320" align="left" valign="top"> <!--Two column 2 Start-->
<table border="0" cellspacing="0" cellpadding="0" style="width: 320px;">
<tbody>
<tr>
<td align="left" valign="top"><img mc:edit="two-coulmn-image2" src="mobiles.png" width="320" height="172" alt="" style="display: block;" /></td>
</tr>
<tr>
<td align="left" valign="top" bgcolor="#2f2f2f" style="padding: 15px 0px 18px 20px; background: #2f2f2f;">
<table border="0" cellspacing="0" cellpadding="0" style="width: 288px;">
<tbody>
<tr>
<td align="left" valign="top" mc:edit="banner-title" style="font: normal 24px arial, helvetica, sans-serif; color: #fff; padding-bottom: 5px;">Heading 3</td>
</tr>
<tr>
<td align="left" valign="top" mc:edit="banner-text" style="font: normal 12px arial, helvetica, sans-serif; color: #fff; line-height: 18px; padding: 0px 0px 12px 4px;">Nunc vel massa metus, vel varius mi. Sed sagittis consectetur nisi, sed imperdiet ipsum interdum non. Nunc consectetur odio et turpis eleifend semper. Pellentesque lorem purus</td>
</tr>
<tr>
<td align="left" valign="top"><img mc:edit="read-more-1" src="images/read-more.png" width="128" height="31" alt="" /></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<!--Two column 2 End--> </td>
</tr>
<!--Two column Part End-->
<tr>
<td> </td>
</tr>
</tbody>
</table></td>
<!--Body Part End--></tr>
<tr><!--Footer Part Start-->
<td align="left" valign="top">
<table border="0" cellspacing="0" cellpadding="0" style="width: 687px;">
<tbody>
<tr>
<td align="center" valign="top" bgcolor="#ffffff" style="background: #fff; padding: 28px 0px 27px 0px;" width="687">
<table border="0" align="center" cellpadding="0" cellspacing="0" style="width: 675px;">
<tbody>
<tr>
<td align="center" valign="top" mc:edit="un-sp-text" style="font: normal 12px arial, helvetica, sans-serif; color: #737373; line-height: 18px;" width="675">
<p align="center"><b>Copyright © 2012 Company - Registered & Dales 07765116</b></p></td>
</tr>
<tr>
<td align="center" valign="top" mc:edit="c-right-text" style="font: bold 12px arial, helvetica, sans-serif; color: #737373; line-height: 18px;" width="675">
<p align="center">Company Address<br />
T: 023227 000 201 E: admin#admin.com W: company</p></td>
</tr>
</tbody>
</table></td>
</tr>
<tr>
<td align="center" valign="top" style="padding: 20px 0px 35px 0px;" width="687">
<p align="center">If you wish to unsubscribe from this email, please click here</p></td>
</tr>
</tbody>
</table></td>
<!--Footer Part End--></tr>
</tbody>
</table>
<!--Main Part End--> <!--Table Start-->
</body>
</html>
You're opening a lot of <table> tags in your code, but none of them are closed. This means each table will get nested in it's parent-table if you will.
Especially with all those the alignment will be out of control.
I suggest closing up the table tags accordingly and removing those they make for some mean code.