I am generating "Word document" with a header on the first page as HTML code. <style>
tag contains:
#page Section {
size:8.5in 11.0in;
margin: 0.7in 0.9in 0.7in 0.9in;
mso-header-margin: 0.0in;
mso-footer-margin: 0.0in;
mso-title-page: yes;
mso-first-header: fh1;
mso-paper-source: 0;
}
div.Section {
page: Section;
}
and <body>:
<div class="Section" style="font-family: Verdana, sans-serif;">
<![if supportFields]>
<div style="mso-element:header" id="fh1">
<p class="MsoHeader">
header
</p>
</div>
<![endif]>
</div>
It shows the "header" text both in header and in the document's main body. The resources (http://techsynapse.blogspot.com/2007/03/generating-word-document-dynamically.html and http://www.pbdr.com/ostips/wordfoot.htm) I have found say that there is no way of avoiding this effect without using an additional header file which is not an option for me.
And there goes my question: do you know any work-around for that problem? How can I hide the occurence of the header in main document but leave it in its place at the top of the page? Thanks in advance for any piece of advice.
This worked for me:
<html
xmlns:o='urn:schemas-microsoft-com:office:office'
xmlns:w='urn:schemas-microsoft-com:office:word'
xmlns='http://www.w3.org/TR/REC-html40'>
<head><title></title>
<!--[if gte mso 9]><xml>
<w:WordDocument>
<w:View>Print</w:View>
<w:Zoom>90</w:Zoom>
</w:WordDocument>
</xml><![endif]-->
<style>
p.MsoFooter, li.MsoFooter, div.MsoFooter
{
margin:0in;
margin-bottom:.0001pt;
mso-pagination:widow-orphan;
tab-stops:center 3.0in right 6.0in;
font-size:12.0pt;
}
<style>
<!-- /* Style Definitions */
#page Section1
{
size:8.5in 11.0in;
margin:1.0in 1.0in 1.0in 1.0in;
mso-header-margin:.5in;
mso-footer-margin:.5in;
mso-title-page:yes;
mso-header: h1;
mso-footer: f1;
mso-first-header: fh1;
mso-first-footer: ff1;
mso-paper-source:0;
}
div.Section1
{
page:Section1;
}
table#hrdftrtbl
{
margin:0in 0in 0in 900in;
width:1px;
height:1px;
overflow:hidden;
}
-->
</style></head>
<body lang=EN-US style='tab-interval:.5in'>
<div class=Section1>
<p> CONTENT </p>
<br/>
<table id='hrdftrtbl' border='0' cellspacing='0' cellpadding='0'>
<tr><td>
<div style='mso-element:header' id=h1 >
<p class=MsoHeader ><p> HEADER-TITLE</p></p>
</div>
</td>
<td>
<div style='mso-element:footer' id=f1>
<p> FOOTER-TITLE</p>
<p class=MsoFooter>
<span style=mso-tab-count:2'></span>
Page <span style='mso-field-code: PAGE '><span style='mso-no-proof:yes'></span></span> of <span style='mso-field-code: NUMPAGES '></span>
</p>
</div>
<div style='mso-element:header' id=fh1>
<p class=MsoHeader><span lang=EN-US style='mso-ansi-language:EN-US'> FIRST-HEADER-TITLE<o:p></o:p></span></p>
</div>
<div style='mso-element:footer' id=ff1>
<p class=MsoFooter><span lang=EN-US style='mso-ansi-language:EN-US'> FIRST-FOOTER-TITLE<o:p></o:p></span></p>
</div>
</td></tr>
</table>
</body></html>
To update on above answer by vencedor and remove the extra empty character encoding added to your header/footer images/text you can do something like this:
<html
xmlns:o='urn:schemas-microsoft-com:office:office'
xmlns:w='urn:schemas-microsoft-com:office:word'
xmlns='http://www.w3.org/TR/REC-html40'>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title></title>
<!--[if gte mso 9]><xml>
<w:WordDocument>
<w:View>Print</w:View>
<w:Zoom>100</w:Zoom>
</w:WordDocument>
</xml><![endif]-->
<style>
<!-- /* Style Definitions */
p.MsoHeader, li.MsoHeader, div.MsoHeader{
margin:0in;
margin-top:.0001pt;
mso-pagination:widow-orphan;
tab-stops:center 3.0in right 6.0in;
}
p.MsoFooter, li.MsoFooter, div.MsoFooter{
margin:0in 0in 1in 0in;
margin-bottom:.0001pt;
mso-pagination:widow-orphan;
tab-stops:center 3.0in right 6.0in;
}
.footer {
font-size: 9pt;
}
#page Section1{
size:8.5in 11.0in;
margin:0.5in 0.5in 0.5in 0.5in;
mso-header-margin:0.5in;
mso-header:h1;
mso-footer:f1;
mso-footer-margin:0.5in;
mso-paper-source:0;
}
div.Section1{
page:Section1;
}
table#hrdftrtbl{
margin:0in 0in 0in 9in;
}
-->
</style>
<style type="text/css" media="screen,print">
body {
font-family: "Calibri", "Verdana","HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
font-size:12pt;
}
pageBreak {
clear:all;
page-break-before:always;
mso-special-character:line-break;
}
</style>
</head>
<body style='tab-interval:.5in'>
<div class="Section1">
Something page 1
<div class="pageBreak"></div>
Something page 2
<div class="pageBreak"></div>
<table id='hrdftrtbl' border='1' cellspacing='0' cellpadding='0'>
<tr>
<td>
<div style='mso-element:header' id="h1" >
<p class="MsoHeader">
<table border="0" width="100%">
<tr>
<td>
YOUR_HEADER IMAGE/TEXT
</td>
</tr>
</table>
</p>
</div>
</td>
<td>
<div style='mso-element:footer' id="f1">
<p class="MsoFooter">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="center" class="footer">
YOUR_FOOTER_TEXT
<g:message code="offer.letter.page.label"/> <span style='mso-field-code: PAGE '></span> of <span style='mso-field-code: NUMPAGES '></span>
</td>
</tr>
</table>
</p>
</div>
</td>
</tr>
</table>
</div>
</body>
</html>
This now includes full css components for header and footer segments.
The trick that actually removes the extra encoding is declaring yet another table within the MsoFooter and MsoHeader sections.
You can hide extra space following this answer
Limiting table's height:
<table id='hrdftrtbl' border='1' cellspacing='0' cellpadding='0' style='margin-left:50in;'>
<tr style='height:1pt;mso-height-rule:exactly'>
<td>
<div style='mso-element:header' id="h1" dir="ltr" >
<p class="MsoHeader">
<table border="0" width="100%" style="margin-bottom: 15pt;">
<tr>
<td width="50%">
Some text goes here
</td>
<td width="50%" style="text-align: left">
<img height="auto" src="">
</td>
</tr>
</table>
</p>
</div>
</td>
<td>
<div style='mso-element:footer' id="f1">
<p class="MsoFooter">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="center" class="footer" dir="ltr">
<g:message code="offer.letter.page.label"/> <span style='mso-field-code: PAGE '></span> / <span style='mso-field-code: NUMPAGES '></span>
</td>
</tr>
</table>
</p>
</div>
</td>
</tr>
</table>
Related
I am trying to get these two images and two pieces of text (facebook and instagram) to be next to each other on one line. Please look at the picture below. This is not my code, so I do not know where to begin.
It is going to be used in an email, so this is why all of the CSS styles have to be inline.
This is how it looks now
This is how I want it to look
<tr style='background-color: #1F3466;'>
<td style='background-color: #1F3466;'>
<footer style='background-color: #18A5A7;'>
<h2 style='margin-left: 25px;font-family: sans-serif; color: aliceblue;'>Fique bem informado! </h2>
<h3 style='margin-left: 25px;font-family: sans-serif; color: aliceblue;'>Acompanhe também o Grupo São Cristóvão Saúde nas redes sociais: </h3>
<Footer style='display: flex;flex-direction: row;align-content: center;align-items: center;font-family: sans-serif;'>
<img src='fb_logo.png' style="width:25px; height:25px; margin-left:25px" alt='facebook' /><a style='text-decoration: none;color: aliceblue;' href='https://m.facebook.com/gruposaocristovaosaude/'> Facebook.com/gruposaocristovaosaude</a>
</Footer>
<footer style='display: flex;flex-direction: row;align-content: center;align-items: center;font-family: sans-serif;'>
<img src='inst_logo.png' style="width:25px; height:25px; margin-left:25px" alt='instagram' /><a style='text-decoration: none;color: aliceblue;' href='https://instagram.com/saocristovaosaude/'> #saocristovaosaude</a></footer>
</footer>
</td>
</tr>
<tr>
Rather than having the nested tag "Footer" with display: flex twice, just move the contents of your second tag into your first one.
Something like this.
<tr style='background-color: #1F3466;'>
<td style='background-color: #1F3466;'>
<footer style='background-color: #18A5A7;'>
<h2 style='margin-left: 25px;font-family: sans-serif; color: aliceblue;'>Fique bem informado! </h2>
<h3 style='margin-left: 25px;font-family: sans-serif; color: aliceblue;'>Acompanhe também o Grupo São
Cristóvão Saúde nas redes sociais: </h3>
<Footer
style='display: flex;flex-direction: row;align-content: center;align-items: center;font-family: sans-serif;'>
<img src='fb_logo.png' style="width:25px; height:25px; margin-left:25px" alt='facebook'/><a style='text-decoration: none;color: aliceblue;'
href='https://m.facebook.com/gruposaocristovaosaude/'> Facebook.com/gruposaocristovaosaude</a>
<img src='inst_logo.png' style="width:25px; height:25px; margin-left:25px" alt='instagram' /><a style='text-decoration: none;color: aliceblue;'
href='https://instagram.com/saocristovaosaude/'> #saocristovaosaude</a>
</Footer>
</footer>
</td>
</tr>
<tr>
Also as a list of changes to make this a lot easier for you:
Don't nest the footer tag, your document should only have one of these.
Get rid of your inline styles and add them to a css file.
You could put both elements in a separate div and nest them in the parent div d-flex flex-row. Ref: https://getbootstrap.com/docs/4.0/utilities/flex/
This is what you are after. Hybrid/spongy method that does not rely on media query for stacking. Your inner two columns ( [Content goes here] ) will have contents of each column. Right now the code when run doesn't show words as the parent td has font-size:0;. Be sure to add inline styles for each column.
<table width="600" border="0" cellspacing="0" cellpadding="0">
<tr>
<td style="text-align:center;font-size:0;">
<!--[if (gtemso 9)|(IE)]>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="50%" valign="top">
<![endif]-->
<div class="column" style="width:100%;max-width:300px;display:inline-block;vertical-align:middle;">
[Content goes here]
</div>
<!--[if (gtemso 9)|(IE)]>
</td>
<td width="50%" valign="top">
<![endif]-->
<div class="column" style="width:100%;max-width:300px;display:inline-block;vertical-align:middle;">
[Content goes here]
</div>
<!--[if (gtemso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
</table>
My question is : I have word document i need to convert as html/css. How can i make different margin in my first page.
Thanks for your helps
This is my code
<cfcontent type="application/msword">
<cfheader name="Content-Disposition" value="attachment; filename=myDoc.doc">
<html>
<title></title>
<style>
}
#page Section1{
size:8.5in 11.0in;
margin:0in 0in 0in 0in;
mso-paper-source:0;
}
div.Section1{
page:Section1;
}
#page Section2{
size:8.5in 11.0in;
margin:0.5in 0.5in 0.5in 0.5in;
mso-paper-source:0;
}
div.Section2{
page:Section2;
}
div.pageBreak {
page-break-before:always;
</style>
</head>
<body style='tab-interval:.5in'>
<div class="Section1" style="margin: 0in 0in 0in 0in;">
Something page 1
<div class="pageBreak"></div>
</div>
<div class="Section2">
Something page 2
<div class="pageBreak"></div>
</div>
</body>
</html>
I'v created a prestashop module in which it obtains airway bill numbers from an external API, This number I then add on a webpage and let users to print.
This bar code only appears on HTML page but does not visible on print preview dialog box
I use Smarty for html part since its by default uses by Prestashop.
Hear is my code,
<p style="font-family:IDAutomationHC39M;text-align: left">*{$order.other_data.awb}*</p>
any idea why this is happening? is there any solution for this?
UPDATE
{literal}
<style>
table { border-collapse: collapse;font-family:arial;}
td {padding: 8px;}
body { margin: 0;padding: 0;background-color: #FAFAFA;font: 12pt "Tahoma"; }
* {box-sizing: border-box;-moz-box-sizing: border-box; }
.page { width: 21cm;min-height: 29.7cm;padding: 1cm;margin: 0.5cm auto;border: 1px #D3D3D3 solid; border-radius: 5px;
background: white; box-shadow: 0 0 5px rgba(0, 0, 0, 0.1); }
.subpage { padding: 0cm;border: 0px black solid;height: 256mm; }
#page { size: A4; margin: 0; }
#media print {.page {margin: 0;border: initial;border-radius: initial;width: initial;min-height: initial;box-shadow: initial;
background: initial;page-break-after: always;}}
</style>
{/literal}
{foreach from=$orders_array item=order}
<div class="page">
<div class="subpage">
<table border="3" style="border-style: solid;width:100%">
<tr>
<td>
<table border="0" style="border-style: solid;width:100%">
<tr>
<td><img src="{$order.other_data.logo}" alt="logo" height="100" width="300"></td>
<td>
<h3><u>{$order.other_data.service}</u></h3><br>
{$order.other_data.ppaddress}
<br>www.postaplus.com</td>
</tr>
</table>
<table border="1" style="border-style: solid;width:100%">
<tr>
<td style="width:40%"><b>From</b></td>
<td>
<b>{$order.other_data.shipper_name}</b>
<br>
{$order.other_data.shipper_address},<br>
{$order.other_data.shipper_country_code},<br>
Phone: {$order.other_data.shipper_phone},
</td>
</tr>
<tr>
<td><b>To</b></td>
<td>
<b>
</b><br>
{$order.params.SHIPINFO.Consignee.ToName},<br>
{$order.params.SHIPINFO.Consignee.ToAddress},
<br>
<b>Phone:</b> {$order.params.SHIPINFO.Consignee.ToMobile} / {$order.params.SHIPINFO.Consignee.ToTelPhone} <br>
<b>Civil Id:</b><br>
</td>
</tr>
<tr>
<td><b>Pay Type: {$order.params.original_order_array.payment_method}</b></td>
<td>Amount: {$order.params.original_order_array.total} - Currency - {$order.params.original_order_array.codcurrency} </td>
</tr>
<tr>
<td><b>Reference 1</b></td><td>{$order.params.original_order_array.reference} </td></tr>
<tr>
<td><b>Reference 2</b></td><td></td></tr>
<tr>
<td><b>Service</b></td><td>{$order.other_data.service}</td>
</tr>
<tr>
<td colspan="2">
<table width="100%">
<tr>
<td><b>Pieces:</b></td> <td>1</td> <td><b>Weight:</b></td> <td>{$order.other_data.total_weight} Kg</td>
</tr>
</table>
</td>
</tr>
<tr>
<td><b>Remarks</b></td>
<td></td>
</tr>
<tr>
<td>
<b>Note 2</b></td><td>{$order.other_data.original_order_data.notes2}</td></tr>
<tr>
<td><b>Shipper Order Number:</b></td>
<td>
<p style="font-family:IDAutomationHC39M;text-align: left">*{$order.other_data.awb}*</p>
</td>
</tr>
<tr>
<td><b>Shipment Date:</b></td><td>{$order.other_data.awb_date}</td></tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
</div>
{/foreach}
<script>
window.print();
</script>
screen shots
html view
print preview
Thanks in advance.
Roshan
Roshan save the below code in html format and check whether it shows barcode in your print preview . if it works than you should try changing your font or check your code again..it will be very helpful if you upload your code here as well.also check display background graphics checkbox in print preview menu
<!DOCTYPE html>
<html>
<head>
<link href='https://fontlibrary.org/face/idautomationhc39m-code-39-barcode'
rel='stylesheet'>
<style>
p.serif {
font-family: 'IDAHC39M Code 39 Barcode', Times, serif;
}
p.sansserif {
font-family: Arial, Helvetica, sans-serif;
}
</style>
</head>
<body>
<p class="serif">This is a paragraph, shown in the Times New Roman font.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
<p>123456790</p>
<p>ABCDEFGHIJKLMNOPQRSTUVWXYZ</p>
<p>abcdefghijklmnopqrstuvwxyz</p>
</body>
</html>
Look for the link to the font itself in the header. It should look like this:
<link rel="stylesheet" media="screen" href="https://fontlibrary.org/face/idautomationhc39m-code-39-barcode" type="text/css"/>
Change the media="screen" to media="screen, print".
I would also recommend you try using 'IDAHC39M Code 39 Barcode' instead of IDAutomationHC39M for font family. (Make sure the quotes are there.)
Im been trying to make my page work on different browsers and its seems it only works on IE and in other browser all my images are misalign. im not really good at HTML and its been awhile since the last time I use html, please check my codes below. And i need my page to be 640 x 480 px. Thanks
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>AD</title>
</head>
<body>
<table width="640" border="0" align="center" cellpadding="0" cellspacing="0">
<div style="{z-index:3;}">
<img src="images/Header.gif" width="640" height="110"
/div>
<div style="{position: absolute; top: 145; left: 310; z-index:3;} font-family:Arial, Helvetica, sans-serif; font-size:22px; color:#000000;">at</div>
<div style="{position: absolute; top: 115; right: 185; z-index:3;}">
<img src="images/Brush.gif" width="100" height="215"
</div>
<div style="{position: absolute; top: 20; right: 145; z-index:3;}">
<img src="images/LOGO.gif" width="330" height="85"
</div>
<tr>
<td align="center" valign="top" bgcolor="#f0f8ff" style="background-color:#f0f8ff; font-family:Arial, Helvetica, sans-serif; font-size:13px; color:#000000; padding:8px;"><table width="80%" border="0" cellspacing="0" cellpadding="0" style="margin-top:10px;">
<center> text 1 <br><b>Competitive text2
<br>text3</b>
<br></center></div></td>
<br>
<center> <div style="font-size=20px;"> text4
<br>text5K.<br>
</center></div>
<br>
</tr>
</table></td>
</tr>
<tr>
<tr>
<tr>
<td align="left" valign="top" bgcolor="#00000" style="background-color:#00000;"><table width="100%" border="0" cellspacing="0" cellpadding="7">
<tr>
<td align="left" valign="top" style="color:#ffffff; font-family:Arial, Helvetica, sans-serif; font-size:16px;"> <center><b>Apply online today at <font color=#6699ff> www.startek.com/careers</font></b>
</td>
<tr>
<td align="center" style="color:#ffffff; font-family:Arial, Helvetica, sans-serif; font-size:13px;"> <center>address
<br><b>tel.no.</b>
</td>
</tr>
</table></td>
</tr>
</body>
</html>
Make use of CSS layout elements such as position. Your code just works on some browsers because some formatting is not cross browser compatible.
I advise you to use CSS for formatting because some of the HTML formatting you use are already deprecated. Here is a nice CSS tutorial
The same problem was also with me...Since HTML output may vary depending upon the browser, you should use adobe dreamweaver.It has a functionality to output HTML same in all browser by default...by the way..how it does i don't know.
If you can't afford dreamweaver right now..make sure you include position attribute in
div tag properly.
try like this:
<div position=absolute>main panel</div>
I am experiencing a lot of browser inconstancies with my HTML newsletter. Are there any glaring issues you are able to diagnose just by looking through the code? For example, the newsletter has a really long height to - far beyond the content's height. This is just one specific issue.
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<!-- Facebook sharing information tags -->
<meta property="og:title" content="*|MC:SUBJECT|*" />
<title>*|MC:SUBJECT|*</title>
<style type="text/css">
/* Client-specific Styles */
#outlook a{padding:0;} /* Force Outlook to provide a "view in browser" button. */
body{width:100% !important;} .ReadMsgBody{width:100%;} .ExternalClass{width:100%;} /* Force Hotmail to display emails at full width */
body{-webkit-text-size-adjust:none;} /* Prevent Webkit platforms from changing default text sizes. */
/* Reset Styles */
body{margin:0; padding:0;}
img{border:0; height:auto; line-height:100%; outline:none; text-decoration:none;}
table td{border-collapse:collapse;}
#backgroundTable{height:100% !important; margin:0; padding:0; width:100% !important;}
body, #backgroundTable{
background-color:#FAFAFA;
font-family: Arial;
}
#templateContainer{
border: 1px solid #DDDDDD;
}
p {
color: #5a5a5a;
}
a {
color: #8b8b8b;
}
h1, .h1{
color:#202020;
display:block;
font-family:Arial;
font-size:16px;
font-weight:bold;
line-height:100%;
margin-top:0;
margin-right:0;
margin-bottom:10px;
margin-left:0;
text-align:left;
}
h2, .h2{
color:#202020;
display:block;
font-family:Arial;
font-size:22px;
font-weight:bold;
line-height:100%;
margin-top:0;
margin-right:0;
margin-bottom:10px;
margin-left:0;
text-align:left;
}
h3, .h3{
color:#202020;
display:block;
font-family:Arial;
font-size:16px;
font-weight:normal;
line-height:100%;
margin-top:0;
margin-right:0;
margin-bottom:10px;
margin-left:0;
text-align:left;
}
h4, .h4{
color:#202020;
display:block;
font-family:Arial;
font-size:22px;
font-weight:bold;
line-height:100%;
margin-top:0;
margin-right:0;
margin-bottom:10px;
margin-left:0;
text-align:left;
}
#templatePreheader{
background-color:#FAFAFA;
}
.preheaderContent div{
color:#505050;
font-family:Arial;
font-size:10px;
line-height:100%;
text-align:left;
}
.preheaderContent div a:link, .preheaderContent div a:visited, /* Yahoo! Mail Override */ .preheaderContent div a .yshortcuts /* Yahoo! Mail Override */{
color:#336699;
font-weight:normal;
text-decoration:underline;
}
#templateHeader{
background-color:#FFFFFF;
border-bottom:0;
}
.headerContent{
color:#202020;
font-family:Arial;
font-size:34px;
font-weight:bold;
line-height:100%;
padding:0;
text-align:center;
vertical-align:middle;
}
.headerContent a:link, .headerContent a:visited, /* Yahoo! Mail Override */ .headerContent a .yshortcuts /* Yahoo! Mail Override */{
color:#336699;
font-weight:normal;
text-decoration:underline;
}
#headerImage{
height:auto;
max-width:600px;
}
#templateContainer, .bodyContent{
background-color:#FFFFFF;
}
.bodyContent div{
color:#505050;
font-family:Arial;
font-size:14px;
line-height:150%;
text-align:left;
}
.bodyContent div a:link, .bodyContent div a:visited, /* Yahoo! Mail Override */ .bodyContent div a .yshortcuts /* Yahoo! Mail Override */{
color:#336699;
font-weight:normal;
text-decoration:underline;
}
.bodyContent img{
display:inline;
height:auto;
}
.leftColumnContent{
background-color:#FFFFFF;
}
.leftColumnContent div{
color:#505050;
font-family:Arial;
font-size:14px;
line-height:150%;
text-align:left;
}
.leftColumnContent div a:link, .leftColumnContent div a:visited, /* Yahoo! Mail Override */ .leftColumnContent div a .yshortcuts /* Yahoo! Mail Override */{
color:#336699;
font-weight:normal;
text-decoration:underline;
}
.leftColumnContent img{
display:inline;
height:auto;
}
.rightColumnContent{
background-color:#FFFFFF;
}
.rightColumnContent div{
color:#505050;
font-family:Arial;
font-size:14px;
line-height:150%;
text-align:left;
}
.rightColumnContent div a:link, .rightColumnContent div a:visited, /* Yahoo! Mail Override */ .rightColumnContent div a .yshortcuts /* Yahoo! Mail Override */{
color:#336699;
font-weight:normal;
text-decoration:underline;
}
.rightColumnContent img{
display:inline;
height:auto;
}
#templateFooter{
background-color:#FFFFFF;
border-top:0;
}
.footerContent div{
color:#707070;
font-family:Arial;
font-size:12px;
line-height:125%;
text-align:left;
}
.footerContent div a:link, .footerContent div a:visited, /* Yahoo! Mail Override */ .footerContent div a .yshortcuts /* Yahoo! Mail Override */{
color:#336699;
font-weight:normal;
text-decoration:underline;
}
.footerContent img{
display:inline;
}
#social{
background-color:#FAFAFA;
border:0;
}
#social div{
text-align:center;
}
#utility{
background-color:#FFFFFF;
border:0;
}
#utility div{
text-align:center;
}
#monkeyRewards img{
max-width:190px;
}
ol {
padding-left: 20px;
}
li {
margin-bottom: 10px;
}
.letter-from-editor {
float: left;
display: inline;
color: #24ae04;
font-size: 22px;
margin-left: 40px;
}
.publication-date {
float: right;
margin-top: 0;
text-transform: uppercase;
margin-right: 20px;
font-size: 12px;
}
td.bodyContent {
padding: 25px;
}
.support {
text-align: center;
color: #24ae04;
font-size: 22px;
margin: 15px 0;
}
.continue-reading {
text-decoration: none;
}
.footer-links {
font-size: 12px;
text-decoration:none;
}
.the-footer {
width: 600px;
text-align: right;
margin:20px 0 50px 0;
}
.all-footer-links {
margin-top: 65px;
border-top: 1px solid #e8e8e8;
border-bottom: 1px solid #e8e8e8;
width: 600px;
padding: 15px 0 15px 0;
text-align: right;
font-size: 12px;
color:#e8e8e8;"
}
</style>
</head>
<body leftmargin="0" marginwidth="0" topmargin="0" marginheight="0" offset="0">
<center>
<table border="0" cellpadding="0" cellspacing="0" height="100%" width="100%" id="backgroundTable">
<tr>
<td align="center" valign="top">
<!-- // Begin Template Preheader \\ -->
<table border="0" cellpadding="0" cellspacing="0" width="100%" id="templatePreheader">
<tr>
<td valign="top" class="preheaderContent">
<!-- // Begin Module: Standard Preheader \ -->
<table border="0" cellpadding="10" cellspacing="0" width="100%">
<tr>
<!-- *|IFNOT:ARCHIVE_PAGE|* -->
<td valign="top" style="background-color: #000000;color: #FFFFFF;">
<div mc:edit="header_links" style="text-align:center;">
Having trouble viewing this email? <a target="_blank" href="*|ARCHIVE|*" target="_blank">View it in your browser</a>
</div>
</td>
<!-- *|END:IF|* -->
</tr>
</table>
<!-- // End Module: Standard Preheader \ -->
</td>
</tr>
</table>
<!-- // End Template Preheader \\ -->
<table border="0" cellpadding="0" cellspacing="0" height="100%" width="100%" id="backgroundTable">
<tr>
<td align="center" valign="top">
<!-- // Begin Template Preheader \\ -->
<table border="0" cellpadding="0" cellspacing="0" width="100%" id="templatePreheader" style="border-bottom:1px solid #e8e8e8;">
<tr>
<td valign="top" class="preheaderContent">
<!-- // Begin Module: Standard Preheader \ -->
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<!-- <td valign="top">
<div mc:edit="std_preheader_content">
Use this area to offer a short teaser of your email's content. Text here will show in the preview area of some email clients.
</div>
</td> -->
<!-- *|IFNOT:ARCHIVE_PAGE|* -->
<td valign="top" style="background-color: #FFFFFF;">
<div mc:edit="message" style="text-align:left; margin:30px auto; width:600px;">
<h1 style="color:#3db0df;">example's Weekly Newsletter</h1>
<p mc:edit="top-header-message" style="width:440px;display:inline;font-size:12px;line-height:140%;">Each week we'll keep you informed about features, products, and service<br>updates. Be sure to go to our <a target="_blank" href="http://www.example.com">website</a> and follow us on <a target="_blank" href="http://www.twitter.com/example">twitter</a> for more<br>frequent news in between.</p>
<img mc:edit="logo-main" style="float:right;margin-top:-55px;" src="logo.png" />
</div>
</td>
<!-- *|END:IF|* -->
</tr>
</table>
<!-- // End Module: Standard Preheader \ -->
</td>
</tr>
</table>
<!-- // End Template Preheader \\ -->
<table border="0" cellpadding="0" cellspacing="0" width="600" style="margin-top:50px;">
<tr>
<td align="center" valign="top">
<h1 mc:edit="from-the-editor" class="letter-from-editor">A letter from the editor</h1>
<p mc:edit="publication-date" class="publication-date">March 28, 2012</p>
</td>
</tr>
</table>
<table border="0" cellpadding="0" cellspacing="0" width="600" id="templateContainer">
<tr>
<td align="center" valign="top">
<!-- // Begin Template Header \\ -->
<table border="0" cellpadding="0" cellspacing="0" width="600" id="templateHeader">
<tr>
<td class="headerContent">
<!-- // Begin Module: Standard Header Image \\ -->
<img src="header.png" style="max-width:600px;" id="headerImage campaign-icon" mc:label="header_image" mc:edit="header_image" mc:allowdesigner mc:allowtext />
<!-- // End Module: Standard Header Image \\ -->
</td>
</tr>
</table>
<!-- // End Template Header \\ -->
</td>
</tr>
<tr>
<td align="center" valign="top">
<!-- // Begin Template Body \\ -->
<table border="0" cellpadding="0" cellspacing="0" width="600" id="templateBody">
<tr>
<td colspan="3" valign="top" class="bodyContent">
<!-- // Begin Module: Standard Content \\ -->
<table border="0" cellpadding="20" cellspacing="0" width="100%" height="100%">
<tr>
<td valign="top">
<div mc:edit="std_content00">
<h2 class="h2" style="color: #3db0df;">5 Ways To Be Happy Right Now</h2>
<p>Down in the dumps. The Blues. The doldrums. No matter what you call it - sometimes, even if you are the happiest person around, you start to feel like crud.</p>
<p>This week there seems to be a crazy amount of negative info swirling around - whether it's deadly tornados or horrible rhetoric as the Republican primaries heat up (especially negative for women on this one, but I'll try to not get political!) And, I guess some of this finally got to me...so I tried everything I could to get myself out of my funk.</p>
<h3 class="h3" style="color: #3db0df;"><em>Here were the 5 things that worked the best:</em></h3>
<ol>
<li>I did a <strong>20 minute workout</strong> (mostly going for brisk walks) right after I woke up in the morning - before I started my day. No matter what happened that day, i knew i had done something good for myself. That made me happy.</li>
<li>I made sure to <strong>drink a lot of water</strong>. Dehydration is very fatiguing on the body - this fatigue can quickly turn to crankiness. So drink up!</li>
<li>I <strong>made a playlist</strong> of 'pump up' tunes. Played them on blast and repeat. I made sure to choose songs that had great memories attached and got my heart rate going. It's amazing how much dancing around your house (or apartment) totally uninhibited, can put a smile on your face!</li>
<li>Made a point to <strong>hang out with a friend that really makes me feel good</strong> - is a lot of energy and has a great sense of humor. Laughter is always the best medicine for the blues.</li>
<li><strong>Read example</strong>, of course! There is so much great stuff here, that i can always find something to cheer me up. ;) (some of those great finds are below!)</li>
<p>Hope you are having an excellent week!</p>
<p>Be well,</p>
<p>Erin</p>
</ol>
</div>
</td>
</tr>
</table>
<!-- // End Module: Standard Content \\ -->
</td>
</tr>
</table>
<!-- // End Template Body \\ -->
</td>
</tr>
</table>
<br />
</td>
</tr>
</table>
<br>
<table>
<tr>
<td valign="top" width="275" class="leftColumnContent">
<!-- // Begin Module: Top Image with Content \\ -->
<table border="0" cellpadding="0" cellspacing="0" width="100%" height="400">
<tr mc:repeatable>
<td valign="top" style="border:1px solid #e8e8e8;">
<img src="bulb.png" mc:label="image" mc:edit="post1" />
<div mc:edit="tiwc300_content00" style="padding:20px;">
<h4 class="h4" style="color:#3db0df;">3 Tips for Finding Positivity in an Endlessly Negative Workplace</h4>
<p>Today’s society is riddled with negativity. Maybe it’s like this for every generation...</p>
<a target="_blank" href="" style="text-decoration:none;color:#3db0df;">Continue Reading >></a>
</div>
</td>
</8r>
</table>
<!-- // End Module: Top Image with Content \\ -->
</td>
<td width="44"></td>
<td valign="top" width="275" class="rightColumnContent">
<!-- // Begin Module: Top Image with Content \\ -->
<table border="0" cellpadding="0" cellspacing="0" width="100%" height="400">
<tr mc:repeatable>
<td valign="top" style="border: 1px solid #e8e8e8;">
<img src="dog.png" mc:label="image" mc:edit="post2"/>
<div mc:edit="post2" style="padding:20px;">
<h4 class="h4" style="color:#3db0df;">What to Do When You Don’t Feel Like Doing Anything</h4>
<p>Where in your life is stress a noticeable concern? Maybe you get stressed out from work, family responsibilities...</p>
<a target="_blank" href="" style="text-decoration:none;color:#3db0df;">Continue Reading >></a>
</div>
</td>
</tr>
</table>
<!-- // End Module: Top Image with Content \\ -->
</td>
</tr>
</table>
<table>
<h1 mc:edit="sponsor" class="support">example is pleased to support</h1>
</table>
<table border="0" cellpadding="0" cellspacing="0" height="100%" width="600" style="background-color:#FFFFFF;">
<div style="width:600px;background-color:#FFFFFF;padding:10px 0;margin-bottom:70px;">
<img mc:edit="advertisement" src="ad.png" />
</div>
</table>
<table border="0" cellpadding="0" cellspacing="0" height="100%" width="600" style="background-color: #FFFFFF; border-top:1px solid #e8e8e8;">
<div class="all-footer-links" style="margin-right:20px;">
<div style="float:left;margin:-127px 0 0 0;">
<img mc:edit="footer-logo" src="logo-footer.png"/>
</div>
<div style="margin-right:10px;">
<a target="_blank" class="footer-links" href="http://www.example.com/blog/motivation/">Motivation</a> |
<a target="_blank" class="footer-links" href="http://www.example.com/blog/productivity/">Productivity</a> |
<a target="_blank" class="footer-links" href="http://www.example.com/blog/health/">Health</a> |
<a target="_blank" class="footer-links" href="http://www.example.com/blog/self-improvement/">Self Improvement</a> |
<a target="_blank" class="footer-links" href="http://www.example.com/blog/contact/">Contact Us</a>
</div>
</div>
<div mc:edit="footer-links" class="the-footer">
<p style="float:left;font-size:10px;margin-left:10px;">Copyright © 2012 example</p>
<div style="margin-right:10px;">
<a target="_blank" href="http://www.facebook.com/example"><img mc:edit="facebook" src="facebook.png" /></a>
<a target="_blank" href="http://www.twitter.com/example"><img mc:edit="twitter" src="twitter.png" /></a>
<a target="_blank" href="https://plus.google.com/102257056998496075187"><img mc:edit="googleplus" src="googleplus.png" /></a>
<a target="_blank" href="http://feeds.feedburner.com/example/LYVv/"><img mc:edit="rss" src="rss.png" /></a>
</div>
</div>
</table>
</center>
</body>
CSS classes are ignored by email clients. If you are using standalone clients (like Outlook Express) to view your emails, divs will also not be working (float:left will be ignored).
I suggest you to change your HTML page like -
Drop everything outside the <body>...</body>
Use <table> instead of <div>
Dont use <style> tags to define style-classes, or .css file to load styles. Instead use inline css like style="...." with the <td> / <table> containers.
Hope this helps you in email template designing.
This way you can make your email cross-browser compatible for all websites (like gmail.com) and stand-alone clients (like outlook express).
1 - Change Height to auto
#backgroundTable{height:auto; margin:0; padding:0; width:100% !important;}
2 - Add text-aligh:center to TD
<td valign="top" style="text-align:center;background-color: #FFFFFF;">
<div mc:edit="message" style="text-align:left; margin:30px auto; width:600px;">
<h1 style="color:#3db0df;">example's Weekly Newsletter</h1>
<p mc:edit="top-header-message" style="width:440px;display:inline;font-size:12px;line-height:140%;">Each week we'll keep you informed about features, products, and service<br>updates. Be sure to go to our <a target="_blank" href="http://www.example.com">website</a> and follow us on <a target="_blank" href="http://www.twitter.com/example">twitter</a> for more<br>frequent news in between.</p>
<img mc:edit="logo-main" style="float:right;margin-top:-55px;" src="logo.png" />
</div>
</td>
3 - Change Height to auto
<table border="0" cellpadding="0" cellspacing="0" height="auto" width="600" style="background-color:#FFFFFF;">
<div style="width:600px;background-color:#FFFFFF;padding:10px 0;margin-bottom:70px;">
<img mc:edit="advertisement" src="ad.png" />
</div>
</table>