HTML and CSS Reference
In-Depth Information
some quirky bugs), but it's a great way of testing your printed page without wasting reams and
reams of paper before you get it just right. Internet Explorer on Windows also offers a preview
that you can access from the File menu.
Figure 13-2.
A simpler document for print, but still some issues to correct
Correcting Minor Issues Inherited from the Screen Style Sheet
A closer look at Figure 13-2 reveals some slight issues. These issues result from our decision to
apply generic rules to a wide range of elements and our expectation that everything will work
out of the box—which does not always happen. In the example, a height applied to the
h1
—
which was there solely for the purpose of creating space for the reflected background image
underneath the logo text—is adding unnecessary whitespace; the breadcrumb trail items
could also benefit from additional space between them. A couple of tweaks added to the print
CSS file will correct these issues:
h1 {
background:none !important;
height:33px !important;
}
#breadcrumb ul li ul li {
padding-left:14px !important;
}
■
Note
In general, for print CSS files you should specify measurements using
cm
,
mm
, or
em
rather than
px
(pixels are for screen display), particularly where fonts, margins, and padding are concerned. However, we've
specified pixels in our tweaks as they relate directly to images that are also expressed in terms of pixels.
