Severe misplacing of table and bullet list: superimposed over other text

[WaterSibilantFalling]

Given CSS of

<style type="text/css">



table {
	page-break-inside: avoid; 
	table-layout: fixed;
	width: 140mm;
	word-wrap: break-word;	
}
table th {
       	font-weight: bold;
	border-bottom: 1px black; 
	background-color: #fff;
	color:blue; 
}	
table tr, td{
	font-weight: normal;
	border-bottom: none;  
	text-align: left; 
	background-color: #fff;
}
table tr:nth-child(2n) {
	background-color: #888;
}

/* --------------- */

.tableAsList table thead th{
        font-weight: 100; 	
	color: black;  
}
.tableAsList table tr{
        font-weight: normal; 	
	color: black;  
}
.tableAsList table td {
	font-color:black;
        font-weight: normal; 	
	color: black;  
}

.tableAsList table {
	table-layout: fixed;
	width: 140mm;
	color: black;  
}

</style>

The html

<p>A technician: </p>

<ul>
<li>Gives a laptop an IP address within the site's router's internal IP address range (192.168.x.y)</li>
<li>Sets the laptop's gateway IP address to that router's IP address</li>
<li>Physically connects the laptop to a 'local' port on the router</li>
<li>Using putty, connects over ssh to the router's IP address
<br></li>
</ul>

<div class="tableAsList">

<table>
<thead>
<tr>
  <th align="left">Username</th>
  <th align="left">Bananarama</th>
</tr>
</thead>
<tbody>
<tr>
  <td align="left">Password</td>
  <td align="left">Stored in Lastpass</td>
</tr>
</tbody>
</table>

</div>


<p>The technician: </p>

<ul>
<li>Successfully pings one or more local devices</li>
<li>Pings the Warrior server's IP address 10.100.59.75 </li>
<li>Now continues with the checks for each piece of equipment at the site</li>
</ul>

<p>The techician now checks the site's equipment as described in the rest of this document. </p>

<p>Note that, when on-site, Warrior is not used: Instead ping and connect to devices from a laptop terminal such as Putty. </p>

is converted into a pdf with the second bullet list and the table superimposed over the first bullet list.

My machine:

Windows 10 version 16250.something
Using "Linux" msys64 shell. 


$ pip3 show weasyprint
Name: WeasyPrint
Version: 44
Summary: The Gorgeous Document Factory
Home-page: https://weasyprint.org/
Author: Simon Sapin
Author-email: [email protected]
License: BSD 3-Clause License
Location: c:\users\stephenm\appdata\local\programs\python\python37\lib\site-packages
Requires: cairocffi, cssselect2, CairoSVG, tinycss2, Pyphen, cffi, html5lib
Required-by:

[Tontyna]

Cannot reproduce the misplacements with the given CSS and HTML.
I assume you stripped out the offending style rules...

[liZe]

It may be a duplicate of #37 / #415.

I assume you stripped out the offending style rules...

@Tontyna Yes, I suppose the bug happens because of unrelated CSS rules.

@AbsurdMagpieScrutinies Thank you for taking the time to report this issue. Could you please provide the whole HTML and CSS documents?

[WaterSibilantFalling]

I have found the problem, so I don't (?) need to supply the complete HTML and CSS?

The cause:

• I have page headers on each page, using @page
• In the header there is a table.
• The closing </table> tag had somehow lost its '/', so became a <table> tag.
• So the first table in the document (or the first table appearing in the html after the page header's table) got incorporated (until its </table> tag), once only, into the page-header table.
• In the final PDF, this occurred once only, on the page (the second page) that the incorrectly-incorporated table would have appeared. This helped me to not consider the page header as being at fault. Actually, the following <ul> list also floated, must have been incorporated in the @page's header.

So this one table or list and table were floating.

I didn't even consider the page header as playing a role because the header worked fine on other pages. In retrospect, as the table in the text kinda floated, and the headers are kinda floated, maybe I should have guessed. I didn't.

When I (accidentally) discovered that the @page's header's table's closing </table> was corrupt, the problem disappeared.

Sorry for the disturbance, closing this.

It might be a big ask, but maybe - for others - any "open" tags in whatever goes into the header should be artificially closed. I can't imagine any scenario where this behavior would be desired.

[Tontyna]

@AbsurdMagpieScrutinies I'm stunned. What's your trick to incorporate a <table> into a @page header? As far as I know there is no CSS way to achieve that.

[WaterSibilantFalling]

Umm, I used css and html:

@page { size: A4;

/*
 *     < snip >
 *
 */


/*
 *  Not this. 
 *  This is just sticking content into the @page's margins
 *
 */ 


	@bottom-left { 
		font-size: 8pt;
		font-family: "Franklin Gothic Book";
		font-weight: bold; 
		content: "Doc ID: {{doc_id}}"; 
		border-top: 1pt solid rgb(167,25,48);
		width: 20%;
		} 
	@bottom-center {
		font-size: 8pt;
		font-family: "Franklin Gothic Book";
		font-weight: bold; 
		content: "{{todays_date}}    Version:{{version_number}}";
		border-top: 1pt solid rgb(167,25,48);
		width: 60%;
		} 
	@bottom-right {
		font-size: 8pt;
		font-family: "Franklin Gothic Book";
		font-weight: bold; 
		content: "Page " counter(page) " of " counter(pages); 
		border-top: 1pt solid rgb(167,25,48);
		width: 20%; 
		} 



/* 
 *  Here: 
 *
 *  I used 
 *      content: element(some-name-here) 
 *
 */  

	/* --- page header --- */
	@top-left { 
		content: element(pageHeader); 
		} 
}

/*
 *
 *  Then I made a class or Id with
 *      position: running(some-name-here)
 *
 */      

#pageHeader {
	display: block; 
	position: running(pageHeader);             /* takes out of the normal document */ 
	font-style: bold; 
	height: 20mm; 
} 


/*
 *
 *  This is the CSS for the page header
 *  This is not really the point, but for completeness
 *
 */  


.headerTable  {
	/* overriding the default table sizing */ 
	display: block; 
	/* force offset (fixed) within parent div */
	position: fixed; 
	left: 0px;
	top: -25mm; 
	table-layout: fixed;
	width:100%; 
	background-color: #f0f0f0;
	/* wrapping of text in cells */
	overflow:hidden; 
	/* padding, borders, margins */ 
	padding:0px 0px; 
	/* border-bottom: 1px solid black; */
/*	margin-bottom: 30mm; */
}
.headerTable td{	/* the first column */ 
	font-family:"Franklin Gothic Book"; 
	font-size:16px; 	
	font-weight: normal; 
	padding:0px 0px; 
	word-break:normal; 
	background-color: #f0f0f0;
	border-bottom: None; 
}

/* override default table's "every-line underline" */ 
.headerTable th, .headerTable tr, .headerTable td{
	/* font-weight: normal; */
	border-bottom: None; 
}

/* override the default column widths */  
.headerTable tr td:first-child {/* column 1 */
	width: 160mm; 
}
.headerTable tr td:first-child + td{/* column 2 */
	width: auto;
}

.headerTable .image_box{
	border-color:inherit; 
	text-align:right; 
	vertical-align:top;
}
/* Department name, GNS */
.headerTable .h_row_1{ 
	font-weight: bold; 
	font-style: normal;
	border-color:inherit; 
	text-align:left; 
	vertical-align:top;
	font-style: bold; 

}
/* this SOP's/ Doc's name */
.headerTable .h_row_2 {
	font-weight: bold; 
	font-style: italic;
	vertical-align: top; 
	text-align: left; 
}
	

And then, in the html (which I - a program - built up out of a few pieces) there is

<!-- this is not part of the html body, nor part of the layout calcs   -->
<!-- the pageHeader id has postiton: element(pageHeader), removing its -->
<!-- content from the page proper                                      -->
<!-- This is each page's header                                        -->

<div id="pageHeader">
    <table class="headerTable">
    <tr>
        <td class="h_row_1">
            Te Pū Ao GNS Science, Natural Hazards; GeoNet Network Dept<br>
        </td>
        <td class="image_box" rowspan="2">
		<img src="{{gns_logo_path}}"
                style="width:51px; height:86px; align:right" alt="GNS Logo"/>
        </td>
    </tr>
    <tr>
        <td class="h_row_2"> {{H1_Title}} </td>
    </tr>
    </table>
</div>

That's it.

For the record, it was that last </table> tag that somehow had lost its "/" that made me open this ticket, thinking that there was something wrong with weasyprint. There wasn't .

[Tontyna]

@AbsurdMagpieScrutinies You're aware that WeasyPrint doesn't support running() and element() -- cf. #598 -- and your #pageHeader isn't repeated as a page header on every @page but rendered once as a regular <div> within the page content?

[WaterSibilantFalling]

The reason that I'm not aware of WeasyPrint doesn't support running() and element() is . . . that they work fine in Weasyprint.

• The header is repeated on every page
• The header's <div> is removed from page context.
• If running( ) and element( ) aren't supported then weasyprint does a pretty good job of supporting them.

You are telling me what works? Well, ok.

Maybe you could have a look at these pdfs

• https://github.com/AbsurdMagpieScrutinies/markdown-tests/tree/master/PDFs
  generated, using weasyprint just as I have told you, from these
• https://github.com/AbsurdMagpieScrutinies/markdown-tests/tree/master/markdown_files
  markdown files.

[liZe]

You are telling me what works? Well, ok.

😄

@Tontyna is actually right: running doesn't work. The header is removed from the flow (not from the page) and repeated on each page because of the position: fixed rule set on the table.

[Tontyna]

Alas, no magic involved. What a pity 😞