CSS - Firefox Print Preview/print Issue

Hi all,

Simple issue - got a form with textboxes whose screen width will be less than the max width (for design and spacing purposes). However, I'd like the print stylesheet to make the entire contents of the textbox visible when they print.

A year or two ago, setting input{width: auto;} in the print stylesheet worked fine, but it seems the newer browsers (IE 6+. latest FF) do not support this method.

Any thoughts on how to do this?

Thanks,
AJ

I have a page that is laid out with in a table. It has a header and a footer area. Ive defined a stylesheet for printing, and my content shows up correctly when printing (or print preview) with the header and footer items left out. What is not right though, is the 1st page is blank when i do a print preview.

Help ?

to add:
This is an asp.net web page, that has a form with several images that render inside a div element and this form is within the main table.

This is a very interesting bug and I have been trying to do a little bit of hacking but with no success here. So, thought anyone of you would know what I'm missing.. The problem here is that it showed up just fine on the webpage but not in Print Preview or Print-Out for IE.

Code:

<style type="text/css">
   divBlackBox1
   {
     margin: 50px auto;
     padding: 0px;
     width: 400px;
     height: 4px;
     display: block;  /* for IE stupidity (to make height work correctly with the correct pixels)... */
     font-size: 1pt;  /* for IE stupidity (to make the smaller height work due to default font-size)... */
     overflow: hidden; /* Problem is that it doesn't work for print preview or print-out in IE... */
     background-color: #000000;
   }
</style>

<div class="divBlackBox1"></div>

Thanks,
FletchSOD

We're having a weird problem with a print stylesheet - a little bit of the javascript menu appear on the printed over the top of the content.

eg: (http://www.lawhandbook.sa.gov.au/ch10.php ) - Print Preview this page and you will see "Chapters A-Z" in the middle.
This seems to happen in all browsers.


We've looked into many css solutions to the issue - but to no avail - we cant make the damn thing disappear.
One long winded solution is to change the stylesheet to be built dynamically - so a call to ch10.php=true would build the page differently.
But this seems to defeat the purpose of using a print stylesheet in the first place.
Another long winded soltuion is to change the (Rather old) menu script - but that not really an option in this case either.

So my question is - What happens when a browser prints a page?
Does it send anything back to the server indicating it is loading the print stylesheet instead? (eg: Some sort of request variable)
Or does the client's browser simple request the CSS file and reformat the page it has already downloaded?

If so I could detect this event with PHP or Javascript to not load the offending menus when the print css had been loaded

Hi

I urgently need some help on my project. I am making an invoice, where there is a table of summary of around 200px at the bottom of the page. All works well till the invoices are small. But as soon as there come a longer invoice that wouldnt fit 1 page and needs a little more space the summary table at the end splits in two parts. Half of it appears in page 1 and the rest appears on page two. This looks ugly and absurd for an invoice.

I am good if in such a situation, I am able to move the complete summary table on page two, rather than it splitting up. Just remember the invoices are dynamic, so the solution needs to cater to it.

Thanks for your help.
Sandy

Converting a site layout from tables to CSS. The files validate as XHTML 1.0 transitional (html and css files validate), and appear identicle on IE7 and FFox3.5.

However, when printing the page, Firefox prints the nav block correctly (page 1, upperleft, as both browsers show onscreen), but IE7 prints this block on page 3 (beside the footer). Same result on different printers, so I presume the factor lies within IE7.

Can't seem to find a solution, any help welcome. Page is live at:

"foggymountain.com/black-bear-hunting-notables-022410.shtml"

Thanks.

Hi there...First post in this forum cause Firefox (and mozilla / netscape) are driving me mad!

Please consider the following code:

Code:

<html>
<head>
<style type="text/css">
@media print {
p {font-size:11px;text-align:justify;}
table {width:100%;} 
}
</style>
</head>

<body>
<table width="770" border="0" cellpadding="0" cellspacing="0" bgcolor="#FFFFCC">
<tr>
<td>
<p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam molestie, tortor id tempor fringilla, ante massa consequat dui, eget fermentum ante dolor sed felis. Curabitur mollis, velit sit amet lobortis pulvinar, mi lorem condimentum metus, cursus malesuada lectus leo in purus. Suspendisse vehicula, nisl ac varius iaculis, purus felis sodales lorem, in porttitor massa risus a odio. Cras urna felis, sagittis bibendum, ultrices vel, accumsan ac, pede. Maecenas felis nisl, rhoncus non, imperdiet in, tincidunt vitae, ante. Vestibulum cursus, elit non rutrum eleifend, arcu ligula bibendum velit, eget pharetra dui ipsum et tortor. Praesent lectus felis, consectetuer a, varius fringilla, elementum quis, diam. Morbi posuere sem eget odio. Pellentesque imperdiet tellus eget augue. Aliquam et tortor et libero nonummy tristique. Sed feugiat pellentesque sem. In hac habitasse platea dictumst. Vivamus a ipsum eu odio fringilla scelerisque. Ut et neque. Sed fermentum neque nec pede. Morbi enim erat, tempor nec, porttitor eu, tempus ut, nunc. Pellentesque lacinia dapibus urna. Curabitur leo tortor, cursus quis, semper quis, luctus ac, quam. Phasellus sit amet nisl. Nullam molestie nonummy lorem. Etiam consectetuer, ante in lacinia molestie, tellus nisl tincidunt dui, in commodo lectus elit ut elit. In ornare fermentum ante. Nullam felis. Maecenas tempor, lectus vel dignissim tincidunt, metus erat feugiat odio, eu dapibus mauris orci vitae enim. Etiam quis quam vitae risus aliquam iaculis. Ut nunc nulla, hendrerit ut, auctor id, ullamcorper a, risus. Integer fringilla, erat eu interdum imperdiet, lorem purus fermentum wisi, at mattis lectus nisl sit amet ante. Cras dolor. Nunc elementum quam at ligula. Maecenas ut mi ornare neque suscipit vulputate. Praesent ornare. Pellentesque nonummy posuere massa. Morbi sed risus et purus eleifend pulvinar. Proin suscipit ultricies enim. Morbi luctus. Nam quis sem. Quisque mattis. In laoreet velit eu nunc.
</p>
</td>
</tr>
</table>
</body>
</html>

This is basically a reconstruction of an existing problem of a far more complex design...in any case, if you try to print->Preview from Opera or IE 5+ everything is sweet...However, Firefox (and the other Gecko browsers) will not properly justify the text when previewing.

More precisiely: Firefox will wrap text over 12px correctly yet for small text, the p block will not wrap properly and some text will be cropped. I'm not fussy about justification but even when I removed it I would get the same problem.

I'm sure there's a perfectly logical solution to this problem. Maybe the width:100% gets inherited by the td and p but that should not affect the layout...Despite my various experiements of chaging the width and the wrapping properties, I could not solve this. I'm still learning the intricasies of block elements in CSS2 so I would definitely appreciate any help!

Thanks in advance,
Angelos

Hello all,

I have been trying to get my website to comply with googles page speed and yahoo's yslow.

I had 2 seperate css files one for print and one for screen and they wanted them combined. I searched and searched for a way to do this and well I am going to post here how I got things to work in hopes it helps someone else.

<link href="style.css" rel="stylesheet" type="text/css" media="screen, print" >

NOTE if I make it media="all" print does not work


here is code for the main css file that combines the 2 into 1. NOTE also the print is NOT loaded until it is needed.

@media screen {
/* all screen CSS goes in here */
}

@media print {
/* all print CSS goes in here */
}



U ask why a print.css file? simple it lets me force page breaks so images don't get cut in half. it lets me set a legable size font or larger than what is displayed on screen.

Ok here is my problem... in the print.css I don't want to print my backround image. I want just a plain white background. I use a "sprite" to call picture frames for screen. These frames use part of my background image... thus they look bad printed.

How do I in the print.css file tell it NOT to print this frame.png file?

I assume I will use .noprint DISPLAY:none or something to that effect but where and how to impliment this is over my head and I cannot find any examples of how to do it.

Thanks in advance for any suggestions or help

whonoes

Hi,

All the content of my web page is in a table which is 760 pixels width.

This is fine on the screen, but when printing, the right part is cut.

I tried to set a new css print stylesheet <link rel="stylesheet" type="text/css" href="print.css" media="print"> to avoid this problem, but it is not working.

I tried to change the margin and padding, but there is no change. I still have the same problem.

I tried many different configurations, but none of them worked... I did probably something wrong.

I know that the page is properly printed if I change manually the print setting (file -> page setting) margin to 5mm, but how can I do it with the css, in order than everybody who would like to print the page has the complete page printed?

Could someone help me?

Many thanks

I've just created a print stylesheet for my site but I'm having troubles with it working in Firefox.

It works great in ie but in Firefox when a page goes onto more than one page the first page is printed but not the rest.

http://www.skillair.com/employers/employers.asp

http://www.skillair.com/stylesheet/print.css

Any help would be really great.

Thanks

Jemes

i have this in my css....the image is shown on screen, but if print the page, image wont print...

how can i fix this?

i need the iomage to be printed...help please

Code:

}

#recibo {
		BACKGROUND: url(recibo.jpg);
		WIDTH: 600px; 
		HEIGHT: 400px;
}

hi I have 2 questions:

- how do I programmatically remove default browser header/footer
- how do I print a header on every page

thanks.

I have to design a site using a 750 pixels table.
Of course, when I print the text, my text get cut off on the right hand side.

Using a Print style sheet, is there any ways to avoid loosing the text on the right. Everywhere I look suggest to design into a 600 pixels table but they really want it to 750.

Thanks for any help.

Hi

Could someone assist me in making a print stylesheet for this site please!

http://calibrehr.com/new/

What I need is:

just the logo to display (remove nav)
The text in the orange block to span the width of the page
Remove subnav
Some how diplsay the text that is in the purple boxes below the main content text

I am stuck as to what to do and could really appreciate some help

Many thanks!

I created a print.css for my site, but it still does not work and would appreciate any help.

Here's my site:
http://seniormobility.org/test/actionplan.html

Here's the print.css code:
Code:

body, .maincopy {
	background-color: transparent;
	font-size: 12pt;
	font-family: "Times New Roman", Times, serif;
	color: #000000;
}

#navcontainer, #header, #header_pic, #text_control, #header_breadcrumb #search_box {
	display: none;
}

#container {
	width: 100%;
	margin: 0;
	float: none;
}

#pagename, #main_content, #main_content_home {
	border: 0;
	width: 100%;
	margin: 0 5%;
	padding: 0;
	float: none;
	overflow: auto;
}

When I do a print preview or actually print in both IE8 and FF, all the text gets cut-off on the right. I'm not sure what I'm missing.

Thanks in advance for everyone's help!