19 replies [Last post]
pixeline
Offline
Regular
Brussels, Belgium
Last seen: 15 years 15 weeks ago
Brussels, Belgium
Timezone: GMT+1
Joined: 2004-07-02
Posts: 30
Points: 0

hello there !

on this soon to be released website , i have a weird issue, related to page printing.

I use this code to link to a stylesheet dedicated to printing:
<link href="http://www.foodlawconsultants.com/temp/_css/print.css" rel="stylesheet" type="text/css" media="print"/>

now, if i try to print, it works, but only the first page gets printed !

any idea why's that ?

Thank you !

alexandre

........................................ . . . . .
p . x e l | n e
Brussels web designer pixeline

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 49 weeks 5 days ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

problem with print stylesheet

Hi

First, get a doctype. It really isn't a good idea to leave browsers in quirks mode.

Second, remove the overflow:auto from the body style in the print.css.

Trevor

pixeline
Offline
Regular
Brussels, Belgium
Last seen: 15 years 15 weeks ago
Brussels, Belgium
Timezone: GMT+1
Joined: 2004-07-02
Posts: 30
Points: 0

problem with print stylesheet

hello ClevaTreva,

thank you for your speedy reply Smile

i've set up a test page here, in which i try your suggestions.

in fact, it works in IE, but not in firefox...

i did what you advised, but so far, it's the same.
good point about the doctype though, i don't need the quirksmode anymore (that was an old tempative solution to an old issue )

........................................ . . . . .
p . x e l | n e
Brussels web designer pixeline

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 49 weeks 5 days ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

problem with print stylesheet

Hi

I just opened the print.css file and the body style still has oveflow:auto enabled

Trevor

pixeline
Offline
Regular
Brussels, Belgium
Last seen: 15 years 15 weeks ago
Brussels, Belgium
Timezone: GMT+1
Joined: 2004-07-02
Posts: 30
Points: 0

problem with print stylesheet

well, it really is now Smile but still...

........................................ . . . . .
p . x e l | n e
Brussels web designer pixeline

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 49 weeks 5 days ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

problem with print stylesheet

Hi

I just printed that in FF, 3 pages chugged out.

Printed it in IE, 4 pages chugged out. Same content (crap settings for IE, my fault).

Have you cleared your browser cache?

Eurofood was the last title and paragraph to print.

Trevor

pixeline
Offline
Regular
Brussels, Belgium
Last seen: 15 years 15 weeks ago
Brussels, Belgium
Timezone: GMT+1
Joined: 2004-07-02
Posts: 30
Points: 0

problem with print stylesheet

Cleva, first, thank you very much for assisting me along (and wasting some paper for my sake Smile )

the last thing that should appear is "Chocolate & Confectionery International"

yes, i clear the cache all the time, but still only one page appears.

I normally use the print preview in ff and ie , so i just double-checked by a real printing, but it 's exactly the same than the print preview, just one page comes out.

the "media=screen" stylesheet is not used for printing, right ?

........................................ . . . . .
p . x e l | n e
Brussels web designer pixeline

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 49 weeks 5 days ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

problem with print stylesheet

Hi

It's using the print.css for sure.

The "Chocolate & Confectionery International" is the one before last. It has the Eurofood one last.

Just tried it again. Have you made other changes to the css? It doesn't work now!

Trevor

pixeline
Offline
Regular
Brussels, Belgium
Last seen: 15 years 15 weeks ago
Brussels, Belgium
Timezone: GMT+1
Joined: 2004-07-02
Posts: 30
Points: 0

problem with print stylesheet

no i didn't. i don't get it.

........................................ . . . . .
p . x e l | n e
Brussels web designer pixeline

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 49 weeks 5 days ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

problem with print stylesheet

Nor me.

It worked, then it didn't. I have the paper here to prove it!

Trevor

pixeline
Offline
Regular
Brussels, Belgium
Last seen: 15 years 15 weeks ago
Brussels, Belgium
Timezone: GMT+1
Joined: 2004-07-02
Posts: 30
Points: 0

problem with print stylesheet

it must be somewhere in the html no ?

because the css is kind of classic.
i'll review it now and remove any "auto" stuff..

........................................ . . . . .
p . x e l | n e
Brussels web designer pixeline

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 49 weeks 5 days ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

problem with print stylesheet

pixeline wrote:
it must be somewhere in the html no ?

because the css is kind of classic.
i'll review it now and remove any "auto" stuff..

Goodness knows. I'm not good with tables.

Trevor

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 15 hours 32 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9743
Points: 3822

problem with print stylesheet

In print.css,

make body {height: auto; overflow: visible;}

make #viewport {overflow: visible;}

Just in case, make every instance of {height: 100%;} {height:auto;}

You must specifically override such things as overflow and height.

There are entirely too many errors in your html. You must fix them if you expect things to just work.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 5 years 4 days ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

problem with print stylesheet

It may or may not prove to be a problem when Firefox 1.5 gets a full release, but at the moment that window resizing javascript (never a good idea anyway) you're using causes my window to constantly refresh which means the page is moving all the time.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 15 hours 32 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9743
Points: 3822

problem with print stylesheet

Tyssen wrote:
It may or may not prove to be a problem when Firefox 1.5 gets a full release, but at the moment that window resizing javascript (never a good idea anyway) you're using causes my window to constantly refresh which means the page is moving all the time.
I'm not getting that effect in v1.5rc3(20051111) for Linux. I do notice the default setting in pref/content/enable javascript/advanced allows scripts to move or resize existing windows. I'm changing mine as I type. Nobody has the right to mess with my desktop.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

pixeline
Offline
Regular
Brussels, Belgium
Last seen: 15 years 15 weeks ago
Brussels, Belgium
Timezone: GMT+1
Joined: 2004-07-02
Posts: 30
Points: 0

problem with print stylesheet

ah.

i've added a border to the body rule, and it seems that it does not wrap the content.

??

........................................ . . . . .
p . x e l | n e
Brussels web designer pixeline

pixeline
Offline
Regular
Brussels, Belgium
Last seen: 15 years 15 weeks ago
Brussels, Belgium
Timezone: GMT+1
Joined: 2004-07-02
Posts: 30
Points: 0

problem with print stylesheet

ok, super cool, its the javascript call that freaks it.

if i remove the calls, it work.

kk5st : if you can find a way to have the website fill the available screenspace and the center div to be the scrollable area (so that navigation menu stays always at hand), I'm all ears.
i tried for weeks, and eventually, i had to fall back to using a table and this javascript.

........................................ . . . . .
p . x e l | n e
Brussels web designer pixeline

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 15 hours 32 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9743
Points: 3822

problem with print stylesheet

I apologize for jumping to erroneous conclusions on the scripting. I saw 'resize' and assumed you were trying to resize the window, rather than an element of the page. My bad.

As to not using tables or scripting, it would be easy if only Moz browsers were involved. I went to work using tables, too, because IE does not support css2. Again with Firefox it was doable, if a little non-intuitive. IE and Opera both fail. I might try some more things, but I've spent a bit too much time on this much for a design I would choose not to implement.

Here's a basic table based approach you might be able to tweak. I'm thinking expression property in IE. No clue what to do for Opera.

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
 
<html xml:lang="en" 
      xmlns="http://www.w3.org/1999/xhtml" 
      lang="en"> 
<head> 
  <meta http-equiv="content-type" 
        content="text/html; charset=utf-8" /> 
  <meta name="generator" 
        content=" 
        HTML Tidy for Linux/x86 (vers 12 April 2005), see www.w3.org" /> 
         
  <meta name="editor" 
        content="Emacs 21" /> 
  <meta name="author" 
        content="Gary Turner" /> 
 
  <title></title> 
<style type="text/css"> 
/*<![CDATA[*/ 
 
html, body, table { 
    margin: 0; 
    padding: 0; 
    height: 100% 
    } 
 
body { 
    height: 100%; 
    } 
 
h1, h2 { 
    text-align: center; 
    } 
 
table { 
    position: absolute; 
    top: 0; 
    left: 0; 
    height: 100%; 
    width: 100%; 
    border-collapse: collapse; 
    } 
 
td { 
    vertical-align: top; 
    border: 1px solid black; 
    } 
 
tr.topbottom { 
    height: 100px; 
    } 
 
tr.mid td { 
    height: 100%; 
    } 
 
td.side { 
    width: 20%; 
    } 
 
td.center .holder { 
    overflow: auto; 
    height: 100%; 
    position: relative; 
    } 
 
#center { 
    position: absolute; 
    left: 0; 
    top: 0; 
    width: 95%; 
    } 
 
 
/*]]>*/ 
</style> 
 
</head> 
 
<body> 
  <table summary=""> 
    <tbody> 
      <tr class="topbottom"> 
        <td colspan="99"> 
          <h1>banner</h1> 
        </td> 
      </tr> 
 
      <tr class="mid"> 
        <td class="side"> 
          <h2>Left side</h2> 
        </td> 
 
        <td class="center"><div class="holder"> 
          <div id="center"> 
            <h2>Center</h2> 
 
            <p>filler copy</p> 
 
            <p>filler copy</p> 
 
            <p>filler copy</p> 
 
            <p>filler copy</p> 
 
            <p>filler copy</p> 
 
            <p>filler copy</p> 
 
            <p>filler copy</p> 
 
            <p>filler copy</p> 
 
            <p>filler copy</p> 
 
            <p>filler copy</p> 
 
            <p>filler copy</p> 
 
            <p>filler copy</p> 
          </div></div> 
        </td> 
 
        <td class="side"> 
          <h2>Right Side</h2> 
        </td> 
      </tr> 
 
      <tr class="topbottom"> 
        <td colspan="99"> 
          <p>footer</p> 
 
        </td> 
      </tr> 
    </tbody> 
  </table> 
</body> 
</html>

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 49 weeks 5 days ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

problem with print stylesheet

Hi

I know ITS FAR TOO LATE, but I know why I got a printout!

I had my javascript turned off in FF, and later, I had turned it on to do some testing of another page!

Trevor

swaddock
Offline
Regular
Hartford, Connecticut
Last seen: 7 years 28 weeks ago
Hartford, Connecticut
Timezone: GMT-4
Joined: 2007-01-31
Posts: 38
Points: 2

gary.turner wrote:In

gary.turner wrote:
In print.css,

make body {height: auto; overflow: visible;}

make #viewport {overflow: visible;}

Just in case, make every instance of {height: 100%;} {height:auto;}

You must specifically override such things as overflow and height.

There are entirely too many errors in your html. You must fix them if you expect things to just work.

cheers,

gary

Fan-damn tastic! I was running into this same issue and with the simple addition the those two attributes...Badda Bing! I don't understand how and why, but it works!

Thanks!

Born right the first time.