...

View Full Version : Firefox Printing Problems



katie_lostsoul
08-07-2007, 03:56 PM
Hello,

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 :)

littlemiss
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.

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

ahallicks
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" />

katie_lostsoul
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?

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

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

katie_lostsoul
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 :)

VIPStephan
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.

katie_lostsoul
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.

thanks!

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

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

Uhm…


.sbihead h1 {…}

…maybe?

That’s taught in the CSS beginners class.

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

Thanks for your help



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum