filling space left by display:none

[esllou]

I use a php script to give my users printable versions of every page on my site. On some of those pages, I use CSS to hide various ads and book links so that the printable version contains only text....BUT there is always a big space where the ads or book links were:

********xxxxxx
xxxxxxxxxxxx
xxxxxxxxxxxx
xxxxxxxxxxxx
xxxxxxxx
xxxxxxxx
xxxxxxxx
xxxxxxxxxxxx
xxxxxxxxxxxx
xxxxxxxxxxxx

any chance of being able to get rid of that space on the right of the articles where the book ads are in the original non-printable version?

can a display:none space be filled in?

[TheDoctor]

"display:none;" doesn't leave a space. Any blank spaces you have must be the result of something else you've done. Are you, for example, absolutely positioning the other elements?

[esllou]

actually, I was going by memory. What I actually use is visibility:hidden

so, obvious question, should I instead be using display:none?

:-)

[TheDoctor]

I'd try it. I use display:none all over the place in CSS for printing, and I've never had any trouble (yet? :)).

[esllou]

yeah, works like a dream.

just out of interest, how have you implemented "printable version" on your site using css?

[Reflection]

I usually set all my container divs inside my print style sheet, with the exception of the main content div, to display:none;. I also change the font sizes to pt.

[TheDoctor]

I do about the same as Reflection. I also remove underlines from links, change their colour to black, and other bits and pieces like that. There's some specific stuff that's formatted radically differently for screen and print, because I think it looks best one way on screen and another way on paper. If you're using CSS there's absolutely no reason as to why the formats of screen and print should be remotely alike - although it's probably useful if the reader can find the same piece of information on each ;)

I've also had problems with IE5 and IE5.5 and print CSS, in that neither seems to recognise @media Print {} and tries to apply the code conatin therein to the screen. I therefore hide the print CSS from these browsers.

[esllou]

so, how do you actually implement the print version. When someone clicks on the "print version", what happens? Do they get the same page reloaded but using the print style sheet instead of the standard?

sounds an easy way to sort out the printing problem and what I would have done had I not found this great print script.

[Reflection]

You place your print styles in a print style sheet, print.css

You call the print style sheet by using the print media rule.

When a user uses the print function of their browser the print style sheet rules are applied.

[esllou]

ok, great.

simple, clean, effective.