print-css-rocks icon indicating copy to clipboard operation
print-css-rocks copied to clipboard

lessons fail to account for default user-agent margin on body

Open faceless2 opened this issue 2 years ago • 2 comments

The default user-agent stylesheet as used by Firefox, Chrome, Safari and BFO Publisher sets body { margin: 8px }. Any tool that does this will see lesson-deer wrapping onto the second page because you have html, body { height: 100%} , and lesson-account-statement will not be able to fit your left and right-floating tables side-by-side. You need a body { margin: 0 } rule in both.

In lesson-deer, I'd also strongly suggest setting <!DOCTYPE html> at the top of the file, otherwise you're relying on how quirks-mode is implemented in whichever tool you're testing.

faceless2 avatar Aug 03 '23 17:08 faceless2

Possibly true. However, I did not find a simple case where this would make a difference for the tools tested.

zopyx avatar Sep 25 '23 12:09 zopyx

I just listed two - your "lesson-deer" and "lesson-account-statement" examples

You can test it yourself on printcss.live. It should be easy to verify makes a difference; add body { margin: 8px} to your deer example and test in tools that don't have this as a rule (prince, etc) or - alternatively - set body { margin: 0} to the example and test in tools that do have this as a rule (ie BFO Publisher)

faceless2 avatar Sep 25 '23 14:09 faceless2