Different style sheet for printing

[Mike Lewis]

I have created a web page which includes a navigation bar down the left hand side. When the page is printed, I'd like to suppress this bar.

My normal style sheet includes the following code:

.sidebar
{
  width: 15%;
  float: left;
  margin: 0;
  padding: 0;
}

I apply this to the DIV that holds the navigation bar.

I have also created a second style sheet, for use with printed output. Here, the above code has been modified as follows:

.sidebar
{
  width: [b]0%[/b];
  float: left;
  margin: 0;
  padding: 0;
  [b]visibility:hidden;[/b]
}

The result is that the navigation bar does not appear during printing, which is what I want. But, in its place, I get a wide margin, extending across the left-most 8 cm of the page.

Is there any way I can hide the sidebar, and get the main text to start printing near the left-hand side of the page? Is my overall approach correct, or is there some better way of hiding elements during printing?

Thanks in advance.

Mike


__________________________________
Mike Lewis (Edinburgh, Scotland)

My Visual FoxPro site: www.ml-consult.co.uk

 

[Mike Lewis]

I think I've solved it.

Instead of:

visibility:hidden;

I used:

display:none;

It looks better now. I'll experiment some more. In the meantime, I'd still be interested in hearing any comments on whether my overall approach is the best way.

Mike

__________________________________
Mike Lewis (Edinburgh, Scotland)

My Visual FoxPro site: www.ml-consult.co.uk

 

[Ascalonian]

I think that is a reasonable conclusion. Great job on figuring this out!

 

[Vragabond]

[tt]visibility: hidden;[/tt] hides the element -- it makes it invisible. Still, the element occupies the same space it would if it were visible. Just like you still bump in all the invisible people on your way to work.

However, [tt]display: none;[/tt] simply instructs the renderer to not create that element in the first place. Since the element does not get rendered, it does not take up any space. In your case, you were looking for display property.

___________________________________________________________
[small]Do something about world cancer today: PACT[/small]

 

[ChrisHunt]

Yeah, you can just do

.sidebar {display: none;}

on your print stylesheet.

[tt]visibility:hidden[/tt] is like printing it in invisible ink - you can't see it, but it stil takes up space of the page/screeen.

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd

 

[Mike Lewis]

Mikey, Vragabond and Chris,

Thanks to you all for confirming what I figured out. I understand the issue much better now, especially given Chris's "invisible ink" analogy.

Mike


__________________________________
Mike Lewis (Edinburgh, Scotland)

My Visual FoxPro site: www.ml-consult.co.uk