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.
