Log in / Register

Forum › Bugs

borders and rules overlap floats

johnathonwright
For the following HTML, prince generates an HR that overlaps (... underlaps? ) the sample image which floats left. But it should not. I'm using 10.7. Any ideas?

jw

<html>
  <head>
   <style type='text/css'>
      .image-container {
        float: left;
      }

      .with-border {
        border-bottom: 6px solid lightblue;
      }

      .clearfix {
        clear: both;
      }

      .important { color: red; font-weight: bold; }
    </style>
  </head>
  <body>
    <h1>Using Border</h1>
    <div class="image-container">
      <img src="images/sample-image.png" />
    </div>
    <div class="passage">
      <h3 class="passage-heading with-border">Passage Heading</h3>
      <p>Annoying but not unexpected: The border-bottom for the h3 above over (or under?)-laps the image floating on the left. Suboptimal but Prince does what browsers do.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>



    <div class="clearfix"></div>



    <h1>Using Horizontal Rule</h1>
    <div class="image-container">
      <img src="images/sample-image.png" />
    </div>
    <div class="passage">
      <h3 class="passage-heading">Passage Heading</h3>
      <hr></hr>
      <p class="important">The hr above should not be like the border. It should respect float, and it does in all browsers.</b></p>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>
  </body>
</html>
  1. prince_misbehaving_with_hr.png‎ 119.1 kB ‎
    HTML on left; Prince's PDF on right.
hallvord
Interesting issue. Reminds me of http://www.princexml.com/forum/topic/3517/block-borders-do-not-respect-floated-dt

Thanks for posting markup, this is very helpful to understand the issue. I've simplified your test somewhat and added it to my miscellaneous-testcases repository (hope you don't mind).

Announcement: repos for tests/utils

  1. hr-element-next-to-float-001.pdf‎ 41.1 kB ‎
    PDF generated from test case
johnathonwright
@hallvord: Thanks. Do you have v11? Can you tell whether that version is affected?

I wonder whether a different document type might affect how this is rendered? I realize I don't have an XHTML doctype.

jw
hallvord
Hi,
Prince 11 renders this the same way. I don't think the doctype makes a difference.
-Hallvord

Announcement: repos for tests/utils

johnathonwright
So I've noticed there hasn't been an "official" response to this topic. Should I be posting it elsewhere?
mikeday
Sorry for the delay, layout issues always take a bit longer to understand. :)
mikeday
The issue here is that block borders aren't affected by floats, and Prince implements the HTML hr element as a simple block with a border.

Browsers must be doing something different for horizontal rules, although I haven't yet figured out whether they are treating them specially or just using different CSS.

The HTML specification isn't much help on this matter as it just defines hr to be a thematic break and doesn't have anything to say about how it should be represented visually.
mikeday
One possible solution is to restyle hr like this:
hr { border: none }
hr::before {
    content: leader(' ');
    font-size: 0.1pt;
    border: 1pt inset black
}

This places a span inside the hr element that will be pushed aside by any floats, using a leader to make it expand to fill the available space, and reducing the font-size to avoid taking up vertical space. It's a little esoteric and I'm not sure if it will handle every possible situation, but it might be worth a try.