Firefox and alternate print styles
Alternate Media Styles and a buggy Firefox
One of the nice things about CSS/XHTML is that you can declare alternate stylesheets for use with different media. You can have a website look one way when viewed on a monitor and a different way when printed out. This is usually a good idea, because when you print a website some of the content can become meaningless. What use is a printed out navigation bar? What’s the point in that sidebar full of off site links and adverts? It’s just a waste of ink and paper when printed out.
I created a
print.css file, which turned off the menu, changed the font into something more legible on paper and generally did some tidying up (Verdana is optimised for easy reading on screen, it doesn’t work as well on paper). I then attached the style sheets as follows, so that when a user prints out the webpage they get a nicely formatted printout, and when they view it on screen they get a sexy interactive layout:
<link rel='stylesheet' type='text/css' media="screen, projection" title="coughdrop for screen" href='/css/coughdrop/index.css' /> <link rel='stylesheet' type='text/css' media="print" title="generic print style" href='/css/print/print.css' />
This worked exactly as intended in Internet Explorer, but failed in Firefox, which refused to load the
print.css. This was an odd turnout for the books, and after half an hour of research it was apparent that other people were having the very same problems and I’d not come across a single solution. After some tinkering I found out what was going wrong.
Getting Firefox to play ball
The above code is completely valid, but there appears to be a slight bug in Firefox’s implementation. If the
title attribute is present in a
media="print" link declaration, then Firefox will not load the print stylesheets. Simply removing the
title attribute made everything work. Here’s the code make Firefox work properly:
<link rel='stylesheet' type='text/css' media="screen, projection" title="coughdrop for screen" href='/css/coughdrop/index.css' /> <link rel='stylesheet' type='text/css' media="print" href='/css/print/print.css' />