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" ...>
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 trying to do inline styling with jade mixins following the answer provided in this link but it doesn't work the way it is supossed to.
I'm using this jade:
mixin centerImg(margin,imgWidth,imgWidthpx,imgId)
table(border="0", cellpadding="0", cellspacing="0", width="640")
tr
td(width=margin)
td(width=imgWidth)
a.antiHand(href='#', style='cursor: none !important; pointer-events: none; border-style: none; border: none; border-color: transparent;')
img(alt="", style="width:#{imgWidth};max-width:#{imgWidthpx};display:block;margin:0")(width=imgWidth)(src=imgId)
td(width=margin)
+centerImg(200,240,"240px",'https://media.giphy.com/media/SzzNGHZWHCBqw/giphy.gif')
and this is what i get:
<table border="0" cellpadding="0" cellspacing="0" width="640">
<tr>
<td width="200"></td>
<td width="240"><a class="antiHand" href="#" style="cursor: none !important; pointer-events: none; border-style: none; border: none; border-color: transparent;"><img alt="" style="width:#{imgWidth};max-width:#{imgWidthpx};display:block;margin:0" width="240" src="https://media.giphy.com/media/SzzNGHZWHCBqw/giphy.gif"/></a></td>
<td width="200"></td>
</tr>
</table>
any ideas?
This code:
style="width:#{imgWidth};max-width:#{imgWidthpx};display:block;margin:0"
Should change like this:
style=`width:${imgWidth};max-width:${imgWidthpx};display:block;margin:0`
I think this works!
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.
On our email there is a menu and we would like a border (pipe) between each of the items. I have tried putting in border-right: 1px solid #ffffff in a couple of different places with no luck. How and or where does the border code go?
this is what the code looks like:
<div block="editable" name="Navigation Link 2" description="Style With - color:#FFFFFF; text-decoration:none;" id="navlink2" key="navlink2" display="link">Help</div>
</td>
<td align="center" valign="top" style="display: inline-block; padding: 5px 10px; font-family: Arial, Helvetica, sans-serif; font-size: 14px; color: #FFFFFF; border-right:#FFF>
Your HTML doesn't seem complete, you are missing an end quote on your style attribute, and you should really be doing style within a CSS file.
Other than that, your HTML is using border-right:#FFF - you should be using something like border-right: solid #FFF;
Note the style part (solid), you can also use dashed, double, etc... but the default is none so you'll have to specify something.
Border Style reference
Fiddle Demo
If you are still having an issue, it's probably something wrong with your dom structure and you should post a more complete picture.
smerny is right about your code being messy. If you want html to render even remotely right via email you need to make sure that your html is clean. Validators (http://validator.w3.org/) can help with this. There are lots of pit falls to consider when writing html for an email, more than I can get into here, but to address your specific problem one of these methods should work:
Method 1:
<table>
<tbody>
<tr>
<td style="border-right: solid"> Help </td>
<td style="border-right: solid"> Lorem </td>
<td style="border-right: solid"> Ipsum </td>
</tr>
</tbody>
</table>
Method 2:
<style>
td {
border-right: solid;
}
</style>
<table>
<tbody>
<tr>
<td> Help </td>
<td> Lorem </td>
<td> Ipsum </td>
</tr>
</tbody>
</table>
Fiddle