View Full Version : Help with Style Sheet Switcher script

02-15-2006, 08:37 PM
I am trying to implement the Style Sheet Switcher (v1.0) script:http://www.dynamicdrive.com/dynamicindex9/stylesheetswitcher.htm, but I need some help, please!

What I would like to do is have one page version that prints "as is", just as it appears on screen, and then have the option to switch to a text-only version on screen that also prints as text only. I have created a default stylesheet as well as a print.css, but am not sure how to implement the style switcher. So far I have:

<link rel="stylesheet" href="styles.css" type="text/css" media="screen" />
<link rel="alternate stylesheet" href="print.css" type="text/css" title="text-only" media="screen" />

so i can switch the screen styles, but what do I put to enable the respective print styles? I can't seem to figure it out...

Thanks in advance for any help!

02-15-2006, 09:34 PM
Try getting rid of:


from both links.

02-15-2006, 10:51 PM
Well, it works in FF, but surprise, surprise - in IE6 the text-only version only works on screen, the Print Preview is not the text-only version. Any thoughts on how to get around that?


02-15-2006, 11:13 PM
The only thing I can think of without seeing a demo of your problem would be to try using the attribute:

media="screen, print"

for the second link or both links.

Before even trying that (as well as after), make sure the old version of the page isn't in the browser cache before testing the print preview. It may display on your screen one way but, be in the cache another, causing the preview to appear as before.

02-16-2006, 03:53 PM
I tried refreshing and still no luck. Then I tried the "media="screen, print" and that didn't do anything either. So I posted a test here: http://testing01234.tripod.com/. (Switch buttons at very bottom of page for now.) And while I've got you there, I might as well I mention another problem: I can't get "printheader" to appear on the text-only version. I'm not sure what I've screwed up, but if I get rid of #printheader{ display: none;} in the default styles.css, it shows up on both versions of the page.

Thanks again for all the help!

02-16-2006, 04:25 PM
I should have mentioned at first that, the way this sort of situation is usually dealt with is to have two stylesheets. One with media="screen", the other with media="print". No script and no choice for the user to make. The user sees one version and the printer prints another. If you were unaware of this, then you may want to take this approach. If on the other hand, you know about this and want the user to see the two available styles, more work is needed. I would first try media="all" for the second or both linked stylesheets. If some combination of that doesn't get it, I or someone else will have a closer look. It is a question in my mind, after the alternate stylesheet is selected, what happens to the default? Does it still have some influence? Apparently so in IE. Either that, or the print styles are not specific enough for IE.

02-16-2006, 05:42 PM
Yes, I originally had the two stylesheets linked as one for media & the other for print, but then I had readers saying, "How come when I print the page it's just black & white & no pictures?" So I guess you just can't win!!! Anyway, that's why I'm trying to give them the two options.