WebFX Tab Panes - PRINT

[perpetualshaun]

Sadly, it appears the 'forum' on their site is just for show and doesn't actually work. Nice!

Anyone else out there used these 'tab panes': http://webfx.eae.net/

I've used them on a handful of sites now and I really like them. But we recently used them for a client of ours and he wants to be able to get one, clean printoff. I tried several things in the CSS (using a print.css stylesheet) but nothing seemed to work. Ideally, I'd like to find a way to stack the panes on top of one another when you print. That way, my client can press the print button ONCE and get all the pages from the rather lengthy display.

Anyone else out there ran into something like this? Here's a site I built that's using the tab panes: http://www.rflinx.com/help/calculations/. Note that this is NOT the site that has the print.css file on it, but I could easily add it if this post finds someone that may be able to help.


Thanks,
--
Shaun Worcester | senior webologist

designchemistry, llc | next generation web site design
p. 800 640 0424 x 105 | http://designchemistry.com/

[aj_nsc]

Hmmm....they looked stacked to me in the markup - are you sure you specified the proper media types for your stylesheets? Simply naming a stylesheet print.css doesn't do it. You seem fairly savvy, so I imagine you did specify media="screen" on your web stylesheet and media="print" on your print.css, so don't get offended by this post, if it doesn't help you out.

[perpetualshaun]

No offense taken... I can see how/why you would ask that based on the information provided. But yes - I have added that in the CSS. For you, and anyone else who may be looking at this post, here's some more code snippets from the site in question...

I have the following links to my style sheets in the header:

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


And then here's some of the CSS I have in the print.css:

.tab-page {
display: block;
}


... and then here is some of the code on the page:

<div class="tab-pane tall-tabs" id="tabPane1">
<script type="text/javascript">
tp1 = new WebFXTabPane( document.getElementById( "tabPane1" ) );
//tp1.setClassNameTag( "dynamic-tab-pane-control-luna" );
//alert( 0 )
</script>
<div class="tab-page" id="tabPage1">
<div class="tab">tab 1</div>
<script type="text/javascript">tp1.addTabPage( document.getElementById( "tabPage1" ) );</script>
some stuff...
<!-- #tabPage1 -->
</div>
<div class="tab-page" id="tabPage2">
<div class="tab">tab 2</div>
<script type="text/javascript">tp1.addTabPage( document.getElementById( "tabPage2" ) );</script>
some other stuff...
<!-- #tabPage2 -->
</div>
<!-- #tabPane1 -->
</div>


Any ideas?

[aj_nsc]

Why media="all" ??? Isn't "print" part of "all"? Change "all" to "screen"?

Depending on how the rules in your print.css are written, the rules in your screen.css might overwrite them. To see what your ouput looks like, change media="print" to media="all" and what you see on your screen should be what comes out on your printer - there's likely no change, I'm guessing.

If that doesn't work, it would be good to provide an actual link to a page where both sheets are defined, or at least the HTML source and the contents of both screen.css and print.css