hello,
we have stumbled upon a weird bug/behaviour when dealing with columns and column-span.
Our input files have several cascaded <section> elements which consist of a <div> element, that holds the actual content of this section and is probably followed by other <section> child elements (omitted in this simplified example).
The first element of the <div> always is a <h1> element. In a two-column layout we want the <h1> to span over both columns. We also want to specify a margin-bottom for the <div> element so there is space between the content of this <section> and it's possible child <section> elements.
But when we do this the margin-bottom is not only applied to the <div> element, but also the <h1> element, creating a margin where none should be.
Why is there a margin below the <h1> elements? There is none defined. It look as if the margin-bottom of the <div> element is applied to the <h1> elements.
The input file:
I have also attached the test file to reproduce the problem as well as the output PDF on my local machine.
Greetings,
John
we have stumbled upon a weird bug/behaviour when dealing with columns and column-span.
Our input files have several cascaded <section> elements which consist of a <div> element, that holds the actual content of this section and is probably followed by other <section> child elements (omitted in this simplified example).
The first element of the <div> always is a <h1> element. In a two-column layout we want the <h1> to span over both columns. We also want to specify a margin-bottom for the <div> element so there is space between the content of this <section> and it's possible child <section> elements.
But when we do this the margin-bottom is not only applied to the <div> element, but also the <h1> element, creating a margin where none should be.
Why is there a margin below the <h1> elements? There is none defined. It look as if the margin-bottom of the <div> element is applied to the <h1> elements.
The input file:
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css" media="all">
body {
background: #00a1a1;
margin: 0;
padding: 0;
}
h1 {
margin: 0;
column-span: all;
}
article > section {
column-count: 2;
}
section.level-1 {
margin-bottom: 20mm;
}
section.level-1 > div {
margin-bottom: 10mm;
}
</style>
</head>
<body>
<article>
<section class="level-1">
<div>
<h1>First headline</h1>
<p>It is a period of civil war. Rebel spaceships, striking from a hidden base, have won their first victory against the evil Galactic Empire. During the battle, Rebel spies managed to steal secret plans to the Empire's ultimate weapon, the DEATH STAR, an armored space station with enough power to destroy an entire planet. Pursued by the Empire's sinister agents, Princess Leia races home aboard her starship, custodian of the stolen plans that can save her people and restore freedom to the galaxy...</p>
</div>
</section>
<section class="level-1">
<div>
<h1>Second headline</h1>
<p>It is a period of civil war. Rebel spaceships, striking from a hidden base, have won their first victory against the evil Galactic Empire. During the battle, Rebel spies managed to steal secret plans to the Empire's ultimate weapon, the DEATH STAR, an armored space station with enough power to destroy an entire planet. Pursued by the Empire's sinister agents, Princess Leia races home aboard her starship, custodian of the stolen plans that can save her people and restore freedom to the galaxy...</p>
</div>
</section>
</article>
</body>
</html>
I have also attached the test file to reproduce the problem as well as the output PDF on my local machine.
Greetings,
John
Edited by John
