I am creating a newsletter for email, and i add background image for newsletter but the background image is not showing of table in email. I need to give the online path of an image. Is there is any mistake in code?
Please help me.
Here is my code:
<style type="text/css">
.position{
font-family:century gothic !important;
font-size:20px;
color:white;
font-weight:bold;
text-decoration:underline;
line-height:1.2;
}
.location,.condition{
font-family:century gothic !important;
font-size:17px;
color:white;
}
.apply_info{
font-family:century gothic !important;
font-size:20px;
color:black !important;
}
</style>
</head>
<body>
<div class="container">
<table border="0" width="100%" background="http://i67.tinypic.com/i69xzq.jpg" class="tbl_wrapper" style="text-align:center;color:black;background-repeat:no-repeat;background-size:100%">
<tr>
<td>
<table width="100%">
<tr height="162px"></tr>
<tr>
<td colspan="2">
<table width="100%">
<tr><td style="font-family:Monoton; font-size:200px;color:#0099ff;text-shadow:3px 3px white;text-align:right">NOW</td></tr>
<tr><td style="font-family:Monoton; font-size:200px;color:#0099ff;text-shadow:3px 3px white;text-align:right">HIRING</td></tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table width="100%">
<tr>
<td style="text-align:right">
<table width="100%" style="font-size:40px;color:red;font-weight:bold;font-family:century gothic">
<tr>
<td>JOIN THE TEAM</td>
</tr>
</table>
</td>
<td width="200px" height="20px" bgcolor="red"></td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table width="100%">
<tr>
<td width="200px" height="20px" bgcolor="red"></td>
<td style="text-align:left">
<table width="100%" style="font-size:40px;color:red;font-weight:bold;font-family:century gothic">
<tr>
<td>OPEN POSITIONS</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td colspan="4">
<table width="100%">
<tr>
<td>
<table width="100%">
<tr>
<td class="position" colspan="3">IT Support</td>
</tr>
<tr>
<td class="location" colspan="3">Delhi</td>
</tr>
<tr>
<td class="condition" colspan="3">(Freshers can also apply)</td>
</tr>
<tr>
<td class="position" colspan="3">OPS Executive</td>
</tr>
<tr>
<td class="location" colspan="3">Delhi & Jaipur</td>
</tr>
<tr >
<td class="condition" colspan="3">(Freshers can also apply)</td>
</tr>
<tr>
<td class="position" colspan="3">Data Base Expert</td>
</tr>
<tr>
<td class="location" colspan="3">Delhi</td>
</tr>
<tr>
<td class="condition" colspan="3">(Experienced from premier/reputed institute)</td>
</tr>
<tr>
<td class="condition" colspan="3">Experience 3-5 Years</td>
</tr>
<tr>
<td class="position" colspan="3">Full Stack Developer</td>
</tr>
<tr>
<td class="location" colspan="3">Delhi</td>
</tr>
<tr>
<td class="condition" colspan="3">(Experienced from premier/reputed institute)</td>
</tr>
<tr>
<td class="condition" colspan="3">Experience 5-7 Years</td>
</tr>
<tr>
<td class="position" colspan="3">Sales Executives/Manager</td>
</tr>
<tr>
<td class="location" colspan="3">Delhi</td>
</tr>
<tr>
<td class="condition" colspan="3">Experience 3-5 Years</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr height="160px"></tr>
<tr>
<td>
<table border="0" width="100%">
<tr>
<td>
<table width="100%">
<tr>
<td width="400px" height="20px" bgcolor="red"></td>
<td style="text-align:center">
<table width="100%" style="font-size:30px;color:red;font-family:century gothic">
<tr>
<td>APPLY NOW</td>
</tr>
</table>
</td>
<td width="400px" height="20px" bgcolor="red"></td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table width="100%">
<tr><td class="apply_info">rashmi.bhattacharjee#axestrack.com</td></tr>
<tr><td class="apply_info">44E/9 First Floor, Kishangarh, Vasant Kunj, New Delhi-110070</td></tr>
<tr><td class="apply_info">Phone-8373902513</td></tr>
<tr><td><img src="http://i67.tinypic.com/rmk8ev.jpg" class="img-responsive center-block" style="height:80px" /></td></tr>
</table>
</td>
</tr>
</table>
</div>
Your image link is wrong, "http://i67.tinypic.com/rmk8ev.jpg" your link redirects to the tinypic.
Instead you should grab the image source link, which in your case would be "http://oi67.tinypic.com/rmk8ev.jpg"
This isn't a good practice, you should host your own images on your servers since tinpic can remove it.
I can't actually see the background-image in your CSS/HTML, which makes it hard to diagnose your specific issue.
But nonetheless, you will experience issues with background images when rendering in various email clients. Here's a comprehensive article on the topic, written by Litmus: https://litmus.com/community/learning/25-understanding-background-images-in-email
As mentioned in the article, the 'Bulletproof background images' tool at https://backgrounds.cm/ is really useful and includes VML code which will render background images in problem versions of Outlook.
Few things to try that piggyback on a few others answers here.
Update the image reference path to be http://i67.tinypic.com/i69xzq.jpg
Move the inline CSS for the background image down a few levels to a <td>.
Use background="http://i67.tinypic.com/i69xzq.jpg" (like you are), or try `style="background-image: http://i67.tinypic.com/i69xzq.jpg;". Avoid CSS shorthand.
Use Backgrounds.cm to generate VML code for Outlook.
<body>
<div class="container">
<table border="0" width="100%" class="tbl_wrapper">
<tr>
<td background="http://i67.tinypic.com/i69xzq.jpg" bgcolor="#ffffff" valign="top" style="text-align:center;color:black;background-repeat:no-repeat;background-size:100%"">
<!--[if gte mso 9]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="mso-width-percent:1000;">
<v:fill type="tile" src="http://i67.tinypic.com/i69xzq.jpg" color="#ffffff" />
<v:textbox style="mso-fit-shape-to-text:true" inset="0,0,0,0">
<![endif]-->
<div>
<table width="100%">
<tr height="162px"></tr>
<tr>
<!-- Email Content -->
</tr>
</table>
</div>
<!--[if gte mso 9]>
</v:textbox>
</v:rect>
<![endif]-->
</td>
</tr>
</table>
</div>
</body>
This should give you pretty good coverage across email clients!
Related
I am creating a table inside another table. I have divided the columns to be the exact same ratio as the outer table. However, the columns are not aligned with outer table columns. Can anyone tell me what I am missing?
<html>
<div style="overflow:scroll;height:140px;width:100%;overflow:auto" style="background-color:black">
<table width="100%" style="padding:0; margin:0;" cellpadding="0">
<tr class="tbl_header" cellpadding="0">
<td width="3%">test1</td>
<td width="7%">test2</td>
<td width="3%">test3</td>
<td width="12%">test4</td>
<td width="7%">test5</td>
<td width="10%"test6</td>
<td width="7%">test7</td>
</tr>
<tr style="background-color:yellow">
<td colspan="7" style="background-color:yellow">
<div style="overflow:scroll;height:110px;width:100%;overflow:auto;border:none;background-color:green">
<table width="100%" style="border:none;background-color:red" cellpadding="0">
<tr class="even">
<td width="3%">2</td>
<td width="7%" class="tdAlign">Testing </td>
<td width="3%" class="tdAlign">Testing </td>
<td width="12%" class="tdAlign">Testing Testing Testing</td>
<td width="7%">Testing_1</td>
<td width="10%">Testing_2</td>
<td width="7%">Testing_3</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
</div>
</html>
When I inspect the table with chromes web kit. I see that the tables with 3% then they are supposed to be, because of the text length. U can fix this by adding table-layout: fixed to both your <table> elements.
If U want to use a table header I suggest using <th> (see here)
<html>
<div style="overflow:scroll;height:140px;width:100%;overflow:auto" style="background-color:black">
<table width="100%" style="padding:0; margin:0;" cellpadding="0">
<tr class="tbl_header" cellpadding="0">
<td width="3%">test1</td>
<td width="7%">test2</td>
<td width="3%">test3</td>
<td width="12%">test4</td>
<td width="7%">test5</td>
<td width="10%">test6</td>
<td width="7%">test7</td>
</tr>
<tr style="background-color:yellow">
<td colspan="7" style="background-color:yellow">
<div style="overflow:scroll;height:110px;width:100%;overflow:auto;border:none;background-color:green">
<table width="100%" style="border:none;background-color:red" cellpadding="0">
<tr class="even">
<td width="3%">2</td>
<td width="7%" class="tdAlign">Testing </td>
<td width="3%" class="tdAlign">Testing </td>
<td width="12%" class="tdAlign">Testing Testing Testing</td>
<td width="7%">Testing_1</td>
<td width="10%">Testing_2</td>
<td width="7%">Testing_3</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
</div>
</html>
Looks like you missed a closing tag for a <TD>(<td width="10%">test6</td>). Hope this helps. Let me know
I am creating a table that has 2 rows, that has different colors. There appears to be a gap between the rows and I want to close the gap, how can I do that?
<table width="100%">
<tr>
<td bgcolor="grey">
<table width="50%" style="margin:auto;">
<tr>
<td bgcolor="white" align="center">
<img src="">Test
</td>
</tr>
<tr>
<td align="center" bgcolor="#99CB55">
<img width="50%" src="xxx">
</td>
</tr>
</table>
</td>
</tr>
</table>
I need to use the css <style> because I'm sending this via Email (PHPMailer) and all the text will only be in HTML (+CSS using )
You can try table {border-spacing: 0; }
table {border-spacing: 0; }`
<table width="100%">
<tr>
<td bgcolor="grey">
<table width="50%" style="margin:auto;">
<tr>
<td bgcolor="white" align="center">
<img src="">Test
</td>
</tr>
<tr>
<td align="center" bgcolor="#99CB55">
<img width="50%" src="xxx">
</td>
</tr>
</table>
</td>
</tr>
</table>
I'm attempting to load this in internet explorer however it's saying there is an error and it wont load. I'm using a Jscript code to load my XSL and XML documents.
I'm loading my documents with this script:
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>UFC Roster</title>
<script type="text/javascript">
// Load XML
var xml = new ActiveXObject("MSXML2.DOMDocument")
xml.async = false
xml.load("UFCRoster.xml")
// Load the XSL
var xsl = new ActiveXObject("MSXML2.DOMDocument")
xsl.async = false
xsl.load("rdRoster.xsl")
// Transform
document.write(xml.transformNode(xsl))
</script>
</head>
<body>
</body>
</html>
and it's saying the error is on line 23 "document.write(xml.transformNode(xsl))"
But I'm not quite sure why this error is happening. Here's the XSL document that goes with it. It isnt finished yet but it isnt loading at all so i cant make any changes to it yet.
<?xml version="1.0"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:output method="html" encoding="UTF-8"/>
<xsl:template match="/">
<html>
<head>
<title>UFC Roster</title>
<link href="style1.css" rel="stylesheet" type="text/css"/>
<style type="text/css">
</style>
</head>
<body leftmargin="0" topmargin="0" border="0">
<a name="top"></a>
<table width="100%" cellpadding="0" cellspacing="0" ID="Table1" border="0">
<tr>
<td valign="bottom">
<table cellpadding="0" cellspacing="0" ID="Table2">
<tr>
<td>
<table width="100%" cellpadding="0" cellspacing="0" ID="Table3" border="0">
<tr height="280px">
<!-- <td valign="bottom"><img src="" id="" border="0" /></td> -->
</tr>
<tr>
<td class="red" valign="top" width="870px" height="310px">
<table width="100%" cellpadding="6" cellspacing="0" ID="Table4">
<tr>
<td align="center" width="920px" valign="top">
<table cellpadding="0" cellspacing="0" ID="Table7">
<tr>
<td height="75px"></td>
</tr>
<tr>
<td valign="top">
<table cellpadding="0" cellspacing="0" align="right">
<tr><td>
<td valign="top">
<table cellpadding="0" cellspacing="0" align="right">
<tr><td>
<xsl:for-each select="UFCFighters/Division" >
<xsl:if test="#class='Heavyweight'">
<table cellpadding="0" cellspacing="10">
<tr>
<td><a name="{/name}"></a>
<img class="picborder2" src="images/{details/name}.jpg" alt="{details/name}" width="100px" height="150px" />
</td>
<td width="450px">
<table>
<tr>
<td>
<table>
<tr>
<!--Comment--> <td class="name"><xsl:value-of select="details/name" /></td>
<td class="rightborder"></td>
<td valign="bottom">
<table cellpadding="0" cellspacing="5">
<tr>
<td class="label"><b>Rank</b></td>
<td class="value"><xsl:value-of select="details/rank" /></td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table>
<tr>
<td class="label" height="20px">From</td>
<td class="value"><xsl:value-of select="From" /></td>
<td class="rightmargin"></td>
<td class="label">Fights Out of</td>
<td class="value"><xsl:value-of select="Fights_out_of" /></td>
<!-- <td><img src="images/arrow_red.bmp" border="0" /></td> -->
</tr>
</table>
</td>
</tr>
<tr>
<td class="bio"><xsl:value-of select="bio" /></td>
<td class="age"><xsl:value-of select="age" /></td>
<td class="height"><xsl:value-of select="height" /></td>
<td class="weight"><xsl:value-of select="weight" /></td>
<td class="college"><xsl:value-of select="college" /></td>
<td class="degree"><xsl:value-of select="degree" /></td>
<td class="record"><xsl:value-of select="record" /></td>
<td class="summary"><xsl:value-of select="summary" /></td>
<td class="submissions"><xsl:value-of select="submissions" /></td>
<td class="striking"><xsl:value-of select="striking" /></td>
<td class="takedowns"><xsl:value-of select="takedowns" /></td>
</tr>
</table>
</td>
</tr>
<tr> <!--Check This Section -->
<td class="border" colspan="2"><br/>
</td>
</tr>
</table>
</xsl:if>
</xsl:for-each>
</td></tr>
</table>
</td>
</tr>
</table>
</td> <!-- To here -->
<td class="smalltext" width="300px" valign="top">
<table cellpadding="0" cellspacing="0" ID="Table5">
<tr>
<td align="right" valign="top" height="75px"><img src="" /></td>
</tr>
<tr>
<td class="border" height="15px"><br /></td>
</tr>
<tr>
<td height="20px">
<table cellpadding="0" cellspacing="0">
<tr>
<td class="rightmarginsmall"><a class="value" href="index.html">Back</a></td>
<!-- <td><img src="images/arrow_red_back.bmp" border="0" /></td> -->
</tr>
</table>
</td>
</tr>
<tr>
<td class="border" height="15px"><br /></td>
</tr>
<tr>
<td height="20px">
<table cellpadding="0" cellspacing="0">
<tr>
<td class="rightmarginsmall"><a class="value" href="rdRoster.xsl">XSLT</a></td>
<!-- <td><img src="images/arrow_red.bmp" border="0" /></td> -->
</tr>
</table>
</td>
</tr>
<tr>
<td class="border" height="916px"><br /></td>
</tr>
<tr>
<td height="20px">
<table cellpadding="0" cellspacing="0">
<tr>
<!-- <td class="rightmarginsmall"><a class="value" href="#top">Top</a></td> -->
<!-- <td><img src="" border="0" /></td> -->
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table cellpadding="2" cellspacing="0">
<tr>
<td class="blacktext">Created 2014</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
</xsl:template>
</xsl:stylesheet>
I'm not sure why it is producing this error and why it won't load.
After the line xsl.load("rdRoster.xsl"), output xsl.parseError.reason, then you will see an error message telling you why the parsing failed.
I have gone through a lot of threads, but I couldn't find something helpful. If that's a duplicate please point me to the relevant thread.
We have created a custom RSS feed for one of our websites in order to achieve the design we wanted for the template. I have managed to make it look good almost everywhere expect Outlook, which is a pain!
The main problem I'm facing is that I cannot show the right border in one of my boxes.
Please refer to the attached screenshot.
Here's my HTML. I have also tried by using percentages for the widths, but didn't work either.
<table width="525" height="250" border="0" cellpadding="0" cellspacing="0" bgcolor="#fafafa" class="main-content" style="border:1px solid #ccc;">
<tr>
<td width="50"><!-- --></td>
<td width="284" align="left" valign="middle"><img src="'.site_url().'/wp-content/uploads/'.$image.'" width="274" height="196" mc:edit="Box_image_2" mc:allowdesigner alt="" /></td>
<td width="20"><!-- --></td>
<td width="280" valign="top" >
<table width="220" border="0" cellpadding="0" cellspacing="0">
<tr>
<td height="15"><!-- --></td>
</tr>
<tr>
<td align="left" class="body-text-bold" style="font-size:16px;font-weight:bold;" mc:edit="body_bold_text" mc:allowdesigner="mc:allowdesigner" ><strong>'.$deal['post_title'].'</strong></td>
</tr>
<tr>
<td height="16"><!-- --></td>
</tr>
<tr>
<td><!-- Red Box Start -->
<div class="red-box" style="background:#e9e9e9;border:1px solid #ccc;">
<table border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td height="5"><!-- --></td>
</tr>
<tr>
<td width="7"><!-- --></td>
<td width="120" class="white-box" style="background:#ffffff;border:1px solid #ccc;">
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td height="5"><!-- --></td>
</tr>
<tr>
<td width="30"></td>
<td align="left" class="red-box-text" style="font-family:Arial, Helvetica, sans-serif;font-size:18px;font-weight:bold;" mc:edit="top_box_price_1" mc:allowdesigner="mc:allowdesigner">Τιμή</td>
<td width="30"></td>
</tr>
<tr>
<td height="5"><!-- --></td>
</tr>
<tr>
<td width="25"></td>
<td align="center" class="red-box-text" style="font-family:Arial, Helvetica, sans-serif;font-size:18px;font-weight:bold;" mc:edit="top_box_price_2" mc:allowdesigner="mc:allowdesigner">'.$price.'€</td>
<td width="20"></td>
</tr>
<tr>
<td height="5"></td>
</tr>
</table>
</td>
<td width="5"><!-- --></td>
<td width="120" class="white-box" style="background:#ffffff;border:1px solid #ccc;">
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td height="10"><!-- --></td>
</tr>
<tr>
<td width="25"></td>
<td align="left" class="red-box-text" style="font-family:Arial, Helvetica, sans-serif;font-size:18px;font-weight:bold;" mc:edit="top_box_discount_1" mc:allowdesigner="mc:allowdesigner">Έκπτωση</td>
<td width="30"></td>
</tr>
<tr>
<td height="5"><!-- --></td>
</tr>
<tr>
<td width="35"></td>
<td align="center" class="red-box-text" style="font-family:Arial, Helvetica, sans-serif;font-size:18px;font-weight:bold;" mc:edit="top_box_discount_2" mc:allowdesigner="mc:allowdesigner">'.$discount.'</td>
<td width="5"></td>
</tr>
<tr>
<td height="15"></td>
</tr>
</table>
</td>
<td width="5"><!-- --></td>
<td></td>
</tr>
<tr>
<td height="5"><!-- --></td>
</tr>
</table>
</div>
</td>
</tr>
<tr>
<td height="12"><!-- --></td>
</tr>
<tr>
<td align="left" class="body-text-bold" mc:edit="body_bold_text" mc:allowdesigner="mc:allowdesigner" ><!--REMOVED BY DUSTIN '.$deal['post_content'].'--></td>
</tr>
<tr>
<td height="0"><!-- --></td>
</tr>
<tr>
<td align="center" mc:edit="top_box_image" mc:allowdesigner="mc:allowdesigner" width="120px" style="background-color:#ac0003; color:#ffffff; border:1px solid #660b0e;cursor: pointer; display: block; font-family:Arial, Helvetica, sans-serif; font-size:12px; padding-top:5px; padding-bottom:5px; text-decoration:none; "><a style="color:#ffffff; text-decoration:none;" href="'.$deal['guid'].'" class="">Δες το Deal</a> </td>
</tr>
</table>
</td>
<td width="0"><!-- --></td>
</tr>
</table>
In case this helps: I send the email through MailChimp using FEED tag.
Thanks in advance for any help!
I think this issue is being caused by the widths of your table cells. Try setting the width twice for each table cell like this:
<td width="10" style="width:10px;">
Also add the following embedded styles:
table td {border-collapse: collapse;}
table { border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt; }
Tip:
You might want to specify what version of Outlook is causing problems. Outlook 2007/2010/2013 react totally different to the same styling than Outlook 2003/2011 for example.
Simply,you can't divide images vertically , if you then it will show 1px space--divide images horizontaly and try it. It will be solved
I have a markup:
<table cellpadding="0" cellspacing="0" class="table_report_line">
<tbody>
<tr>
<td>
<div class="dvlefttable">
</div>
</td>
<td class="dvtoptable" colspan="4" width="100%">
Test
</td>
<td>
<div class="dvrighttable">
</div>
</td>
</tr>
<tr>
<canvas id="chartId" width="400" height="400" style="margin: 30px;">
</canvas>
</tr>
<tr>
<td>
</td>
<td colspan="4">
<br style="line-height: 15px;" />
</td>
<td>
</td>
</tr>
<tr>
<td colspan="6" class="bg_bottom_table">
</td>
</tr>
</tbody>
</table>
but when Firefox renders the page I see that it put canvas outside the table
<canvas id="chartId" style="margin: 30px;" height="400" width="400"> </canvas>
<table cellspacing="0" cellpadding="0" class="table_report_line">
<tbody>
<tr>
<td class="">
<div class="dvlefttable">
</div>
</td>
<td width="100%" colspan="4" class="dvtoptable">
Test
</td>
<td class="">
<div class="dvrighttable">
</div>
</td>
</tr>
<tr>
</tr>
<tr style="background: none repeat scroll 0% 0% transparent;">
<td class="td_border_left">
</td>
<td colspan="4" class="td_padding_left">
<br style="line-height: 15px;">
</td>
<td class="td_border_right">
</td>
</tr>
<tr>
<td class="bg_bottom_table" colspan="6">
</td>
</tr>
</tbody>
</table>
Why does it happen and how it possible to fix that?
You have to put the CANVAS inside of a TD element.
Change:
<tr>
<canvas id="chartId" width="400" height="400" style="margin: 30px;"></canvas>
</tr>
to:
<tr>
<td><canvas id="chartId" width="400" height="400" style="margin: 30px;"></canvas></td>
</tr>
General rule of thumb in cases like this is to use the HTML validator to see what you did wrong.