i have added this style to a table
background-image:url(square_image.png); background-size:auto; background-repeat:no-repeat;
However the image is not being displayed in the background.
The demo Jsfiddle link here
This is because you're having two inline "style" attributes.
Your updated code should be like:
<table border="0" cellspacing="0" cellpadding="5" style="width:100%; min-width:500px; max-width:700px; font-family:Arial; font-size:14px;">
<tr>
<td><table width="240" height="300px" border="0" cellpadding="2" cellspacing="0" style="font-size:12px; font-family:Arial;background-image:url('https://s32.postimg.org/wi1c9sm3p/Integra_Icons_Square_on_orange.jpg'); background-size:auto; background-repeat:no-repeat;">
<tr>
<td align="right">Text</td>
<td align="right">Text</td>
</tr>
<tr>
<td align="right">Text</td>
<td align="right">Text</td>
</tr>
<tr>
<td align="right">Text</td>
<td align="right">Text</td>
</tr>
<tr>
<td align="right">Text</td>
<td align="right">Text</td>
</tr>
<tr>
<td align="right">Text</td>
<td align="right">Text</td>
</tr>
</table></td>
</tr>
</table>
Updated jsfiddle: https://jsfiddle.net/j03mp8bc/8/
It is not allowed to use multiple attributes in HTML.
Validate your HTML before asking on StackOverflow.
https://validator.w3.org/
https://jsfiddle.net/ou366bh7/
style=""
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 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!
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
<table border="0" cellborder="1" cellpadding="5">
<tr>
<td colspan="2" align="left">d</td>
</tr>
<tr>
<td align="left" width="50">ct</td>
<td align="left">1</td>
</tr>
<tr>
<td align="left">wt</td>
<td align="left">0</td>
</tr>
</table>
The Graphviz output:
The expected output:
Try adding cellspacing="0" to your table tag
Also take a look at this: http://www.graphviz.org/doc/info/shapes.html#html
Basically i want to be able to make a a grid of boxes, where i can align text at the top middle and bottom of each box, and have the boxes on the same row resize when text in another box on its row pushes it down.
If you look at this HTML 4 code, it achieves what i want to be able to do, but id like to be able to achieve this with the XHTML 1.0 doctype.
<style type="text/css">
<!--
#apDiv1 {
width:200px;
height:100%;
border:1px solid #000;
}
#apDiv1 table{
width:200px;
height:100%;
border:1px solid #000;
}
-->
</style>
<div id="apDiv1"><table width="100%" height="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>
<table width="100%" height="100%" border="0" cellspacing="0" cellpadding="0">
<tr><td>blah</td></tr>
<tr><td height="100%">blah</td></tr>
<tr><td>blah</td></tr>
</table>
</td>
<td>
<table width="100%" height="100%" border="0" cellspacing="0" cellpadding="0">
<tr><td>blah</td></tr>
<tr>
<td height="100%"><p>blahfhfh</p>
<p>dfhdf</p>
<p>h</p>
<p>dfh</p>
<p>df</p>
<p>h</p>
<p> </p></td></tr>
<tr><td>blah</td></tr>
</table>
</td>
<td>
<table width="100%" height="100%" border="0" cellspacing="0" cellpadding="0">
<tr><td>blah</td></tr>
<tr><td height="100%">blah</td></tr>
<tr><td>blah</td></tr>
</table>
</td>
</tr>
<tr>
<td><table width="100%" height="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>blah</td>
</tr>
<tr>
<td height="100%"><p>blahfhfh</p>
<p>dfhdf </p>
<p> </p></td>
</tr>
<tr>
<td>blah</td>
</tr>
</table></td>
<td><table width="100%" height="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>blah</td>
</tr>
<tr>
<td height="100%">blah</td>
</tr>
<tr>
<td>blah</td>
</tr>
</table></td>
<td><table width="100%" height="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>blah</td>
</tr>
<tr>
<td height="100%">blah</td>
</tr>
<tr>
<td>blah</td>
</tr>
</table></td>
</tr>
<tr>
<td><table width="100%" height="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>blah</td>
</tr>
<tr>
<td height="100%">blah</td>
</tr>
<tr>
<td>blah</td>
</tr>
</table></td>
<td><table width="100%" height="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>blah</td>
</tr>
<tr>
<td height="100%">blah</td>
</tr>
<tr>
<td>blah</td>
</tr>
</table></td>
<td><table width="100%" height="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>blah</td>
</tr>
<tr>
<td height="100%">blah</td>
</tr>
<tr>
<td>blah</td>
</tr>
</table></td>
</tr>
</table>
</div>
There's a cross-browser way to achieve grid using CSS with display:inline-block, however it may not be as flexible as you'd like (and code is pretty ugly if you want to support Firefox 2).
The issue you might have with “XHTML” is that CSS without emulation of IE5 bugs (which you get when you don't use DOCTYPE or use one of old/incomplete ones) restricts when you can use height:100%.
Height in percent doesn't work if parent element has auto height, and by default almost every HTML element has auto height. You have to set explicit height on all parent elements of the table:
html,body,#apDiv1 {
height:100%;
}
first, make your document have the DOCTYPE of HTML 4.01 strict and make it validated first, using http://validator.w3.org
then, you can change the DOCTYPE to
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
and then re-validate it. If there is any problem or things that behave differently, you can ask about the specific question here.