leftjustified leftjustified - 3 months ago 14
CSS Question

Firefox Print HTML page cuts off content

I have a html page, I want to print with the browser. In IE9 and Chrome, everything works as expected, but on Firefox, the page is cut off. See HTML:

<!DOCTYPE html>
<html lang="de">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

<style>
.grid {
list-style: none;
margin-left: -20px;
}

.grid > .col-1-3, .grid > .col-2-6, .grid > .col-4-12 {
width: 33.33333%;
}

.col {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
display: inline-block;
margin-right: -.25em;
min-height: 1px;
padding-left: 20px;
vertical-align: top;
}
</style>

</head>

<body>
<div id="container">
<div id="middle">
<div class="grid">
<main class="col col-2-3" id="main">
<article>
<h1>Page Title</h1>

<div class="sec">
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.</p>
</div>

<div class="grid sec">

<div class="col col-2-3">
<h2>LEFT TITLE</h2>

<table>


<tbody>
<tr>
<td class="text-right" >40</td>
<th>g</th>
<th>
<a href="#">Foo</a>
</th>
</tr>
<tr>
<td class="text-right" >40</td>
<th>g</th>
<th>
<a href="#">Ba</a>
</th>
</tr>


<tr>
<td class="text-right" data-amount="4">4</td>
<th>kg</th>
<th>
<a href="#">Trallala</a>
</th>
</tr>


<tr>
<td class="text-right" data-amount="200">200</td>
<th>g</th>
<th>
<a href="#">Bla</a>
</th>
</tr>


<tr>
<td class="text-right" data-amount="300">300</td>
<th>ml</th>
<th>
<a href="#">Blub</a>
</th>
</tr>
</tbody>
</table>
</div>

<div class="col col-1-3 recipe-rightbar">
<div>
<h2>RIGHT SIDEBAR Title</h2>
<ul>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
<li>List item 4</li>
<li>List item 5</li>
<li>List item 6</li>
<li>List item 7</li>
</ul>

<div>
<h2> RIGHT SIDEBAR Title</h2>
<ol>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
<li>List item 4</li>
<li>List item 5</li>
<li>List item 6</li>
<li>List item 7</li>
</ol>
</div>

<div>
<h2> RIGHT SIDEBAR Title</h2>
<ol>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
<li>List item 4</li>
<li>List item 5</li>
<li>List item 6</li>
<li>List item 7</li>
</ol>
</div>

</div>
</div>
</div>

<section class="sec ">
<h2>Title</h2>
<ol>
<li>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eosrebum.</li>

<li>Lorem ipsum dolor sit amet, consetetur sadipscingeirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. adsadasd</li>

<li>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.</li>

<li>Lorem ipsum dolor sit amet, nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.</li>

<li>Lorem ipsum dolor sit amet, consetetur sadipscing elitd tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.</li>

<li>Lorem ipsum dolor sit aur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.</li>
</ol>
</section>

<section>
<h2>Title</h2>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.</p>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.</p>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.</p>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.</p>
</section>
</article>
</main>
</div>

</body>

</html>


Has anybody an idea how to solve this issue?

I have already tried to set overflow visible to every element:

* {
overflow: visible;
}


but that didn't solve the problem.

I have tested the code in Firefox33, IE9 and Chrome38, but only Firefox failed to print the page.

Answer

The issue is the display: inline-block; bit, there are many ways to resolve the issues with css, I'm not sure what the end result is supposed to look like though.