HTMLTree - A Growing Repository for Web Designers and Developers

As a web developer, you will come across various problems related to your web site. A few weeks ago, I was told that my web page only printed one page. Strange, the screen displays a large table set that expands ~4 pages.

And the kicker, it does this on Firefox. Wow.

After a few minutes of googling, I have discovered the culprit to be within CSS.

Here was my simple solution.

Print.css

Create a new style sheet made for print. It’s best to include this right below all your other style sheets, so it can overwrite any elements right before the user prints.

<link rel="stylesheet" type="text/css" media="all" href="style.css" />
<link rel="stylesheet" type="text/css" media="print" href="print.css" />

Ok Batman, let’s override some code.

Overflow

My tables had a class to set the fonts and cell size. So you just need to set the overflow.

table, .tableClass, #tableID {
    overflow: visible !important;
}

Float

I also had a Nav menu that was set to float left. This needed to be print friendly.

.nav {
    float: none !important;
}

Position

And lastly, my logo was an absolute position. Override that with the following.

#logo img {
    position: relative;
}

Those 9 lines of code should fix the problem.

HTMLTree’s comment: Eric Meyer also recommends setting your background-color to white. But most printers will omit any background color during printing. It’s up to you.

body {
    background: white;

or

    background: transparent;
}