padding not respected in outlook on button - outlook

I have an anchor link with padding:
Discover your 3D
But outlook doesn't respect this padding, it's just removed, what's the best solution to not mess up the design in other clients.


Outlook's support for the box model is... sketchy. Try this code:
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td bgcolor="#137191" style="padding: 16px; border-radius:4px">
Discover your 3D
</td>
</tr>
</table>
</td>
</tr>
</table>
This will solve your collapsing padding issue in Outlook. Outlook will still display squared-off corners instead of border-radius, but at least you'll get a padded button that is clickable.
(I added/edited a few other properties to help cross-client display)
There are a few way to achieve bulletproof buttons in email if you prefer another method.


For some reason padding on the a-tag in Outlook only works when you combine with a 1px border and display inline-block. Then you need the td to share the same background-color and width as the button to fill out the clickable area.
<table align="center">
<tbody>
<tr>
<td style="background-color: #0079c8;" width="140px">Log in ></td>
</tr>
</tbody>
</table>


I got button code example from microsoft template:
<tr>
<td style="padding: 0px 0px 40px;">
<table align="center" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td align="center" style="padding-bottom: 0px !important; margin-bottom: 0px !important;" cellspacing="0" border="0" cellpadding="0">
<a class="fixLinkWhite" style='text-align: center; color: rgb(255, 255, 255); line-height: 19px; font-family: "Segoe UI Semibold", wf_segoe-ui_semibold, "Segoe UI", "Segoe WP", Tahoma, Arial, sans-serif; font-size: 16px; font-weight: 500; display: inline-block;' href="https://emea01.safelinks.protection.outlook.com/?url=https%3A%2F%2Fclick.mail.onedrive.com%2F%3Fqs%3D66fc70d9e5f1a53dc4a2197021906f0dbfd56c5f6063855eacb5b2236fdb95cce118e2452e0763745ec595025acd785afd06ff9ac40a30e8&data=04%7C01%7C%7C1da4d1818b194c2ce45508d9b586e09f%7C84df9e7fe9f640afb435aaaaaaaaaaaa%7C1%7C0%7C637740413170283041%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C3000&sdata=P48lMVNNmii3puOCtHjGAGqjBauzZvUfKua%2F0hsS2Z0%3D&reserved=0" target="_blank" shash="lVj7xGxKkteyQkNqUIWVOtfqS5bLgunSFQJWPeQ+a+jLeZJ0lydeWcm1fiSFwJLd6OvwJNV2YVATqaHA5r9xyo2q+4/ssBdAEfVO93OqZLe1Ol46wxjFEMaqebYBsJUqECxQiHgCvIo9cZ9OSacRvZS6y6UiyPLq3xDoiAJGDzc=" originalsrc="https://click.mail.onedrive.com/?qs=66fc70d9e5f1a53dc4a2197021906f0dbfd56c5f6063855eacb5b2236fdb95cce118e2452e0763745ec595025acd785afd06ff9ac40a30e8">
<p class="fixLinkWhite" style="padding: 10px 0px; border: 1px solid rgb(0, 120, 215); border-image: none; color: rgb(255, 255, 255); line-height: 19px; font-size: 16px; font-weight: 500; display: inline-block; background-color: rgb(0, 120, 215);"> Перейти в ваш OneDrive </p>
</a>
</td>
</tr>
</tbody>
</table>
</td>
</tr>

Related

Mailchimp: Is there a way to make the corners of coded buttons curved?

I used this code from another question:
<tbody>
<tr>
<td align="left" valign="middle">
<a style="background-color:#009688; color:#FFFFFF; font-family:Helvetica, Arial, sans-serif; font-size:16px; font-weight:bold; letter-spacing:-.5px; line-height:150%; padding-top:15px; padding-right:30px; padding-bottom:15px; padding-left:30px; text-decoration: none;" href="mailto:corporatesales#brother.com.au" target="_blank">Ask us how
</a>
</td>
<td align="right" valign="middle">
<a style="background-color:#009688; color:#FFFFFF; font-family:Helvetica, Arial, sans-serif; font-size:16px; font-weight:bold; letter-spacing:-.5px; line-height:150%; padding-top:15px; padding-right:30px; padding-bottom:15px; padding-left:30px; text-decoration: none;" href="http://corpsolutions.brother.com.au/" target="_blank">Find out more
</a>
</td>
</tr>
</tbody>
</table>
And i was wondering if there is a way to make the corners of the individual button boxes more rounded, as this would match with the other buttons in the email.

Add the following to your style attribute:
border-radius: 5px;
border: 2px solid #000000;

NVDA not reading text with background images in Outlook

I've been trying to make our emails more accessible but NVDA seems to have trouble reading text when there's a background image in Outlook. Could it be because of the VML or something else? NVDA can read it when I view in browser, but I feel like I shouldn't rely on that being used. I haven't been able to find a lot about email accessibility best practices, and nothing that discusses this issue I'm having. I'm fairly new to this so any suggestions would be appreciated.
Thanks!
<table role="presentation" class="container_module" id="heroWCTA" border="0" cellpadding="0" cellspacing="0" align="center" width="100%" style="margin:0; vertical-align:top;">
<tbody>
<tr>
<td align="center" valign="top" width="100%" background="https://via.placeholder.com/660x220" style=" background-image:url(https://via.placeholder.com/660x220); background-repeat:no-repeat; background-size:cover; background-position: center center; margin: 0;">
<!--[if gte mso 9]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:640px; height:210px;">
<v:fill type="frame" src="https://via.placeholder.com/660x220" />
<v:textbox inset="10,10,10,10" v-text-anchor="top">
<![endif]-->
<table role="presentation" align="center" width="100%" border="0" cellpadding="0" cellspacing="0" style="vertical-align:top;">
<tbody>
<tr>
<td class="padding_top_60 padding_right_110 padding_bottom_12 padding_left_17 text_18_18" width="100%" valign="top" align="left" style="color:#ffffff; vertical-align:top; padding: 30px 15px 15px 32px; margin:0; font-family:Arial, Helvetica, sans-serif; font-size:22px; line-height: 22px; -webkit-text-size-adjust:none;">
<div id="heroText">
<h2 class="text_18_18" style="margin:0; font-family:Arial, Helvetica, sans-serif; font-size:22px; line-height: 22px; color:#ffffff; margin:0;"><b>Lorem ipsum<br> dolor sit amet,<br> coctetuer adipiscing<br> elit</b></h2>
</div> </td>
</tr>
<tr>
<td class="padding_bottom_60" width="100%" align="left" style="padding-bottom: 25px; margin: 0;">
<table role="presentation" border="0" width="100%" cellpadding="0" cellspacing="0" style="vertical-align:top; margin: 0; padding: 0;">
<tbody>
<tr>
<td class="content_17" width="32" align="left" style="padding: 0; margin: 0;font-family: Arial, Helvetica, sans-serif; font-size: 10px; line-height: 10px; width: 32px;"> </td>
<td align="left" style="padding: 0; margin: 0;">
<table role="presentation" border="0" cellpadding="0" cellspacing="0" style="vertical-align:top; margin: 0; padding: 0;">
<tbody>
<tr>
<td class="height_22" height="28" width="100%" align="center" border="2" valign="middle" style=" vertical-align:middle; font-family: Arial, Helvetica, sans-serif; color:#ffffff; font-size:12px; -webkit-border-radius: 0px; -moz-border-radius: 0px; border-radius: 0px; border: 2px solid #00aeef; background-color:#00aeef;">
<!--[if mso]>
<table>
<tr>
<td style="background-color: #00aeef; padding: 7px 10px; text-align: center;"><![endif]--><a class="height_22" role="button" href=
"http://go.na.panasonic.com/SU0K1G00F0005J01H00G00O" style="
text-decoration:none; color:#ffffff; font-family: Arial, Helvetica, sans-serif; font-size:12px; line-height: 12px; vertical-align:middle; height:28px; -webkit-border-radius: 0px; -moz-border-radius: 0px; border-radius: 0px; padding:7px 10px; "
><b>Learn More</b></a><br>
<!--[if mso]></td>
</tr>
</table>
<![endif]--></td>
</tr>
</tbody>
</table> </td>
<td class="content_17" width="32" align="right" style="padding: 0; margin: 0;font-family: Arial, Helvetica, sans-serif; font-size: 10px; line-height: 10px; width: 32px;"> </td>
</tr>
</tbody>
</table> </td>
</tr>
</tbody>
</table>
<!--[if gte mso 9]></v:textbox></v:rect><![endif]--> </td>
</tr>
</tbody>
</table>

border-bottom attribute on span affects all borders of the respective element in outlook365

My company is using Adobe dreamweaver to generate HTML emails, and oftentimes it doesnt work or provide the features desired. So I have to step in and make the HTML-Emails work at least in our Office365 environment...
However, to the point: Above some text, a green line/border shall be displayed. So I went into the sourcecode, looked up the containing element and added a span tag around the word supposed to have a green top-border. Then I added
style="border-top: 5px solid green"
And when I insert the HTML Code into an email, I get the display of a word being completely surrounded by green borders, not just a green top border.
The span tag resides within b tags, and the b tages are inside a td and so on. Nothing special in my opinion.
i already tried working around this by using other elements that span, but it didnt work. Oftentimes it seems as if Outlook doesnt even recognize the tags.
display: inline
also didnt have any effect on div element, which I had high hopes for since at least there, the border-top activated only the top border, not all borders around it. But unfortunately, its not inline...^^
Any experienced HTML-Email designers out there who would have some advice or two?
EDIT:
Part of the markup
<td height="100" bgcolor="#EFEFEF" class="inner" style="border-left-color: #000000:; border-left: thin; padding-top:15px; padding-right:15px; padding-bottom:15px; padding-left:30px; font-family:'Segoe UI', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size:18px; line-height:100%; color:#000000; font-weight:normal;">
<table width="547" bgcolor="#ffffff">
<tr>
<td width="539" height="40" bgcolor="#ffffff" class="inner" style="padding-top:15px; padding-right:15px; padding-bottom:15px; padding-left:30px; font-family:'Segoe UI', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size:18px; line-height:100%; color:#000000; font-weight:normal;"> <b><span style="border-top: 5px solid green;">TEST</span> - blablabla</b>
</tr>
</table>
</td>

I wouldn't use a Span tag to do this. You need a block element to add a border to (e.g. div / td).
I would suggest utilizing tables and table cells. It'll be your best way to add the border in a way that is supported everywhere and keep everything looking nice, no matter the email client quirks.
See my edits below:
<table width="100%" border="0" cellspacing="0" cellpadding="0" style="width:100%;">
<tr>
<td height="100" bgcolor="#EFEFEF" class="inner" style="border-left-color: #000000:; border-left: thin; padding-top:15px; padding-right:15px; padding-bottom:15px; padding-left:30px; font-family:'Segoe UI', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size:18px; line-height:100%; color:#000000; font-weight:normal;">
<table width="547" border="0" cellspacing="0" cellpadding="0">
<tr>
<td bgcolor="#ffffff" class="inner" style="padding-top:15px; padding-right:15px; padding-bottom:15px; padding-left:30px;">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>
<table align="left" border="0" cellspacing="0" cellpadding="0" style="width:auto;">
<tr>
<td style="font-family:'Segoe UI', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size:18px; line-height:100%; color:#000000; font-weight:normal; border-top: 5px solid green; padding-top:3px;">
<b>TEST</b>
</td>
</tr>
</table>
<table align="left" border="0" cellspacing="0" cellpadding="0" style="width:auto;">
<tr>
<td style="font-family:'Segoe UI', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size:18px; line-height:100%; color:#000000; font-weight:normal; border-top: 5px solid #ffffff; padding-top:3px;">
<b>- blablabla</b>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>

Scaling to screen size in Outlook

Email isn’t scaling to screen size in outlook. Testing with email on acid and it’s working for other clients, can anyone give me advice?
Code is below. Would appreciate some advice on what needs fixing as this is my first attempt to code an email.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>See what our customers say</title>
<style type="text/css">
</style>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:v="urn:schemas-microsoft-com:vml"
xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
<!--[if gte mso 9]><xml>
<o:OfficeDocumentSettings>
<o:AllowPNG/>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml><![endif]-->
</head>
</head>
<body bgcolor="#ebebeb" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; height: 100% !important; width: 100% !important;">
<table border="0" cellpadding="0" cellspacing="0" width="100%" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; height: 100% !important; width: 100% !important; border-collapse: collapse !important; margin: 0; mso-table-lspace: 0pt; mso-table-rspace: 0pt; padding: 0;">
<tbody>
<tr>
<td width="640">
<table align="center" border="0" cass="container" cellpadding="0" cellspacing="0" width="640">
<tbody>
<tr>
<td bgcolor="#ffffff" border="0" class="logo" valign="top" width="100%" height="auto" align="center" style="width: 100%; background-color: rgb(255, 255, 255); background-position: initial initial; background-repeat: initial initial;" pardot-data=""><img alt="Pay4Later" border="0" src="http://go.pardot.com/l/73452/2015-08-18/23htmw/73452/32364/testimonials.jpg" style="display: block; width: 100%;" width="100%"></td>
</tr>
<tr>
<td align="center" bgcolor="#f9f6f2" class="headline" style="padding: 15px 20px 5px 30px; border: 0; font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 22px; width: 100%;" valign="top">
<h1 style="margin: 0px 0px 15px 0px; font-weight: normal; font-size: 32px; line-height: 32px; color: #414141;">DON'T JUST TAKE<br>
OUR WORD FOR IT</h1>
<p><i>See what our customers say</i></p>
</td>
</tr>
<tr>
<td align="left" bgcolor="#f9f6f2" class="content" style="padding: 0px 60px; border: 0px; font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 22px; color: rgb(65, 65, 65); width: 100%; background-color: rgb(249, 246, 242); background-position: initial initial; background-repeat: initial initial;" valign="top" pardot-data="">There’s no doubt that offering finance to your customers is a guaranteed way to dramatically increase your sales. Pay4Later takes digital lending further by giving you market leading acceptance rates and maximising order values, but don’t just take our word for it. See what our customers say...</td>
</tr>
<tr>
<td align="center" bgcolor="#f9f6f2" pardot-data="" style="padding: 20px 0px; background-color: rgb(249, 246, 242); background-position: initial initial; background-repeat: initial initial; width: 100%;" width="100%" class=""><img src="http://go.pardot.com/l/73452/2015-08-27/25s4sf/73452/34320/line_half.png"></td>
</tr>
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td align="center" bgcolor="#f9f6f2" height="130" style="padding: 0 40px;" width="130" class=""><img height="130" src="http://go.pardot.com/l/73452/2015-08-27/25s4y5/73452/34330/cotswold.png" style="width: 130px; height: 130px;" width="130"></td>
<td bgcolor="#f9f6f2" class="content" style="border: 0; font-family:Arial, Helvetica, sans-serif; font-size: 16px; line-height:22px; color: #414141; padding-right: 50px;">“We trust Pay4Later with our customers, as Pay4Later’s performance with them reflects on our brand, too. We find that customers get great care from the company when needed, and we couldn’t be happier."</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td align="center" bgcolor="#f9f6f2" style="padding: 20px 0;" width="100%" class=""><img src="http://go.pardot.com/l/73452/2015-08-27/25s4sf/73452/34320/line_half.png"></td>
</tr>
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td bgcolor="#f9f6f2" class="content" style="border: 0; font-family:Arial, Helvetica, sans-serif; font-size: 16px; line-height:22px; color: #414141; padding-left: 50px;">“We trust Pay4Later with our customers, as Pay4Later’s performance with them reflects on our brand, too. We find that customers get great care from the company when needed, and we couldn’t be happier."</td>
<td align="center" bgcolor="#f9f6f2" height="130" style="padding: 0 40px;" width="130" class=""><img height="130" src="http://go.pardot.com/l/73452/2015-09-02/26hr5h/73452/35206/mango.png" style="width: 130px; height: 130px;" width="130"></td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td align="center" bgcolor="#f9f6f2" style="padding: 20px 0;" width="100%" class=""><img src="http://go.pardot.com/l/73452/2015-08-27/25s4sf/73452/34320/line_half.png"></td>
</tr>
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td align="center" bgcolor="#f9f6f2" height="130" style="padding: 0 40px;" width="130" class=""><img height="130" src="http://go.pardot.com/l/73452/2015-08-27/25s4yt/73452/34340/oak_furniture.png" style="width: 130px; height: 130px;" width="130"></td>
<td bgcolor="#f9f6f2" class="content" style="border: 0; font-family:Arial, Helvetica, sans-serif; font-size: 16px; line-height:22px; color: #414141; padding-right: 50px;">“We trust Pay4Later with our customers, as Pay4Later’s performance with them reflects on our brand, too. We find that customers get great care from the company when needed, and we couldn’t be happier."</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td align="center" bgcolor="#f9f6f2" style="padding: 20px 0;" width="100%" class=""><img src="http://go.pardot.com/l/73452/2015-08-27/25s4sf/73452/34320/line_half.png"></td>
</tr>
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td bgcolor="#f9f6f2" class="content" style="border: 0; font-family:Arial, Helvetica, sans-serif; font-size: 16px; line-height:22px; color: #414141; padding-left: 50px;">“We trust Pay4Later with our customers, as Pay4Later’s performance with them reflects on our brand, too. We find that customers get great care from the company when needed, and we couldn’t be happier."</td>
<td align="center" bgcolor="#f9f6f2" height="130" style="padding: 0 40px;" width="130" class=""><img height="130" src="http://go.pardot.com/l/73452/2015-08-27/25s4yf/73452/34336/gymkit_uk.jpg" style="width: 130px; height: 130px;" width="130"></td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td align="center" bgcolor="#f9f6f2" style="padding: 20px 0;" width="100%" class=""><img height="3" src="http://go.pardot.com/l/73452/2015-08-27/25s4sf/73452/34320/line_half.png" style="width: 544px; height: 3px;" width="544"></td>
</tr>
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td align="center" bgcolor="#f9f6f2" height="130" style="padding: 0 40px;" width="130" class=""><img height="130" src="http://go.pardot.com/l/73452/2015-08-27/25s4yp/73452/34338/wongs.png" style="width: 130px; height: 130px;" width="130"></td>
<td bgcolor="#f9f6f2" class="content" style="border: 0; font-family:Arial, Helvetica, sans-serif; font-size: 16px; line-height:22px; color: #414141; padding-right: 50px;">“We trust Pay4Later with our customers, as Pay4Later’s performance with them reflects on our brand, too. We find that customers get great care from the company when needed, and we couldn’t be happier."</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td align="center" bgcolor="#f9f6f2" style="padding: 20px 0;" width="100%" class=""><img src="http://go.pardot.com/l/73452/2015-08-27/25s4sf/73452/34320/line_half.png"></td>
</tr>
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td bgcolor="#f9f6f2" class="content" style="border: 0; font-family:Arial, Helvetica, sans-serif; font-size: 16px; line-height:22px; color: #414141; padding-left: 50px;">“We trust Pay4Later with our customers, as Pay4Later’s performance with them reflects on our brand, too. We find that customers get great care from the company when needed, and we couldn’t be happier."</td>
<td align="center" bgcolor="#f9f6f2" height="130" style="padding: 0 40px;" width="130" class=""><img height="130" src="http://go.pardot.com/l/73452/2015-09-07/26x153/73452/35954/home_leisure.png" style="width: 130px; height: 130px;" width="130"></td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td align="center" bgcolor="#f9f6f2" style="padding: 20px 0;" width="100%" class=""><img src="http://go.pardot.com/l/73452/2015-08-27/25s4sf/73452/34320/line_half.png"></td>
</tr>
<tr>
<td align="center" bgcolor="#f9f6f2" style="padding-top: 30px;" width="640">
<table align="center" bgcolor="#f9f6f2" style="border:2px solid #000000;" width="200">
<tbody>
<tr>
<td align="center" style="padding:10px 6px;" class=""><span style="font-family: 'Roboto', Helvetica, Arial, sans-serif !important;">SIGNUP NOW</span> </td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td align="left" bgcolor="#f9f6f2" class="content" style="padding: 50px 100px 0px 100px; border: 0; font-family:Arial, Helvetica, sans-serif; font-size: 16px; line-height:22px; color: #414141;" valign="top">To learn more about how your business can benefit from Pay4Later’s finance solutions you can reply to this email or call us on 0800 021 7150.</td>
</tr>
<tr>
<td align="left" bgcolor="#f9f6f2" class="content" style="padding: 50px 100px 0px 100px; border: 0; font-family:Arial, Helvetica, sans-serif; font-size: 16px; line-height:8px; color: #414141;" valign="top">
<p><span>Kind Regards,</span></p>
<p><span>The Pay4Later Team</span></p>
<p><span>0800 021 7150</span></p>
</td>
</tr>
<tr>
<td width="640">
<table align="center" bgcolor="#0092ce" border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td align="left" bgcolor="#0092ce" class="content" style="padding: 30px 100px 10px 100px; border: 0; font-family:Arial, Helvetica, sans-serif; font-size: 16px; line-height:8px; color: #ffffff;" valign="top" width="100%">
<p><span>Pay4Later Ltd</span></p>
<p><span>33 St Mary Axe</span></p>
<p><span>London, EC3A 8AG</span></p>
</td>
<td class=""><img alt="Twitter" border="0" height="30" src="http://go.pardot.com/l/73452/2015-09-02/26hq9t/73452/35156/twitter.png" style="width: 30px; height: 30px; border-width: 0px; border-style: solid;" title="Twitter" width="30"> </td>
<td class=""><img alt="Google" border="0" height="30" src="http://go.pardot.com/l/73452/2015-09-02/26hqr7/73452/35184/linkedIn.png" style="width: 30px; height: 30px; padding-left: 15px; border-width: 0px; border-style: solid;" title="Google" width="30"> </td>
<td class=""><img alt="RSS" border="0" height="30" src="http://go.pardot.com/l/73452/2015-09-02/26hqrp/73452/35186/mail.png" style="width: 30px; height: 30px; padding-left: 15px; padding-top: 7px; padding-right: 20px; border-width: 0px; border-style: solid;" title="RSS" width="30"> </td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td align="center" bgcolor="#ebebeb" class="content" style="padding: 10px 100px 0px 100px; border: 0; font-family:Arial, Helvetica, sans-serif; font-size: 14px; line-height:22px; color: #414141;" valign="top">If you don't want to receive more mails, just click here</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<div style="display:none; white-space:nowrap; font:15px courier; color:#ffffff;">
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
</div>
</body>
</html>

If by "scale to screen" you mean that the image is so much larger in all Outlook, this is because Outlook tends to size images based on the actual size of the hosted image, not your declarations - especially when used as percentages. Your best bet is to resize the hosted image to 640px wide and Outlook should behave properly.
There are many different theories on getting around this, but the only definitive way I have found is to make Outlook behave is to resize the images to the scale you want them to be.

HTML attributes (as in, width="640") can be used to resize images in Outlook. If width is defined, height will be rescaled accordingly. This works in all Outlook versions. However, the image will not be fluid (100% width) with this fix in place. It doesn't look like that's an issue for your email, as it doesn't contain any responsive code. If you use media queries, a style with !important should be able to overwrite this width.
Here is a test showing how this will look: https://www.emailonacid.com/app/acidtest/display/summary/r9Sdqkr0J2kICtkrwc0RUkioQ0uX2yID1BEMvfLUEUczL/shared
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>See what our customers say</title>
<style type="text/css">
</style>
<!--[if gte mso 9]><xml>
<o:OfficeDocumentSettings>
<o:AllowPNG/>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml><![endif]-->
</head>
<body bgcolor="#ebebeb" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; height: 100% !important; width: 100% !important;">
<table border="0" cellpadding="0" cellspacing="0" width="100%" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; height: 100% !important; width: 100% !important; border-collapse: collapse !important; margin: 0; mso-table-lspace: 0pt; mso-table-rspace: 0pt; padding: 0;">
<tbody>
<tr>
<td width="640">
<table align="center" border="0" class="container" cellpadding="0" cellspacing="0" width="640">
<tbody>
<tr>
<td bgcolor="#ffffff" border="0" class="logo" valign="top" width="100%" height="auto" align="center" style="width: 100%; background-color: rgb(255, 255, 255); background-position: initial initial; background-repeat: initial initial;" pardot-data=""><a href="#">
<img alt="Pay4Later" border="0" src="http://go.pardot.com/l/73452/2015-08-18/23htmw/73452/32364/testimonials.jpg" style="display: block; width: 640px;" width="640">
</a></td>
</tr>
<tr>
<td align="center" bgcolor="#f9f6f2" class="headline" style="padding: 15px 20px 5px 30px; border: 0; font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 22px; width: 100%;" valign="top">
<h1 style="margin: 0px 0px 15px 0px; font-weight: normal; font-size: 32px; line-height: 32px; color: #414141;">DON'T JUST TAKE<br>
OUR WORD FOR IT</h1>
<p><i>See what our customers say</i></p>
</td>
</tr>
<tr>
<td align="left" bgcolor="#f9f6f2" class="content" style="padding: 0px 60px; border: 0px; font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 22px; color: rgb(65, 65, 65); width: 100%; background-color: rgb(249, 246, 242); background-position: initial initial; background-repeat: initial initial;" valign="top" pardot-data="">There’s no doubt that offering finance to your customers is a guaranteed way to dramatically increase your sales. Pay4Later takes digital lending further by giving you market leading acceptance rates and maximising order values, but don’t just take our word for it. See what our customers say...</td>
</tr>
<tr>
<td align="center" bgcolor="#f9f6f2" pardot-data="" style="padding: 20px 0px; background-color: rgb(249, 246, 242); background-position: initial initial; background-repeat: initial initial; width: 100%;" width="100%" class=""><img src="http://go.pardot.com/l/73452/2015-08-27/25s4sf/73452/34320/line_half.png"></td>
</tr>
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td align="center" bgcolor="#f9f6f2" height="130" style="padding: 0 40px;" width="130" class=""><img height="130" src="http://go.pardot.com/l/73452/2015-08-27/25s4y5/73452/34330/cotswold.png" style="width: 130px; height: 130px;" width="130"></td>
<td bgcolor="#f9f6f2" class="content" style="border: 0; font-family:Arial, Helvetica, sans-serif; font-size: 16px; line-height:22px; color: #414141; padding-right: 50px;">“We trust Pay4Later with our customers, as Pay4Later’s performance with them reflects on our brand, too. We find that customers get great care from the company when needed, and we couldn’t be happier."</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td align="center" bgcolor="#f9f6f2" style="padding: 20px 0;" width="100%" class=""><img src="http://go.pardot.com/l/73452/2015-08-27/25s4sf/73452/34320/line_half.png"></td>
</tr>
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td bgcolor="#f9f6f2" class="content" style="border: 0; font-family:Arial, Helvetica, sans-serif; font-size: 16px; line-height:22px; color: #414141; padding-left: 50px;">“We trust Pay4Later with our customers, as Pay4Later’s performance with them reflects on our brand, too. We find that customers get great care from the company when needed, and we couldn’t be happier."</td>
<td align="center" bgcolor="#f9f6f2" height="130" style="padding: 0 40px;" width="130" class=""><img height="130" src="http://go.pardot.com/l/73452/2015-09-02/26hr5h/73452/35206/mango.png" style="width: 130px; height: 130px;" width="130"></td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td align="center" bgcolor="#f9f6f2" style="padding: 20px 0;" width="100%" class=""><img src="http://go.pardot.com/l/73452/2015-08-27/25s4sf/73452/34320/line_half.png"></td>
</tr>
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td align="center" bgcolor="#f9f6f2" height="130" style="padding: 0 40px;" width="130" class=""><img height="130" src="http://go.pardot.com/l/73452/2015-08-27/25s4yt/73452/34340/oak_furniture.png" style="width: 130px; height: 130px;" width="130"></td>
<td bgcolor="#f9f6f2" class="content" style="border: 0; font-family:Arial, Helvetica, sans-serif; font-size: 16px; line-height:22px; color: #414141; padding-right: 50px;">“We trust Pay4Later with our customers, as Pay4Later’s performance with them reflects on our brand, too. We find that customers get great care from the company when needed, and we couldn’t be happier."</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td align="center" bgcolor="#f9f6f2" style="padding: 20px 0;" width="100%" class=""><img src="http://go.pardot.com/l/73452/2015-08-27/25s4sf/73452/34320/line_half.png"></td>
</tr>
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td bgcolor="#f9f6f2" class="content" style="border: 0; font-family:Arial, Helvetica, sans-serif; font-size: 16px; line-height:22px; color: #414141; padding-left: 50px;">“We trust Pay4Later with our customers, as Pay4Later’s performance with them reflects on our brand, too. We find that customers get great care from the company when needed, and we couldn’t be happier."</td>
<td align="center" bgcolor="#f9f6f2" height="130" style="padding: 0 40px;" width="130" class=""><img height="130" src="http://go.pardot.com/l/73452/2015-08-27/25s4yf/73452/34336/gymkit_uk.jpg" style="width: 130px; height: 130px;" width="130"></td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td align="center" bgcolor="#f9f6f2" style="padding: 20px 0;" width="100%" class=""><img height="3" src="http://go.pardot.com/l/73452/2015-08-27/25s4sf/73452/34320/line_half.png" style="width: 544px; height: 3px;" width="544"></td>
</tr>
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td align="center" bgcolor="#f9f6f2" height="130" style="padding: 0 40px;" width="130" class=""><img height="130" src="http://go.pardot.com/l/73452/2015-08-27/25s4yp/73452/34338/wongs.png" style="width: 130px; height: 130px;" width="130"></td>
<td bgcolor="#f9f6f2" class="content" style="border: 0; font-family:Arial, Helvetica, sans-serif; font-size: 16px; line-height:22px; color: #414141; padding-right: 50px;">“We trust Pay4Later with our customers, as Pay4Later’s performance with them reflects on our brand, too. We find that customers get great care from the company when needed, and we couldn’t be happier."</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td align="center" bgcolor="#f9f6f2" style="padding: 20px 0;" width="100%" class=""><img src="http://go.pardot.com/l/73452/2015-08-27/25s4sf/73452/34320/line_half.png"></td>
</tr>
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td bgcolor="#f9f6f2" class="content" style="border: 0; font-family:Arial, Helvetica, sans-serif; font-size: 16px; line-height:22px; color: #414141; padding-left: 50px;">“We trust Pay4Later with our customers, as Pay4Later’s performance with them reflects on our brand, too. We find that customers get great care from the company when needed, and we couldn’t be happier."</td>
<td align="center" bgcolor="#f9f6f2" height="130" style="padding: 0 40px;" width="130" class=""><img height="130" src="http://go.pardot.com/l/73452/2015-09-07/26x153/73452/35954/home_leisure.png" style="width: 130px; height: 130px;" width="130"></td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td align="center" bgcolor="#f9f6f2" style="padding: 20px 0;" width="100%" class=""><img src="http://go.pardot.com/l/73452/2015-08-27/25s4sf/73452/34320/line_half.png"></td>
</tr>
<tr>
<td align="center" bgcolor="#f9f6f2" style="padding-top: 30px;" width="640">
<table align="center" bgcolor="#f9f6f2" style="border:2px solid #000000;" width="200">
<tbody>
<tr>
<td align="center" style="padding:10px 6px;" class=""><span style="font-family: 'Roboto', Helvetica, Arial, sans-serif !important;">SIGNUP NOW</span> </td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td align="left" bgcolor="#f9f6f2" class="content" style="padding: 50px 100px 0px 100px; border: 0; font-family:Arial, Helvetica, sans-serif; font-size: 16px; line-height:22px; color: #414141;" valign="top">To learn more about how your business can benefit from Pay4Later’s finance solutions you can reply to this email or call us on 0800 021 7150.</td>
</tr>
<tr>
<td align="left" bgcolor="#f9f6f2" class="content" style="padding: 50px 100px 0px 100px; border: 0; font-family:Arial, Helvetica, sans-serif; font-size: 16px; line-height:8px; color: #414141;" valign="top">
<p><span>Kind Regards,</span></p>
<p><span>The Pay4Later Team</span></p>
<p><span>0800 021 7150</span></p>
</td>
</tr>
<tr>
<td width="640">
<table align="center" bgcolor="#0092ce" border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td align="left" bgcolor="#0092ce" class="content" style="padding: 30px 100px 10px 100px; border: 0; font-family:Arial, Helvetica, sans-serif; font-size: 16px; line-height:8px; color: #ffffff;" valign="top" width="100%">
<p><span>Pay4Later Ltd</span></p>
<p><span>33 St Mary Axe</span></p>
<p><span>London, EC3A 8AG</span></p>
</td>
<td class=""><img alt="Twitter" border="0" height="30" src="http://go.pardot.com/l/73452/2015-09-02/26hq9t/73452/35156/twitter.png" style="width: 30px; height: 30px; border-width: 0px; border-style: solid;" title="Twitter" width="30"> </td>
<td class=""><img alt="Google" border="0" height="30" src="http://go.pardot.com/l/73452/2015-09-02/26hqr7/73452/35184/linkedIn.png" style="width: 30px; height: 30px; padding-left: 15px; border-width: 0px; border-style: solid;" title="Google" width="30"> </td>
<td class=""><img alt="RSS" border="0" height="30" src="http://go.pardot.com/l/73452/2015-09-02/26hqrp/73452/35186/mail.png" style="width: 30px; height: 30px; padding-left: 15px; padding-top: 7px; padding-right: 20px; border-width: 0px; border-style: solid;" title="RSS" width="30"> </td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td align="center" bgcolor="#ebebeb" class="content" style="padding: 10px 100px 0px 100px; border: 0; font-family:Arial, Helvetica, sans-serif; font-size: 14px; line-height:22px; color: #414141;" valign="top">If you don't want to receive more mails, just click here</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<div style="display:none; white-space:nowrap; font:15px courier; color:#ffffff;">
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
</div>
</body>
</html>

As far as I know there really isn't any kind of scaling for emails in outlook, they take a fixed size and then keep it that way. As has been mentioned you can specify widths in attributes, and this will force that content to the size you specify.
One fairly popular way is starting with a fixed size and then setting elements of the email to have a % max width; this means that outlook will be happy with the fixed widths, and clients which support % widths will also be able to display yor content in a responsive way.

dompdf - blank pages are generated when setting td width - dompdf 0.6.1 v3

I'm trying to create table with three equal columns
Table width is set to 100%
When I'm trying to set width: 33% on TABLE TD element dompdf generates 1+ blank page(s) before generates the table. The table generates as expected only those blank pages are present in pdf document.
PDF FILE with width: 33%: http://www.docdroid.net/b5cf/with-width.pdf.html
I need to have equal columns on this table and cant achive it with width="33%" or style="table-layout: fixed" without geting the blank pages befor the table.
The HTML looks like this
<table class="outer_tab">
<tbody>
<tr class="outer_tr">
<td valign="top" class="outer_td">
<table class="inner_tab">
<tbody>
<tr>
<th valign="top" colspan="2">I.</th>
</tr>
<tr>
<td valign="top" class="inner_td">
<span class="separator">Morfologia ogólna</span>
</td>
</tr>
<tr>
<td valign="top" class="inner_td">
<span class="lp">1.
<span style="font-weight: bold;"> HCT </span> - <span class="inner_td_text">Hematokryt</span>
</span>
</td>
</tr>
</tbody>
</table>
</td>
<td valign="top" class="outer_td">
<table class="inner_tab">
<tbody>
<tr>
<th valign="top" colspan="2">II.</th>
</tr>
<tr>
<td valign="top" class="inner_td">
<span class="separator">Morfologia ogólna</span>
</td>
</tr>
<tr>
<td valign="top" class="inner_td">
<span class="lp">1.
<span style="font-weight: bold;"> HCT </span> - <span class="inner_td_text">Hematokryt</span>
</span>
</td>
</tr>
</tbody>
</table>
</td>
<td valign="top" class="outer_td">
<table class="inner_tab">
<tbody>
<tr>
<th valign="top" colspan="2">III.</th>
</tr>
<tr>
<td valign="top" class="inner_td">
<span class="separator">Morfologia ogólna</span>
</td>
</tr>
<tr>
<td valign="top" class="inner_td">
<span class="lp">1.
<span style="font-weight: bold;"> HCT </span> - <span class="inner_td_text">Hematokryt</span>
</span>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
CSS looks like this:
<style type="text/css">
#page { margin: 1cm; }
body {
background-image: url('<?php echo 'module/Application/assets/pdf/images/faktury-tlo-small.png'; ?>');
background-repeat: no-repeat;
background-size: 20%;
background-position: center center;
}
table.outer_tab, table.inner_tab { border-spacing: 0; width: 100% }
table.inner_tab th { text-align: center; background: #BDC0BF; font-size: 15px; font-weight: bold; padding: 2px 0; }
td.outer_td { border-top: 1px solid #BDC0BF; border-left: 1px solid #BDC0BF; /*width: 33%;*/ border-bottom: 1px solid #BDC0BF; }
td.outer_td:last-of-type { border-right: 1px solid #BDC0BF; }
tr.outer_tr:last-of-type td.outer_td { border-bottom: 1px solid #BDC0BF; }
span.lp { padding-left: 10px; display: block; }
span.inner_td_text { /*padding-right: 10px;*/ }
span.separator { font-weight: bold; text-align: center; font-size: 15px; padding-bottom: 10px; display: block; }
.footer { position: fixed; bottom: 0px; width: 100%; font-size: 11px; }
</style>
The line cosing problems is:
td.outer_td { border-top: 1px solid #BDC0BF; border-left: 1px solid #BDC0BF; /*width: 33%;*/ border-bottom: 1px solid #BDC0BF; }
If in this td.outer_td has width: 33% the PDF has blank pages before the table
Anyone has any idea why this is happening?
Any solutions to this problem?

Resources