CSS @media print

[samobellows]

hello all!

i am having a cross browser compatibility issue i was hoping i could get some new eyes on. i've been trying to get this working for a while now, and i'm starting to glaze over.

i have a web form that the user fills out. based on what they selected, a different print page is generated, and put in to an iframe that functions like a print preview. this iframe is in it's own div, after the div with the form in it, and i use javascript to move it centered over the form, and on top of the form. the user then clicks the print button on the parent page to print the page.

i use a media="print" CSS document, so that when the page prints, the div with the form in it is hidden, and the div with the iframe in it is positioned at 0px,0px. it works like a charm in IE, however, in firefox and google chrome, nothing prints on the page, but the browsers default header.

here is my CSS media="print" stylesheet

#PrintDiv
{
	position:absolute;
	top:0px;
	left:0px;
	visibility:visible;
}
	
#onscreendiv
{
	visibility:hidden;
	display:none;
}

the onclick event triggered by the print button is just window.print();

i dont know what it is about this code that makes IE happy, but not firefox or chrome. any fresh views on this would be greatly appreciated. thanks so much!

Sam

 

[samobellows]

small edition, in the main page, and the page that loads in the iframe, my stylesheets are linked in the header like this:

<link rel="stylesheet" href="css/printpage.css" type="text/css" media="print"/> 
  <link rel="stylesheet" href="css/onscreen.css" type="text/css" />

 

[Vragabond]

First, I would switch the call to the stylesheets around, since 'onscreen.css' is your main one and 'printpage.css' complements it.

Second, I don't know why you're using absolute positioning. If you use display: none; on an element, that element will not be printed and all other elements will switch places to fill up the gap that was created. I believe that is what you want to do. Therefore completely removing all declarations from #PrintDiv should be enough to make it work.

Finally, even if removing everything does not work correctly, try to avoid absolute positioning. I have never seen pages with absolute positioning print more than one page, when content was longer than a page. The text always gets cut off.

[small]Do something about world cancer today: Comprehensive cancer control information at PACT[/small]

 

[samobellows]

Thanks for the help Vragabond. I rearranged the stylesheet links to have the printer version last, and i removed the entire first style from the printer version, since it was all redundant.

however, no changes happened to the 3 printer versions. IE prints exactly how i want it to, firefox and chrome both print a "blank" page. all they have is the header that you always get from printing from a browser.

my print CSS as it stands is really simple now, just this:

#onscreendiv
{
	visibility:hidden;
	display:none;
}

the printpage div is outside of the onscreen div. so if that @media print stylesheet is correct, everything in the onscreen div is hidden, and only the print div is shown. IE understands this, but the other 2 don't. they're hiding everything, not just the onscreen div. any other hints on cross browser compatibility that i'm doing wrong?

 

[BillyRayPreachersSon]

When I go to the print dialog in Fx, I get options about printing frames.

Which of those options are you selecting?

Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

Dan's Page [blue]@[/blue] Code Couch:

http://www.codecouch.com/dan/

Code Couch Tech Snippets & Info:

http://www.codecouch.com/

 

[Vragabond]

Since we cannot see your HTML or the rest of your CSS, it's hard to say what might be causing it. If you could provide us with a link to page in question (or a similar mock up that exhibits the same problems), we can help you further.

[small]Do something about world cancer today: Comprehensive cancer control information at PACT[/small]