CODEWITHSUNDEEP
cssprintingoverflowhtml
loneboat
loneboat

Reputation: 2945

Print CSS not respecting explicit height/overflow: none?

I've written a separate media="print" stylesheet for my page - specifically to resize a div. In the print CSS, I've given the div an explicit height (in 'pt' units) and a different font-size (also in 'pt'). I've also specified that the div ALWAYS have overflow: hidden (I WANT extra text to get chopped off).

When I print the page, the div doesn't seem to respect the explicit height - it just stretches the div (despite having overflow: hidden); Since this is a print layout, I'm having a heckuva time troubleshooting it, since I can't use IE Developer tools to trace the CSS/DOM.

BTW, I'm using IE8, with the page in compatibility mode. I'm in a corporate LAN where all users area GUARANTEED to have either IE7 or IE8, so I actually only need it to work in those;

HTML:

<div class="left" style="display: none;">
    <h1 class="corrected">Company Info</h1>
    <div class="box" id="overview_html"></div>
</div>

<div class="right" style="display: none;">
    <h1 class="corrected">Notes</h1>
    <div class="box" id="notes_html"></div>
</div>

Print CSS:

#notes_html, #overview_html { height: 200pt !important; overflow: hidden; font-size: 12pt; }

Screenshots (browser first, then IE's "print preview"):

Browser screenshot

Print-preview

Any ideas what's going on? Are there any "gotchas" to print layout where you can't use overflow: hidden or set an explicit height?

Upvotes: 5

Views: 7210

Answers (1)

Kraz
Kraz

Reputation: 7100

note: somewhat blind answer as I can't see your pictures.

Try using max-height instead of height. This worked for me.

edit

The problem is compatibility mode : It behave like IE6 : height is treated like min-height (ie "can grow bigger").

Full test case : 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
    <title>test</title>
    <style type="text/css" media="screen">
        div {
            border: 1px solid red; overflow:hidden;
            float:left;
            width:100%;
            height:50pt
        }
    </style>
    <style type="text/css" media="print">
        div {
            border: 1px solid blue; overflow:hidden;
            float:left;
            width:100%;
            height: 50pt
        }
    </style>
</head>
<body>
        <div>
            test<br />test<br />test<br />test<br />test<br />test<br />test<br />
            test<br />test<br />test<br />test<br />test<br />test<br />test<br />
        </div>
</body></html>

Upvotes: 4

Related Questions