View Full Version : Print CSS - Best Way to Make it Work?

01-21-2005, 06:22 PM
Hey All,

Another question. I'm working on a print-specific stylesheet. When I preview, the content stretches off the right of the page. I'm fairly certain this is because the table I'm using is wider than the page. However, with the background images I'm using, I need to use a table in this instance.

How can I make this work via CSS?

The page is www.witchkraftracing.com/glmmrs/about.asp

You can see the stylesheets here:



01-21-2005, 08:58 PM
In your print CSS you could take out the background image (more ink) and decrease the width of the table.

Why are you using a table? I'd understand if it was some necessary hack, but your design can be done w/ CSS easily, and it's so close already...

01-21-2005, 09:35 PM
How can I shorten the table via css?

How can I make the page work without tables? Before getting into the 3 background images that are used, I still need the outer table just to ensure the page is 100% in height and that the footer element (the bottom TD tag) is always positioned at the bottom of the page.

Then the background images. There are two that are within TD tags (the left and right fade), along with the overall background image (which wouldn't be an issue via CSS).

I briefly tried doing it via CSS and had problems with the left/right fade images.

01-21-2005, 09:57 PM
You can shorten the table by adding this to your print CSS:

table {
width: 500px;

Or whatever you want the width to be. Since it's printing you could use cm or in, too.

About the no tables... Instead of three background images, you could use one that centers in the page. You can get away with this because it's a fixed width layout. Make a container div to hold all your stuff in, give it "position: relative". Give the html and body 100% (so it stretches the full height of the browser window), give the container 100% height (so it stretches the full height of the body and html), and position the footer at the bottom of the container using "position: absolute".

Here's some code:

<meta http-equiv="content-type" content="text/html; charset=utf-8">
<style type="text/css">

html, body {
height: 100%;

body {
background: url(background.gif) repeat-y top center;
padding: 0;
margin: 0;

#container {
margin: 0 auto;
width: 720px;
height: 100%;
border: dotted 1px #000;
position: relative;

#footer {
position: absolute;
bottom: 0;



<div id="container">
<h1>Example page</h1>
<p>This container, with a dotted (dashed if you are using IE) border should stretch from top to bottom.</p>
<p id="footer">Here is the footer. It should be at the bottom.</p>


And a link to an example (http://richardmedek.com/temp/example3.htm). Hope it helps,

01-22-2005, 04:17 PM
Nice .. I'll give this a try and get back to you and let you know how it works.


01-22-2005, 07:14 PM
edit* negative margins...duh

01-22-2005, 07:34 PM
hey...Edit:Why use negative margins. With your current css, you're just throwing yourself into a deeper pit of non-compatibility. try using the simple cross-browser css below. i'm confused as to why you have all that -moz- proprietary css...here's the fix for the footer:

#footer {
border: 1px solid black;
background: transparent url(foot.jpg) repeat scroll 0%;
margin-bottom: 0;
height: 95px;
width: 100%;

and it will behave correctly. no need for absolute positioning or any of that other stuff...the 95px height was just a random guess at the height of that image and it looked correct when tested...you can correct it if its not

01-22-2005, 07:41 PM

I just used rmedek's example as the base.

You fixed it up with that.


to what i was talking about before the edit. http://harbinger.reefcrazed.com/test/extra.html

just plugged in some images into rmedek's code.

01-22-2005, 08:45 PM
you still have that margin at the bottom :confused: dont use absolute positioning..

01-22-2005, 08:52 PM
The absolute positioning is there to keep the footer at the bottom of the page when the page's content isn't enough to fill the page. The page is set at 100%, so if there was no positioning, if the content only filled half the page, the footer would be in the middle, and there would be half a page of empty background images.

If the footer is, say, 95px tall all you have to do is add 95px of margin at the bottom to make room for the footer (since it's absolutely positioned, it's out of flow and therefore would cover up any part of the content that stretched past the page if the margin wasn't there).

Hopefully this explains things a little more...

01-22-2005, 09:47 PM
Minor note - in doing the above, the scroll bar is always there and always moves just a hair - even without any content to cause the page to have to scroll.

Minor I know, but ideally the scroll bar shouldn't be showing ..

Hmm ..

01-22-2005, 09:56 PM
Did you take out the extra padding and margin in the body and html?

That's the tricky thing about using this method to get the footer at the bottom... if you apply 100% height to the page, the actual page height is the height PLUS margins, padding, and border (remember the box model?). So it gets a little wacky sometimes.

One sneaky way out of it is to apply a background image of the bottom of the column to the footer, then no matter where the footer is it still looks good. Just an idea... you can see it on a page (http://aztalentsource.com/temp) I'm working on...

01-22-2005, 11:56 PM

No, it's not like that anymore. The link still goes to the example. I used your fix and it all works right.


I hopped on this thread since your example was in here. The link to kraftomatic's page didn't work for me so I didn't have a visual example of his question. I just was up and thought I would plug my stuff into your example to see if it would work for what I was doing..

Between the both of you I fixed a problem that was bugging me for a day or so. So far so good.

01-23-2005, 02:09 AM
On a bit of a tangent, with a background image, can you specify that you want that to be printed? By default, background images don't print.


01-23-2005, 02:22 AM
Hmmmmmrrrr... I don't know. I don't think so, maybe someone has a better solution. Usually I take out most images when I print, so I've never run into that problem...

01-23-2005, 02:25 AM
Hmmmmmrrrr... I don't know. I don't think so, maybe someone has a better solution. Usually I take out most images when I print, so I've never run into that problem...

Yeah, me too, but in this case (www.glmmrs.com) I want to print the GLMMRS header image. I can move it to within an IMG tag, but I already had it nice and ready to go. :)

01-23-2005, 03:50 AM
Yeah, me too, but in this case (www.glmmrs.com) I want to print the GLMMRS header image. I can move it to within an IMG tag, but I already had it nice and ready to go. :)

Fixed this. Just having the problem of the table widths. I set the table width within the printable CSS file, but the hardcoded value within the page itself overrides it.

I still don't have a 100% css-solution from above either.

Hmmm .. .