I had problems with backgrounds not showing in most E-Mail clients such as GMail or Yahoo Mail but I found this thread and problem solved by replacing (although I lost some properties like background-repeat and position) <table style="background: url('bg.png');"> to <table background="bg.png">.
But now I'm facing the same problem in Hotmail and none of the above form of codes seems to work.
This page is the reference of answers to most similar questions in stackoverflow, and it says that Outlook.com (new hotmail) does not support css background and I should use background attribute instead, but mine is not working.
What I'm doing wrong?!
Outlook only supports background in the body tag.
Two ways to go for email backgrounds:
Via VML: emailbg.net
or here is the less fancy way:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title></title>
</head>
<body style="margin: 0px; padding: 0px; background-image: url('http://lorempixel.com/100/100/food/'); background-color: #252525; background-repeat: repeat-y no-repeat; background-position: top left;" bgcolor="#252525">
<!-- BODY FAKE PANEL -->
<table width="100%" border="0" align="center" cellpadding="0" cellspacing="0" background="http://lorempixel.com/100/100/food/">
<tr>
<td valign="top">
<!-- CENTER FLOAT -->
<table width="600" height="800" border="0" valign="top" align="center" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF">
<tr>
<td align="center">
Center panel
</td>
</tr>
</table>
<!-- /CENTER FLOAT -->
</td>
</tr>
</table>
<!-- /BODY FAKE PANEL -->
</body>
</html>
Related
I use cfdocument and I need to remove bottom-padding from my table.
<cfdocument format="pdf">
<!DOCTYPE html>
<html>
<head>
<style>
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}
</style>
</head>
<body>
<h2>HTML Table</h2>
<table bgcolor="red">
<tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
<tr>
<td>Centro comercial Moctezuma</td>
<td>Francisco Chang</td>
<td>Mexico</td>
</tr>
<tr>
<td>Ernst Handel</td>
<td>Roland Mendel</td>
<td>Austria</td>
</tr>
<tr>
<td>Island Trading</td>
<td>Helen Bennett</td>
<td>UK</td>
</tr>
<tr>
<td>Laughing Bacchus Winecellars</td>
<td>Yoshi Tannamuri</td>
<td>Canada</td>
</tr>
<tr>
<td style="padding-bottom: 0px;" cellspacing="0">Magazzini Alimentari Riuniti</td>
<td style="padding-bottom: 0px;" cellspacing="0">Giovanni Rovelli</td>
<td style="padding-bottom: 0px;" cellspacing="0">Italy</td>
</tr>
</table>
</body>
</html>
</cfdocument>
I need to remove the bottom padding (yellow vertical line)
I use padding-bottom: 0px; but didn't worked. There is cellspacing="0" but it will affect entire table.
cffiddle : https://cffiddle.org/app/file?filepath=7b8c6141-8bac-42f5-a653-71ddce64c554/fe42c362-17cb-4810-b532-64e11d98685a/c885261b-341d-4ea2-b6d8-3c55687094ec.cfm
The minimal code is given below. Note that -
I need 1px border(I think that means need border-collapse).
Also transition and background-color change cannot be compromised.
CSS only solution.
Am doing wrong or would you have a fix/alternate, or its a bug. Please help me out. Thank you.
<!DOCTYPE html>
<html><head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
#wrap-div{display:flex;}
#com_table{width:800px; border-collapse:collapse; border-spacing:0px; margin:50px auto;text-align:center}
th, td{border:1px solid #3AC;}
#com_table > tbody > tr:hover{color:#fff; background-color:#aaa; transition:all .25s linear;}
</style>
</head>
<body>
<div id="wrap-div">
<table id="com_table">
<thead>
<tr>
<th>Order Date</th>
<th>Status</th>
<th>Total Amt</th>
</tr>
</thead>
<tbody>
<tr>
<td>24/05/2021</td>
<td>NEW</td>
<td>900.00</td>
</tr>
<tr>
<td>24/05/2021</td>
<td>CONFIRMED</td>
<td>900.00</td>
</tr>
<tr>
<td>28/05/2021</td>
<td>CONFIRMED</td>
<td>850.00</td>
</tr>
<tr>
<td>28/05/2021</td>
<td>CONFIRMED</td>
<td>1845.00</td>
</tr>
<tr>
<td>15/05/2021</td>
<td>SETTLED</td>
<td>4221.00</td>
</tr>
<tr>
<td>17/05/2021</td>
<td>SETTLED</td>
<td>1549.00</td>
</tr>
<tr>
<td>17/05/2021</td>
<td>SETTLED</td>
<td>250.00</td>
</tr>
<tr>
<td>18/05/2021</td>
<td>SETTLED</td>
<td>1249.00</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
Even though I set padding to "0" in Mailchimp design areas, my content blocks don't butt up and touch each other, there is a whitespace between the blocks. I dragged over and inserted a code block, but I don't know what to put in it to make these items touch. I added a picture of the code block input area. Can somebody please tell me what code to put in this area? Thanks so much in advance. I removed the > so that it would render on the page. Sorry for being such a newbie with this.
This is in the code box. div class="mcnTextContent" Use your own custom HTML /div
I found this Mailchimp workaround in a Facebook feed:
Use the Code block to build your sections and remove padding and spacing.
Drag a Code block into your layout. Delete the code that is already in there. Copy and paste the code shown below into the block, save and close.
<table style="max-width:100%; min-width:100%;background-color:#FF0000;" class="mcnTextContentContainer" width="100%" cellspacing="0" cellpadding="0" border="0" align="left">
<tbody>
<tr>
<td class="mcnTextContent" style="padding: 10px 18px 9px; line-height: 200%;" valign="top">
<p class="null" style="font-family: helvetica; font-weight:700; font-size: 35px;text-align:center;color:white">September 2018 Newsletter</p>
</td>
</tr>
</tbody>
</table>
Drag another Code block into your layout, below the block you just created. Delete the code that is already in there. Copy and paste the code shown below into the block, save and close.
<table class="mcnTextBlock" style="min-width:100%;" width="100%" cellspacing="0" cellpadding="0" border="0">
<tbody class="mcnTextBlockOuter">
<tr>
<td class="mcnTextBlockInner" style="padding-top:0px;" valign="top">
<!--[if mso]>
<table align="left" border="0" cellspacing="0" cellpadding="0" width="100%" style="width:100%;">
<tr>
<![endif]-->
<!--[if mso]>
<td valign="top" width="600" style="width:600px;">
<![endif]-->
<table style="max-width:100%; min-width:100%; background-color:#c0c0c0" class="mcnTextContentContainer" width="100%" cellspacing="0" cellpadding="0" border="0" align="left">
<tbody><tr>
<td class="mcnTextContent" style="padding-top:0; padding-right:18px; padding-bottom:9px; padding-left:18px;" valign="top">
<h1 style="text-align:center">It's time to design your email.</h1>
<p>Now that you've selected a template, you'll define the layout of your email and give your content a place to live by adding, rearranging, and deleting content blocks.</p>
<p>By using image with caption blocks in multi-column templates, you can create a product grid that works perfectly for e-commerce.</p>
<p>If you need a bit of inspiration, you can <a class="mc-template-link" href="http://inspiration.mailchimp.com">see what other MailChimp users are doing</a>, or <a class="mc-template-link" href="http://mailchimp.com/resources/email-design-guide/">learn about email design</a> and blaze your own trail.</p>
</td>
</tr>
</tbody></table>
<!--[if mso]>
</td>
<![endif]-->
<!--[if mso]>
</tr>
</table>
<![endif]-->
</td>
</tr>
</tbody>
</table>
Original Facebook feed - click on comments to see original feed
I am creating an email that has 2 sections of text, 2 images and a button in the middle. I am able to move the images into a fixed position just fine, but with text I only know how to move it left, center, or right. I basically want the text in between that. For example the first section of text I want it in between center and right.
Here is the Code:
<table width="100%" cellspacing="0" cellpadding="0" border="0">
<tbody>
<tr>
<td class="img" style="font-size: 0pt; line-height: 0pt; text-align: Center; width: 20px;"> </td>
<td>
<table width="100%" cellspacing="0" cellpadding="0" border="0">
<tbody>
<tr>
<div align="center">
<td valign="top" class="column-280" style="width: 200px;">
<IMG STYLE="position:absolute; BOTTOM:-5px; LEFT:125px; WIDTH:125px; HEIGHT:150px" <img src="https://qa.travelinsured.com/images/email/red-clock.png?Status=Temp&sfvrsn=2" alt="Pete's Promise Badge" height="150" width="150" align="Right">
<div style="font-size: 0pt; line-height: 0pt; height: 12px;"><img alt="" width="1" height="12" src="http://www2.travelinsured.com/rs/travelinsured/images/empty.gif" style="height: 12px;" /></div>
<p> <div style="color: #656565; font-family: Arial; font-size: 13px; line-height: 18px; text-align: Center;">Time is running out!</p><br><p>There's still time to vote!</p><br><p>Please vote for Travel Insured's<br>Agent Loyalty Program today!</p>
Position as well as bottom, left, right, etc. all are not very consistent across clients and major clients like Outlook, Gmail and Yahoo do not support them at all. (ref: https://www.campaignmonitor.com/css/).
Your best bet is to use tables for all layouts. This means using nested tables as well as tds and padding to specify locations. It is not forgiving nor easily transferred to a mobile view, but for as close to an exact positioning need as you can get, it is really the only way to create it consistently across clients.
I'm fighting with bad support of html clients for CSS and I need to do a email template with table layout.
I just can't place and align tables within tables correctly. I tried it with valign etc. but this doesn't work...
How can I place one table within another table on top and in the center?
To illustrate I've posted this fiddle:
http://jsfiddle.net/eabJh/1/
The <td >Another nested table</td> is in center position but not on top but in the middle.
Here is my html:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<body style="background-color: black">
<table background="http://i3.mirror.co.uk/incoming/article276604.ece/ALTERNATES/s615/tweet-that-ricky-gervais-jibe-at-mongs-pic-twitter-com-rickygervais-132840776.jpg" width="810" border="20" bordercolor="white" style="border-style:solid; border-spacing:0px; border-collapse:collapse">
<tr style="height:400px">
<td>test
<table width="380" cellspacing="0" cellpadding="2" align="center" border="0">
<tr>
<td >Another nested table</td>
</tr>
</table></td>
</tr>
</table>
</body>
</html>
</html>
Updated Fiddle
Use valign = "top":
<td valign = "top">test
<table width="380" cellspacing="0" cellpadding="2" align="center" border="0">
<tr>
<td>Another nested table</td>
</tr>
</table>
</td>