I'm rendering a table using DomPDF 0.6, now I need to have borders throughout each cell. If I use then the cellpadding and cellspacing affects the width of the border so I can't use it.
Now I have my table
$html = '<table border="0" cellspacing="0" cellpadding="4" width="100%" style="border:1px solid #000;">
<tr>
<td class="borderOk"> </td>
<td class="borderOk" align="center" colspan="2" style="font-size:18px;font-weight:normal;"><i>'.$pName1.'</i></td>
<td class="borderOk" align="center" colspan="2" style="font-size:18px;font-weight:normal;"><i>'.$pName2.'</i></td>
</tr>
<tr>
<td class="borderOk"><strong><i>Price</i></strong></td>
<td class="borderOk" colspan="2" > </td>
<td class="borderOk" colspan="2" > </td>
</tr>
<tr>
<td class="borderOk"><strong><i>Options</i></strong></td>
<td class="borderOk" colspan="2" > </td>
<td class="borderOk" colspan="2" > </td>
</tr>
<tr>
<td class="borderOk" > </td>
<td class="borderOk" colspan="2" > </td>
<td class="borderOk" colspan="2" > </td>
</tr>
</table>';
With my styles that look like this "Also is within the $html variable at the top"
<style type="text/css">
td .borderOk{
border-style: solid;
border-width: 1px;
border-color: #A5C3E0;
}
</style>
The borders show perfectly in my Browser but when rendering it using domPDF the pdf file shows without the inner td borders, only the outline border is shown.
My DomPDF code looks like this
$dompdf = new DOMPDF();
$dompdf->load_html($_SESSION['html'],'UTF-8');
$dompdf->set_paper('a4', 'portrait');
$dompdf->render();
$dompdf->stream(date("YmdHis").".pdf");
Your CSS selector should be
td.borderOk
(without the space)
Or better : add the borderOK class to the table and leave your CSS as it is.
I had the same issue. Remove the border="0" then do as Fabien noted: td.borderOk or just .borderOk
Try to use dompdf version 0.6.0 beta3. It will work for sure. I had tried your code.
http://code.google.com/p/dompdf/downloads/detail?name=dompdf_0-6-0_beta3.tar.gz
Related
have problem like in title. Have email template, everything are ok, but background image doesn't work on outlook. Unfortunately most people in my country use it. Below my code:
<!--#subject Email - Header #-->
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="initial-scale=1.0, width=device-width" />
</head>
<body>
{{var non_inline_styles}}
<!-- Start Image Background -->
<table class="image-background" cellpadding="0" cellspacing="0" border="0" width="100%" bgcolor="22262b" background="http://met.ivycommerce.eu/glamoura_main_image.jpg">
<tr>
<td class="image-background" align="center" style="background: url('http://met.ivycommerce.eu/pattern.png') 0 0 repeat">
<table class="container-table" cellpadding="0" cellspacing="0" border="0">
<tr>
<td class="separator-50" height="50"> </td>
</tr>
<!-- Start Three Column -->
<tr>
<td>
<table class="container-table" cellpadding="0" cellspacing="0" border="0">
<tr>
<td class="center" align="center">
<a href="{{store url=""}}">
<img style="display: block; margin: 0 auto;"
{{if logo_width}}
width="{{var logo_width}}"
{{else}}
width="165"
{{/if}}
{{if logo_height}}
height="{{var logo_height}}"
{{else}}
height=""
{{/if}}
src="{{var logo_url}}"
alt="{{var logo_alt}}"
border="0"/>
</a>
</td>
</tr>
</table>
</td>
</tr>
<!-- Start Three Column -->
<tr>
<td class="separator-30" height="30"> </td>
</tr>
<tr>
<td align="center">
<table align="center" border="0" cellpadding="0" cellspacing="0" width="60">
<tr>
<td class="separator-line" bgcolor="#ffffff" height="1"> </td>
</tr>
</table>
</td>
</tr>
<tr>
<td class="separator-30" height="30"> </td>
</tr>
<tr>
<td class="colored-heading" align="center" height="28">
<div style="line-height: 28px;">Nasza Misja</div>
</td>
</tr>
<tr>
<td class="heading" align="center" height="28">
<div style="line-height: 28px;">To uśmiechnięci Klienci</div>
</td>
</tr>
<tr>
<td class="separator-10" height="10"> </td>
</tr>
<tr>
<td class="sub-heading" align="center" height="24">
<div style="line-height: 24px;">Dziękujemy, że dołączyłeś do wielkiego grona Bionaturalnych.</div>
</td>
</tr>
<tr>
<td class="separator-50" height="50"> </td>
</tr>
<tr>
<td align="center">
<table align="center" border="0" cellpadding="0" cellspacing="0">
<tr>
<td class="button" align="center" valign="middle" height="38" width="140">
Wejdź Do Sklepu
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td class="separator-50" height="50"> </td>
</tr>
</table>
</td>
</tr>
</table>
<!-- End Image Background -->
<!-- Begin wrapper table -->
<table width="100%" cellpadding="0" cellspacing="0" border="0" id="background-table">
<tr>
<td valign="top" class="container-td" align="center">
<table cellpadding="0" cellspacing="0" border="0" align="center" class="container-table">
<tr>
<td valign="top" class="top-content">
<!-- Begin Content -->
I was try with some code, but not success :( when background are ok, rest align left, but have to be center. Can somebody help me?
Outlook generally requires old school type programming and has a lot of things that are not permitted in email that are allowed in website programming. This means that the style works best when included in the header and background images cannot be used. If you want to use a background image, say behind a title for example, you would need to create the title and background as a single image to insert as you would any other image. The downside to this is that Outlook will not download images unless the user specifies to do so. Since a majority of your users use Outlook, best practices says to program for them and then test it across all other browsers. Here is a list of issues identified by Mailchimp, an email service provider, that specifically pertain to Outlook and what fixes, if available, can be performed. http://kb.mailchimp.com/campaigns/previews-and-tests/my-campaign-looks-bad-in-outlook.
In reviewing your code provided, here are some other things that I think you might want to consider:
Use fixed measurements instead of percentages;
Instead of using code for spacing, use a 1px x 1px transparent or background colored image that you can adjust the height and the width of to make the space work the way you want;
Put all styles at the top in css format, for example:
<style type="text/css">
body{
margin:0;
padding:0;
font-family:"Trebuchet MS", arial, sans-serif;
}
</style></head>
I have been programming email newsletters for almost ten years now and the most simple, basic code works the best when the majority of your users have Outlook. Finally, I recommend that you always run your code through an html validator, such as https://validator.w3.org/ to check your code. Even the smallest error can result in unanticipated results with Outlook or other browsers.
Zydol,
To make this work, you will need to use VML to create an object and assign the background image to that. You can read more about this technique here: https://www.emailonacid.com/blog/article/email-development/emailology_vector_markup_language_and_backgrounds
I do believe Bulletproof Backgrounds is the answer you're looking for!
https://backgrounds.cm/
Is there any logical way to change the background colour for a table cell in a repeatable region in mailchimp? Here is my code, I don't see any options in mailchimp with the custom template build.
<table width="100%" cellspacing="20" mc:repeatable="product" mc:variant="content1">
<tbody>
<tr>
<td align="center" bgcolor="#ff0000" valign="middle" mc:edit="playlist"><h2>Playlist</h2>
<h3>Check out this playlist!</h3>
<h4>FOLLOW</h4></td>
</tr>
</tbody>
</table>
I came across a similar issue today. Here's a possible solution:
<table width="100%" cellspacing="20" mc:repeatable="product" mc:variant="red">
<tbody>
<tr>
<td align="center" bgcolor="#ff0000" valign="middle" mc:edit="playlist">
<h2>Playlist</h2>
<h3>Check out this playlist!</h3>
<h4>FOLLOW</h4>
</td>
</tr>
</tbody>
</table>
<table width="100%" cellspacing="20" mc:repeatable="product" mc:variant="green">
<tbody>
<tr>
<td align="center" bgcolor="#00ff00" valign="middle" mc:edit="playlist">
<h2>Playlist</h2>
<h3>Check out this playlist!</h3>
<h4>FOLLOW</h4>
</td>
</tr>
</tbody>
</table>
<table width="100%" cellspacing="20" mc:repeatable="product" mc:variant="blue">
<tbody>
<tr>
<td align="center" bgcolor="#0000ff" valign="middle" mc:edit="playlist">
<h2>Playlist</h2>
<h3>Check out this playlist!</h3>
<h4>FOLLOW</h4>
</td>
</tr>
</tbody>
</table>
When you've imported this into your template, create a campaign and on the design page you'll have a dropdown with the different colour options. Make any h2s, h3s etc editable by adding mc:edit.
I've got a problem getting my html email to render properly on Mac Mail client. Basically a white strip ~20px wide appears on the right hand side of the display.
This is a html I'm using:
<div style="padding:30px !important; height: 60px; border-bottom: 10px solid #07d7ed;">
<div style="width:100%">
<div style="float:left">Logo</div>
<div style="float:right">Some Text</div>
</div>
</div>
Any ideas, why this happened?
divs are not supported everywhere and often come with their own styling. Try using a table instead:
<table width="100%" cellspacing="0" cellpadding="0" border="0">
<tr>
<td align="left" valign="top">
<table width="48%" cellspacing="0" cellpadding="0" border="0" align="left">
<!--Use less than 50% width to account for outlook which adds space to floated tables -->
<tr>
<td align="left" valign="top">Logo</td>
</tr>
</table>
<table width="48%" cellspacing="0" cellpadding="0" border="0" align="right">
<!--Use align instead of float to account for older browsers and outlook which don't handle floats correctly-->
<tr>
<td align="left" valign="top">sometext</td>
</tr>
</table>
</td>
</tr>
</table>
Try this and see if it fixes your problem. If not, see if you can post a screenshot.
I have this code:
<table align="center" border="0" cellpadding="0" cellspacing="0">
<tr>
<td colspan="1" height="20" width="658">A</td>
</tr>
<tr>
<td colspan="1" width="658">B</td>
</tr>
</table>
CKEDITOR convert it in
<table align="center" border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td colspan="1">A</td>
</tr>
<tr>
<td colspan="1">B</td>
</tr>
</tbody>
</table>
How I can keep height and width?
Some mailers program do not like style attribute in TD element.
SOLVED
I have use the config property config.allowedContent
In the ckeditor, right-click the cell you want to customize. Choose cell and then cell properties. There you can set the desire width and height of the cell.
I built a table like this:
<table width="100%" border="0">
<tr>
<td width="20%">
Nombre
</td>
</tr>
</table>
but I have a warning "Validation (XHTML 1.0 Transitional): Attribute 'width' is considered outdated. A newer construct is recommended"
What is a Newer construct for width in XHTML?
The width attribute for <td> has been deprecated.
You should replace the width attribute with the CSS width property:
<table width="100%" border="0">
<tr>
<td style="width: 20%;">
Nombre
</td>
</tr>
</table>
Use only CSS attributes:
<table style="width:100%; border:0px;">
<tr>
<td style="width:20%;">
Nombre
</td>
</tr>
</table>