View Full Version : Firefox Printing Problems

08-07-2007, 03:56 PM

I just made a website and when you print from Internet Explorer, it looks fine. However, in Firefox it prints a bit weird.

Example page: http://www.comcec.com/public/commchange.html

Is there a fix to this?

Thanks :)

08-07-2007, 03:58 PM
maybe you should have a printer friendly style sheet you can switch to then print? This would remove your problem.

08-07-2007, 04:01 PM
Um, can you explain? :confused:

08-07-2007, 04:02 PM
Indeed... the browsers will use their default styles to lay out a page you want to print from them, so to get something that looks more similar for different browsers you should do as Littlemiss says and create a print css to remove most of the style and images and make it look purdy when printed.

You can also play about with the print options in FF, but they are limited compared to what a print stylesheet would allow you to do.

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

08-07-2007, 04:09 PM
This is news to me! So I have to re-create a new style sheet for every page, just so they can print? Is there a topic somewhere where I can read more about this?

08-07-2007, 04:13 PM
This might help you (http://www.webcredible.co.uk/user-friendly-resources/css/print-stylesheet.shtml)

08-07-2007, 04:40 PM
Thanks very much :)

08-07-2007, 06:02 PM
I have a few questions:

1) How do you prevent the first page from being blank? None of the content is showing up until page 2

2) How do you put a page break so it doesn't cut off text at the bottom?

I appreciate your help, thanks :)

08-07-2007, 06:14 PM
First thing: From now on always apply a media attribute to your stylesheet links (except if you specifically want them to render the stylesheets in all devices). That means for your regular stylesheets that render styles on computer screens always put media="screen". This also prevents the stylesheet from being rendered by small screen devices (PDAs, mobile phones, etc.), hence being more accessible (if you wrote semantic code).

Currently your regular stylesheets are also rendered for print layouts so you’d have to revert everything that isn’t supposed to be rendered. Now, with applying a screen media type attribute to screen stylesheets you save that work because those stylesheets aren’t rendered in print layouts. You then create a stylesheet only for print layouts with very basic formatting and hiding the navigation, etc.

I‘ve done this on this website (http://mahanaim.com) lately. Check out the source code and print preview.

08-07-2007, 06:27 PM
Wow, that was easy. Thank you for that tip! I've got it almost done how I want it. Just one other question.

Is it possible to indicate what font size you want a specific attribute in a class to print out as?

Example: It's in class "sbihead" and I want it to affect the <h1> only.


08-08-2007, 01:34 AM
bump! :)

08-08-2007, 01:42 AM
It's in class "sbihead" and I want it to affect the <h1> only.


.sbihead h1 {…}


That’s taught in the CSS beginners class.

08-08-2007, 03:14 PM
Yeah, my teacher taught us absolutely nothing. Hence me taking a course in November....

Thanks for your help