Print Style Sheet Oddities

Page break & invisible head

[rogerd]

As I bumble forward with my table-free site, I'm attempting to take advantage of the cool ability of CSS to allow nicely formatted printing from the same HTML. Naturally, things aren't going entirely smoothly. I'm using this style sheet approach:

<link rel="stylesheet" href="http://www.example.com/styles-site.css" type="text/css" />
<link rel="stylesheet" href="http://www.example.com/styles-print.css" media=print" />

First problem: I'm getting a page break between divs. I print my top banner, and then it kicks to a new page for the content. In desperation, I even tried,

div {
page-break-after : avoid;
page-break-before : avoid;
}

but it had no effect at all.

The other print weirdness is a head tag that won't print. I'm doing an image/text swap that works fine in browsers. When I print, though, I can't seem to get the text to show up. It seems related to an ID attribute setting. By changing the ID attribute, I can make it print:

This is my original HTML that won't print the text:

<a href="http://www.example.com/" accesskey="1"><h1 id="head1">My Site Name</h1></a>

In the browser style sheet, I've got the #head1 defined with a background image, sizing, & padding, not to mention some weird voice-family stuff that makes it work. It displays correctly in IE and NN7, and shows a text heading in NN4. I'm happy with the browser performance (except that in IE the link works but doesn't show the hand cursor... but that's another story.)

In the print style sheet, I defined the #head1 like this:

#head1{
font-family:georgia, verdana, arial, sans-serif;
font-size: x-large;
color: #000;
text-decoration: none;
background:#FFF;
}

It doesn't display.

If I change my HTML by eliminating the ID attribute,

<a href="http://www.example.com/" accesskey="1"><h1>My Site Name</h1></a>

it prints correctly. (Of course, that prevents the image from displaying correctly in browsers.)

I assume I'm doing something dumb in the #head style code... any suggestions? Thanks.

[TheDoctor]

The #head1 rules look okay to me, and work when I test them. I suspect the problem may be elsewhere. Are you sure you don't reference the id somewhere else?

Incidentally,

<a href="http://www.example.com/" accesskey="1"><h1 id="head1">My Site Name</h1></a> 

should, strictly, be

<h1 id="head1"><a href="http://www.example.com/" accesskey="1">My Site Name</a></h1>

No idea about the page throw, but I suspect it's connected to the no-print problem.

[rogerd]

Thanks, Doc. I solved the page break problem - there was a missing quote mark in the media="print" style sheet link. I'm not sure how that caused the spurious break, since the print style sheet loaded OK, but fixing that cleared it up.

No dice on the invisible text. I'm going to try editing the print style sheet down to the bare minimum

Doc, when you wonder about the use of #head somewhere else, did you have anything specific in mind? I searched the style sheet & there were no similar references, nor were there any in the HTML. I think I'm just going to keep removing stuff until I find the offending element.

[rogerd]

Got it - the print style was inheriting some stuff from the browser style sheet, including an "overflow=hidden" attribute.

Thanks...