Forum Moderators: not2easy
I'm coding my company's new site and have taken on the monumental task of formatting it completely in CSS. So far, so good! It displays well in IE 5.0, IE 6.0, Firefox .9.1, Mozilla 1.7, Netscape 7.1, Opera 7.54, Mac IE 5.1, and Mac Safari (no idea what version). It also validates with no errors using the W3C's html and css validators. (Yes, I have no life ;)
Anyways, I decided to get fancy and make a print CSS and that's where my problems come in. The print preview in every browser except for Opera and Safari looks just like it should. However, Opera and Safari both display an empty box where my print header layer is.
Here's the page code:
<?xml version="1.0" encoding="iso-8859-1"?>
<!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">
<head>
<title>Beta</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" type="text/css" href="components/home_print.css" media="print" />
<link rel="stylesheet" type="text/css" href="components/global.css" media="screen" />
<link rel="stylesheet" type="text/css" href="components/home.css" media="screen" />
</head><body>
<!--Start the hidden print layer-->
<div id="printHeader"><img src="images/architecture/print_header.jpg" alt="" width="672" height="94" /></div><!--Start the centering layer-->
<div id="container"><!--Start the Header layers-->
<div id="headerTop"><img src="images/architecture/home_header_top.gif" alt="" width="772" height="50" /></div>
<div id="headerTopBar"><img src="images/architecture/home_header_top_bar.gif" alt="" width="772" height="15" /></div>
<div id="headerLogo"><img src="images/architecture/home_header_logo.gif" alt="" width="106" height="92" /><img src="images/architecture/home_header_flash.jpg" alt="" width="666" height="92" /></div>
<div id="headerNav"><img src="images/architecture/home_header_bottom_bar.gif" alt="" width="772" height="19" /></div><!--Start the content spacer layer-->
<div id="contentSpacer"><img src="images/architecture/spacer.gif" width="106" height="106" alt="" /></div><!--Start the main content layer-->
<div id="content"><p>Stuff</p></div><!--Start the sidebar spacer layer-->
<div id="sidebarSpacer"><img src="images/architecture/spacer.gif" width="12" height="12" alt="" /></div><!--Start the sidebar layer-->
<div id="sidebar"><p>more stuff</p></div><!--End the centering layer-->
</div>
</body>
</html>
Note the printHeader layer - in home.css I have set the display to none. In the print CSS, I set all of the header layers' display to none, with the result being that only the printHeader layer will print. Here's the print css:
body, html {
background-color: #ffffff;
color: #000000;
}#container, #printHeader {
width: 100%;
}#headerTop, #headerTopBar, #headerLogo, #headerNav, #contentSpacer, #sidebarSpacer {
display: none;
}#content, #sidebar {
width: 95%;
padding: 0 0 0 0;
margin: 10px 0 0 10px;
background: transparent;
}
The higgery-jiggery coding I pulled with the print header has worked for me before in Opera/Safari. I can display the code for that example if anyone wants to see it.
It's gotten to the point where I've looked at it so long, there could be an error in there and I just can't see it. I'd greatly appreciate it if some fresh eyes can have a boo at it and hopefully pass along any suggestions on how to make Opera and Safari behave!
Many thanks in advance! :D
Note the printHeader layer - in home.css I have set the display to none.
Since posting my plea for help, I've done some major troubleshooting with nothing but a headache to show for it. It's gotten to the point where I've darned near given up >.<
I did actually get it working...sort of. I have another site that uses the same concept but works like a charm. Anyways, on a whim I decided to grab the image from the working site, and threw it into the trouble site. Guess what? The print preview was fine with that image.
Just to rule out a coding problem, I then cleared out the CSS and started adding the rules back in, one by one, to see if any particular one would break the print preview. Every time I did, I would pop into Opera, refresh (or clear the cache) and check. I reconstructed the entire CSS without the print preview breaking.
So then I came back to questioning the image. I created my own using the same dimensions and file name/type as the known good image. It broke the print preview. When I put the good image back in, it worked.
So then I thought maybe my graphics proggie was messing things up. To make sure, I took the known-good image, made a copy, resaved the copy and plunked it in. Print preview was broken. Aha! On the right track, said I. But then, I grabbed the original working image and put it back, and...still broken!?! :o
Since that time, I haven't been able to make it work again, even using the graphic that was working before.
ARRRGH!
*bangs head against wall*
Ahem :)
It's a weird one alright and doesn't seem to follow any logical rules that I can figger. I do appreciate your suggestions, so please feel free to pass them along if there's anymore :)
#content, #sidebar {
width: 95%;
padding: 0 0 0 0;
margin: 10px 0 0 10px;
background: transparent;
}
Don't ask me to explain all the weird troubleshooting results I was getting...it's bizarre. Maybe some weird caching going on?
Anyways, thanks for the help, I appreciate it! And if something good came of all of this, it's this: I've found a great resource for CSS-ers. I've learned much from lurking around and even implemented a few new tricks :D
