Isabella
Joined: 15 Jun 2006 Posts: 103
|
Posted: Tue Aug 08, 2006 12:17 am Post subject: Whitewashed backgrounds |
|
|
A lot of background colors get applied to things in the right-hand sidebar. Since that’s dropped for print, we don’t have to worry about changing anything within the sidebar. This removes numerous potential headaches right away.
Since printers don’t print white, we want to set the page’s background to be white. We also want to remove any background images that might have leaked in.
If we simply use the property background, we can accomplish both tasks with a single value. In order to leave ourselves a little flexibility, we’ll set the body background to be white, and the content and wrapper elements to have a transparent background (thus letting the page’s white shine through):
body {
background: white;
}
#menu {
display: none;
}
#wrapper, #content {
width: auto;
margin: 0 5%;
padding: 0;
border: 0;
float: none !important;
color: black;
background: transparent;
}
Setting the foreground color to go with the background colors wasn’t absolutely necessary, but it’s always a good idea. Now we have two non-floated elements (#wrapper, #content) with no visible background, and a page with a white background.
You might be worried that Navigator 4.x does terrible things with the value transparent, but be of good cheer: NN4.x only pays attention to style sheets that have a media value of screen. Just like with @import, the styles in our print style sheet are forever hidden from Navigator 4’s rheumy eyes. So no worries there.
Via AListApart
|
|