My code does work properly in Outlook 15.33 for Mac. Buttons take the height and width of the linked text in the Windows version of Outlook. I have tried setting the buttons as tags and tags, but I have the same formatting issues on the Windows version of Outlook.
<table class="fullwidth260" border="0" width="215" cellspacing="0" cellpadding="5" align="left">
<tbody>
<tr>
<td valign="middle">
<a class="quickLinks" href="http://www.mba.org" style="display: flex; text-align: center; padding: 10px 20px 10px 20px; color: #496f8d; font-family: Arial, san-serif; size: 10pt; line-height: 1.2; border: 1px solid #c8d3dc; background-color: #e3e9ed; text-decoration: none; height: 60px; width: 160px; justify-content: center; flex-direction: column;">STATE RELATIONS ONLINE COMMUNITY</a>
</td>
</tr>
</tbody>
</table>
Your designing for email, not for the Web. Outlook non-Mac does not fully support the CSS attributes flex or padding.
Outlook is a major pain to get buttons to display correctly. I'd give you more advice, but you didn't post your existing code which makes it hard to make suggestions on how to offer better advice to fix your issues.
Good luck.
Give this method a try. I found it to work on all email clients that i know off. You will need to change the background color of the td, background color of the anchor tag, stroke color and the width of the button.
<table border="0" cellpadding="0" cellspacing="0" style="margin:0 auto;">
<tr>
<td align="center" bgcolor="#87be45" width="150" style="-moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px;">
<a href="http://www.example.com" style="padding: 10px;width:150px;display: block;text-decoration: none;border:0;text-align: center;font-weight: bold;font-size: 15px;font-family: sans-serif;color: #ffffff;background: #87be45;border: 1px solid #87be45;-moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px;line-height:17px;" class="button_link">
Get Started!
</a>
</td>
</tr>
</table>
Let me know if this helps.
Related
I have been digging all over and experimenting with different attributes, but I am still no closer to getting Outlook (v2005) to respect <td> cell height. I have a simple table being used through Gravity forms in Wordpress which is handling all the overhead. The <td> is set o have the mso-line-height-rule line height and font size as mentioned several times elsewhere, but comes out as below.
<table border="0" cellpadding="0" cellspacing="0" width="80px" width="80" style="border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt;">
<tbody>
<tr>
<td style="background-color: red; height: 30px; font-size: 30px; mso-line-height-rule: exactly; line-height: 30px; padding: 0 !important; margin: 0 !important;" height="30">
Hello
</td>
</tr>
<tbody>
</table>
If anyone could help it would be greatly appreciated.
Screenshot of Outlook version:
I have a emailTemplate that I want to have a light background.
But Outlook in darkMode messes the css up. Sure there is a switch in outlook to "turn the ligths on" but I want to have white background all the time because everyone that gets the email will not know how to do that switch.
I have tried to add bgcolor to the table tag and the td tag and added backgroundColor to inline style, but without success.
I have also tried to force the button to have the same yellow color in darkmode, but it switches no matter what.
I have also tried to search the internet but cant anything that covers outlook darkmode.
https://litmus.com/blog/email-designers-next-challenge-apple-dark-mode
<table bgcolor="#ffffff" style="width:70%;" align="center" border="0" cellspacing="0" cellpadding="0"> <tbody> <tr> <td bgcolor="#ffffff">
<tr>
<td align="center" style="
display: inline-block;
background-color: #ffdd00;
border-radius: 3px;
padding: 18px 0px;
width: 100%;
text-align: center;
cursor: pointer;
">
<a href="https://my.hogia.se" target="_blank" style="
text-decoration: none;
text-transform: uppercase;
color: #000;
font-family: Lato, Trebuchet, Verdana, Tahoma, Lucida Sans Unicode, Arial;
font-weight: 700;
font-size: 14px;
letter-spacing: 0.0625em;">Kom igång</a>
</td>
</tr>
StandardMode:
DarkdMode:
Outlook365 and Outlook.com dark mode can't be overridden because Microsoft adds !important inline to every background color it finds including the system. I think they added this in June 2021.
I'm setting up a new email signature for my client which needs to be responsive .
I tried out one layout which includes div , tables etc which works out good on desktops but not on mobiles .
Below is one such sample but the email appears as same is desktop & mobile with the cells / divs shifting one under the other .
As a part of my research , i tried using this email boilerplate which ended up in the same way . - https://github.com/seanpowell/Email-Boilerplate
<!--[if gte mso 9]>
<table cellspacing=0><tr><td style="font-family: Arial; font-size: 10pt; color: #fff; background-color: orange; width: 250px; height: 100px; padding: 3px; vertical-align: top">
<![endif]-->
<div style="float: left; font-family: Arial; font-size: 10pt; color: #fff; background-color: orange; width: 250px; height: 100px; padding: 3px; vertical-align: top">
<strong>Administrator</strong><br>Phone {qwfqwfcqwdqwfqfgqwfqwbfjqnwjkfqnwjfbqiwnf qwnfiquwnqwnfiqnwifjnqwfinqwifnqwjinfqjiwnfijqwnf}<br>Email {qwfqwfqwcqwfqwfqwfdqwcrqwrqwcrqwrqwrcqwrxqwrqwcxqrwqxrqwxqwx}
</div>
<!--[if gte mso 9]>
</td><td style="font-family: Arial; font-size: 10pt; color: #fff; background-color: red; width: 250px; height: 100px; padding: 3px; vertical-align: top">
<![endif]-->
<div style="float: left; font-family: Arial; font-size: 10pt; color: #fff; background-color: red; width: 250px; height: 100px; padding: 3px; vertical-align: top">
<strong>qwfqwfqwdqw fqwfqwfqwdfqwdqwfqwfqwdqwdqwdqw</strong>
</div>
<!--[if gte mso 9]>
</td></tr></table>
<![endif]-->
https://jsfiddle.net/623y57p1/1/
Have a look at the demo i made . This is responsive in browsers , but not in outlook .
I created a sample code that works with Outlook. The two columns of this email footer will display side-by-side if the viewing window is wider than 580px. If it goes below that width, it will revert to two stacked columns. You can set the width breakpoint by adjusting <td width="290">.
<table align="center" role="contentinfo" cellspacing="0" cellpadding="0" border="1" width="100%" style="margin: 0 auto;">
<tr>
<td width="290" style="direction: ltr !important; display: inline-block;">
Column A
</td>
<td width="290" style="direction: ltr !important; display: inline-block;">
Column B
</td>
</tr>
</table>
Please keep in mind a few caveats:
Outlook 2007-2019 does not support responsive email. There is no support for #media queries.
The width for the table must be set to <table width="100%">.
The width for the table cells to 290 because the maximum width for an Outlook viewing window is 580px.
You can turn off <table border="1"> It's on for demonstration purposes.
<table role="contentinfo"> supports screen readers. Please leave it to help visually impaired users know about the structure of your email message.
https://jsfiddle.net/wallyglenn/w0s4xmc0/60529/
Good luck.
In a nutshell I'm using exact target content builder, I uploaded the code into litmus, and of course Outlook 07,10,13 isn't recognizing width 100%. I have attached a screen shot as well as the snippet please assist.
<table width="100%" cellspacing="0" cellpadding="0"><tr><td align="center"><img data-assetid="35955" src="http://image.email-nyaaa.com/lib/fe661570736c04747414/m/3/0edcfa8c-25ad-4b12-8d69-501bde9332ef.jpg" alt="Grocery Discounts" height="45" width="900" style="height:45px;width:900px;display: block;padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; text-align: center;"></td></tr></table>
Stack overflow wouldnt allow me to paste the code as well.The offending line was 296. You or the platform had placed a 10px padding around the two column block (extra virgin & long grain one). Once you remove it then it works.
Snippet:
<table cellpadding="0" cellspacing="0" width="100%" class="stylingblock-content-wrapper"><tbody><tr><td class="stylingblock-content-wrapper camarker-inner"><table cellspacing="0" cellpadding="0" style="width: 100%;"><tbody><tr><td><table cellspacing="0" cellpadding="0" style="width: 100%;"><tbody><tr><td class="responsive-td" valign="top" style="width: 50%;"><table cellpadding="0" cellspacing="0" width="100%" class="stylingblock-content-wrapper" style=""><tbody><tr><td class="stylingblock-content-wrapper camarker-inner"><table width="100%" cellspacing="0" cellpadding="0"><tbody><tr><td align="center"><a href="http://click.email-nyaaa.com/?qs=76462b8de2999fa51b1a05d5c4c618fd5281691fac5b7c3f7f4da37bd7753344423cf6706940a6d23b98ebbb0d4e4c1b0b0b92b83edc3e7a" title="" data-linkto="https://">
<img data-assetid="35860" src="http://image.email-nyaaa.com/lib/fe661570736c04747414/m/3/bf2a32d2-c271-4dd0-88d4-fa1ed13a0668.jpg" alt="$1.00 off California Olive Ranch Olive Oil / $1.00 off Lundberg Family Farms Organic Brown Rice" height="auto" width="100%" style="height:auto;width:100%;display: block;padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; text-align: center; font-size: 13px;"></a></td></tr></tbody></table></td></tr></tbody></table></td><td class="responsive-td" valign="top" style="width: 50%;"><table cellpadding="0" cellspacing="0" width="100%" class="stylingblock-content-wrapper" style=""><tbody><tr><td class="stylingblock-content-wrapper camarker-inner"><table width="100%" cellspacing="0" cellpadding="0"><tbody><tr><td align="center">
<a href="http://click.email-nyaaa.com/?qs=76462b8de2999fa51b1a05d5c4c618fd5281691fac5b7c3f7f4da37bd7753344423cf6706940a6d23b98ebbb0d4e4c1b0b0b92b83edc3e7a" title="" data-linkto="https://">
<img data-assetid="35987" src="http://image.email-nyaaa.com/lib/fe661570736c04747414/m/3/3877ff31-7a70-4583-8af9-8cf78ef2032d.jpg" alt="$1.00 off V8 Original Vegetable Juice & Naked Juice Smoothie" height="auto" width="100%" style="height:auto;width:100%;display: block;padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; text-align: center;"></a></td></tr></tbody></table></td></tr></tbody></table></td></tr></tbody></table></td></tr></tbody></table></td></tr></tbody></table>
You can replace that code on your template or copy the code from fiddle that is in the comment.
Here is the result of the fix.
Cheers
Outlook doesn't really like width="100%" and it doesn't like inline CSS. So set your width on the image to width="920" and in style, keep the width:100%; which other browsers will use.
This is the table as an example:
<table width="100%" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td align="center">
<img data-assetid="35864" src="http://image.email-nyaaa.com/lib/fe661570736c04747414/m/3/b1be6e76-4a9f-4e7a-89cc-5adf22373d62.jpg" alt="View your current grocery savings" height="auto" width="920" style="height:auto;width:100%;display: block;padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; text-align: center;">
</td>
</tr>
</tbody>
</table>
I should add that your hero image is 900 pixels, which is 100 pixels wider than some email clients like Outlook and Gmail really support. Keep that in mind if you're having issues with other email clients.
You should look at your emails on an iPhone because it's a mess. The same with AOL. In every desktop email client, you have alignment issues with the Discounts Rewards banner.
Good luck.
XmlWorker does not recognize border-bottom on table cell.
This is my code:
<table>
<tbody>
<tr>
<th style="width: 20%; height: 40px; vertical-align: top; border-bottom: 1px solid gray">Your name</th>
<td style="width: 80%; border-bottom: 1px solid gray"></td>
</tr>
<tr>
<th style="height: 40px; vertical-align: top; border-bottom: 1px solid gray">Your lastname</th>
<td style="border-bottom: 1px solid gray"></td>
</tr>
</tbody>
</table>
I'm testing using this official tool:
http://demo.itextsupport.com/xmlworker/
(Click "html" button, under "font size", and paste code)
I'm also testing using iTextSharp + MvcRazorToPdf (two C# libraries).
Question:
How can I get the border-bottom to work?
Edit:
Acording to this compatibility summary: http://demo.itextsupport.com/xmlworker/itextdoc/CSS-conformance-list.htm, the css property border-bottom should work fine with the html element td (cell)
XMLWorker does not support for shorthand CSS properties in case side specific border styles. The global property "border" should be supported. It looks like a typo in the conformance list.
Please use the property full names instead:
<td style="... border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: gray" ...>