Forum Bugs

border-styl=none causes gap in adjacent border

truemetal
There is a table (created by a user in a template editor), which allows user to edit border styles for each cell (example below). So when two "normal" cells meet, one of them has border-style=none for one of the sides. E.g. in the example below the "invoice #" cell has border-left-style:none, since to the left there is "Date" column.

The document is fine in the browser (firefox, IE) - but in PDF it has those annoying gaps near the border, which is supposed to be missing. Is there any way around?

<TABLE style="top:11.90mm;position:absolute;left:124.57mm;width:70.09mm;height:17.46mm;z-index:501;table-layout:fixed;" cellSpacing="0mm" id="">
<TR>
<TD style="color:black;background-color:transparent;border-right-color:black;border-left-color:black;border-top-color:black;border-bottom-color:black;border-right-style:solid;border-left-style:solid;border-top-style:solid;border-bottom-style:none;border-right-width:0.26mm;border-left-width:0.26mm;border-top-width:0.26mm;border-bottom-width:0.26mm;padding-right:1.32mm;padding-left:1.32mm;padding-top:1.32mm;padding-bottom:1.32mm;text-align:center;vertical-align:middle;top:0.00mm;left:0.00mm;width:35.70mm;height:8.73mm;font-family:serif;font-size:10pt;font-style:;font-weight:;text-decoration:">Date</TD>
<TD style="color:black;background-color:transparent;border-right-color:black;border-left-color:black;border-top-color:black;border-bottom-color:black;border-right-style:solid;border-left-style:none;border-top-style:solid;border-bottom-style:none;border-right-width:0.26mm;border-left-width:0.26mm;border-top-width:0.26mm;border-bottom-width:0.26mm;padding-right:1.32mm;padding-left:1.32mm;padding-top:1.32mm;padding-bottom:1.32mm;text-align:center;vertical-align:middle;top:0.00mm;left:35.70mm;width:34.38mm;height:8.73mm;font-family:serif;font-size:10pt;font-style:;font-weight:;text-decoration:">Invoice #</TD>
</TR>
<TR>
<TD style="color:black;background-color:transparent;border-right-color:black;border-left-color:black;border-top-color:black;border-bottom-color:black;border-right-style:solid;border-left-style:solid;border-top-style:solid;border-bottom-style:solid;border-right-width:0.26mm;border-left-width:0.26mm;border-top-width:0.26mm;border-bottom-width:0.26mm;padding-right:1.32mm;padding-left:1.32mm;padding-top:1.32mm;padding-bottom:1.32mm;text-align:center;vertical-align:middle;top:8.73mm;left:0.00mm;width:35.70mm;height:8.73mm;font-family:serif;font-size:10pt;font-style:;font-weight:;text-decoration:"><VAR id=Invoices.issue_date title=Header.Date sampleText="November 1, 2002">November 1, 2002</VAR> <BR></TD>
<TD style="color:black;background-color:transparent;border-right-color:black;border-left-color:black;border-top-color:black;border-bottom-color:black;border-right-style:solid;border-left-style:solid;border-top-style:solid;border-bottom-style:solid;border-right-width:0.26mm;border-left-width:0.26mm;border-top-width:0.26mm;border-bottom-width:0.26mm;padding-right:1.32mm;padding-left:1.32mm;padding-top:1.32mm;padding-bottom:1.32mm;text-align:center;vertical-align:middle;top:8.73mm;left:35.70mm;width:34.38mm;height:8.73mm;font-family:serif;font-size:10pt;font-style:;font-weight:;text-decoration:"><VAR id=Invoices.invoice_number title=Header.Invoice&nbsp;Number sampleText="25">25</VAR> <BR></TD>
</TR>
</TABLE>
  1. html.png2.5 kB
    How it looks in browser
  2. pdf.png9.1 kB
    How it looks in PDF
mikeday
How about enabling collapsing borders, with "border-collapse: collapse" on the table?
truemetal
mikeday wrote:
How about enabling collapsing borders, with "border-collapse: collapse" on the table?

Thanks, that helped!

Makes me worried though about other possible issues like this (when user sees one thing in HTML, but it renders differently in PDF). Which tool do you recommend to edit / preview HTML, so it would match as close as possible to the result PDF?
mikeday
That's difficult to say, as even different browsers can render things slightly differently; the web is not really an exact medium.
kevin316
truemetal wrote:
mikeday wrote:
How about enabling collapsing borders, with "border-collapse: collapse" on the table?

Thanks, that helped!

Makes me worried though about other possible issues like this (when user sees one thing in HTML, but it renders differently in PDF). Which tool do you recommend to edit / preview HTML, so it would match as close as possible to the result PDF?


Hi. I have tried this fix and it looks ok in pdfs, but only if opened in adobe's official pdf reader. if I try to open the pdf in a third-party software, then it has those gaps.

Thanks for helping me out, and thanks for making this great website for us to ask questions.

mikeday
So you have tried collapsing the table borders? Which PDF reader are you using?