ansaurus

Question

Print footer at bottom of page in safari

Answer 1

A:

You could try using position:fixed instead, but I'm not sure it's quite the effect you're looking for.

Litso 2010-09-21 12:24:54

Unfortunately 'fixed' gives the same (wrong) behaviour

Richard 2010-09-21 12:46:52

Answer 2

A:

CSS doesn't make this easy. There's a whole bunch of ways to achieve this, but they tend to be very hacky, or else (as you've found) not work in all browsers.

The best solution I've found has been is at CSSStickyFooter.com, which seems to be pretty good in all respects.

hope that helps.

Spudley 2010-09-21 12:32:33

Nope...it sits up the middle of the page too

Richard 2010-09-21 12:50:11

@Richard: Are you sure? I just opened the cssstickyfooter.com page in Safari, and it looks fine, with the footer stuck to the bottom of the browser as intended. (Safari v5.0.2, but I'm quite sure it worked in earlier versions too when I tried it previously)

Spudley 2010-09-21 13:18:14

I think the problem is the printed page, not the view page.

Mauro 2010-09-21 13:20:48

Sorry...I didn't make it very clear in the original post. I am looking to position is at the bottom of a printed page (ie. On A4 paper). It works correctly on screen but when you print it the footer sits at about the height its at in the browser so the print out resembles what you see on screen. Unfortunately this is not the bottom of the print out where I want the footer to show up.

Richard 2010-09-21 13:22:03

Ah, that explains. I misunderstood you, sorry.

Litso 2010-09-21 13:30:11

Ah right. I missed that in the question. Hmm... that might be tricky. CSS does have some print-specific functionality, which may help you (google [css @print](http://www.google.com/search?q=css+%40print)), but footer positioning is hard enough in the browser window, let alone in print which browser makers put so much less effort into.

Spudley 2010-09-21 14:00:37

Answer 3

A:

I just printed this out in Chrome (same rendering engine as Safari), and the line showed at the bottom...

<!DOCTYPE html> 
<html> 
  <head> 
    <title>Testing</title> 
    <style type="text/css" media="print">
      html, body { margin: 0; padding: 0; }
      body { height: 11in;  width: 8.5in; }
      #footer { position: absolute; bottom: 0; }
    </style> 
  </head> 
  <body> 
    <div id="footer"> 
      This will always print at the bottom
    </div> 
  </body> 
</html>

Notice that I have media="print" on the style tag. For more on this, read Going to Print on ALA.

Josh Stodola 2010-09-21 13:44:11

Thanks. I didn't realise you could specify a size in terms of inches / cm.

Richard 2010-09-21 13:59:19

@Richard Absolute units in CSS: http://www.w3.org/TR/css3-values/#absolute0

Josh Stodola 2010-09-21 16:18:24

Answer 4

A:

Have you tried this version?

http://www.themaninblue.com/experiment/footerStickAlt/

I know it works in browsers, but not sure about print.

Alex 2010-09-21 13:47:08

ansaurus

tags:

views:

answers:

Print footer at bottom of page in safari

related questions