Menu
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"):
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?
897
note: somewhat blind answer as I can't see your pictures.
Try using max-height instead of height. This worked for me.
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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
