How to fix some issues with printing very basic HTML

Question

I have some very simple HTML:

<div id="advisor">
    <div id="print_this_container">
        <form>
            <input type="button" value=" Print this page "
                onclick="window.print();return false;" />
        </form>
    </div>
    <div id="top_section">
        <div class="left_box" style="position: relative;">
            <div id="avatar_container">
                <img class="avatar" src="<%= @advisor.avatar_url %>" />
            </div>
        </div>
        <div class="right_box">
            <h2><strong>Council on Emerging Markets</strong></h2>
        </div>
    </div>

</div>

The associated CSS is:

#advisor{
    width: 800px;
}
#top_section{
    border-bottom: 1px solid #666 !important; 
    height: 200px;
}
.right_box{
    float: left; 
    padding-left: 25px; 
    padding-top: 50px; 
    width: 550px;
}
.left_box{
    background: #ccc; 
    width: 200px; 
    float: left; 
    text-align: center; 
    height: 100%;
}
img.avatar{
    width: 150px;
}

And in my print.css

#advisor{
    width: auto;
    }
#print_this_container{
    display: none;
    }

It looks great in my web page. However, when I print it the following issues occur:

• The top section border disappears
• The image shrinks
• The right box is displayed under the left box, it does not float
• The left box background color disappears

Does anyone know how to fix these issues?

Answer 1

There are a number of problems with printing from within a browser. A lot of the printing-specific stuff doesn't work on most browsers and even where it's supported by multiple browsers, it is handled differently

We've jsut spent two weeks trying to print labels using a browser - in the end, we've gone for multiple solutions which fail as gracefully as possible...

Firstly, we detect silverlight and flash - if either is present, we use them to print.

Next, we have a piece of code which loads a web browser in memory on the server and takes a screenshot of the page at a specific URL - this generates an image which we then return to the client for printing. This is okay for our scenario but you might want to check mem usage/etc. for high volume sites.

Some things we've found: Page margins are a REAL pain (especially for labels!). It seems that only certain versions of Opera will allow you to modify page margins from CSS

Background images and colors aren't usually printed by browsers (to save ink) - There's an option in most browsers to enable printing BG.

In firefox look in about:config

print.printer_<PrinterName>.print_bgcolor
print.printer_<PrinterName>.print_bgimages

In IE I think it's under File->Page Setup...

Obviously, neither of these help you much as they can't be set by the site itself - It depends who the users are going to be whether or not you can ge tthis set intentionally. Failing that, you might try using a normal non-background image placed behind your content?

In my experience float doesn't work on printing - However, it's been a while since I've tried and it's possible this will now work as long as you provide an explicit width for your page (100%?) at present, I think most browsers use shrink-to-fit as default on print media.

Page width is another interesting one - I've only found very limited "width" properties that seem to work - at one point I almost resorted to tables. So far percentages seem to work fine, auto doesn't.

Try having a look Here and Here for some solutions and Here for a browser compatability chart