Sticky footer @media=print?

HTML & CSS
1

We all know that we can do sticky footer for media=screen as evidenced many times over, but want I want to try to do is accomplish it for media=print (letter size page).

Reason: a copyright footer div to be displayed at the bottom of the sheet and not in the middle of the page subsequent to the content div when content spans multiple pages but doesn’t fill the final page.

I’ve tried using table/thead/tfoot and that really turned out to be a royal PITA (especially x-browser). So, now I’m trying to think outside the [page]box as it were. :lol:

Possible?

2

HI,

You could try something like this but it won’t work in ie6. It seems to work in IE7 and Firefox but you would need to ensure the page content doesn’t overwrite the footer.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css" media="screen">
#print-footer {
    display: none;
}
</style>
<style type="text/css" media="print">
#print-footer {
    display: block;
    position: fixed;
    bottom: 0;
    left:0;
}
h1 {
    page-break-after:always;/* for testing only*/
}

body {padding-bottom:50px}/* attempt to preserve space at bottom so content doesn't over-ride the footer */

</style>
</head>
<body>
<h1>Testing</h1>
<h1>Testing</h1>
<h1>Testing</h1>
<div id="print-footer">Copyright message</div>
</body>
</html>

Not sure how reliable it will be though.

3

Thanks for the reply Paul. I’ve now ended up going a completely different route though as this wasn’t quite reliable enough with the variation in content I had.

After some massive float and margin rearrangement I’ve successfully eliminated the multi-page issue (essentially limiting the content to one printed page). Since this is a single-purpose, closed (private intranet only) site, I can control the content a bit more than normal.

I only have one problem browser left, IE8. For some reason it is not liking position:fixed for my footer and is dropping it below the fold. :confused:

4

Did you make sure you set the coordinates for the position:fixed element? If it has a value of greater the nthe viewport / a higher percent then 100% it will go off the screen.

5

Hey Ryan -

Yeah.

The footer is set as

#footer {position:fixed; bottom:0; left:0;} and is contained in the body element (e.g., outside the wrapper) because it is a “sticky footer” when media=screen (using Paul’s scheme - but only two columns above not three).

Another weird one in IE8 is that I have a page with nested uls where the dot doesn’t appear on screen, but works fine in print. There’s no change in the CSS for the ul when media=print, so that one has me baffled as well.

I’m not at a location I can grab the appropriate snippets atm, but I’ll post em tomorrow when I am back in the office.

6

Gah - that 10 post thing is annoying.

Can’t even put a link of any kind in

 without it triggering (even obfuscated).  So looks like I can't post the snippets.
7

Leave off the www and http parts and replace “.” width dot.

e.g. pmob(dot)com

8

Ok - I finally managed to get this to a point where the site would let me post it.
Doctype links mangled for posting… also “.” replaced with " dot " on many links.

The footer problem is evident only in print/print preview.
The ul/nested ul image problem is only evident on screen.
Both in IE8

Here’s the main page template: (it uses php, but only for some date stuff and the nav menu import)
Name it test dot php if you’re saving it to disk


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "www dot w3 dot org/TR/xhtml1/DTD/xhtml1-strict dot dtd">
<html xmlns="www dot w3 dot org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="Expires" content="Fri, 31 Dec 1999 23:59:59 GMT" />
<link rel="stylesheet" type="text/css" href="../test.css" />
<!--[if (lte IE 6)|(gte IE 8)]>
<style type="text/css">
#outer {height:100&#37;; display:table;}
</style>
<![endif]-->
<!--[if IE 6]>
<style type="text/css">
@media print{#footer{position:absolute;left:0;bottom:0;}}
</style>
<![endif]-->
</head>
<body>
<div id="outer">
	<div id="inner">
		<div id="header"><a href="#" name="top"></a></div>
		<div id="header_rule"><!--IE6Hack--></div>
		<div id="contentwrapper">
			<div id="content">
				<div class="innertube">
					<p id="date" class="novis"><?php echo date('D., F j, Y'); ?></p>
					<img src="../dummy.gif" class="pageart" width="180" height="250" alt="Artwork" />
					<p class="sectionhead">Section Heading Here</p>
					<p class="bodytext"><span class="heading1">Body Heading Here (if required)</span><br />
							Content Here</p>
					<p class="bodytext">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi eget elit. Donec pulvinar. Fusce non est ac libero blandit laoreet. Pellentesque iaculis erat. Cras ullamcorper. Vivamus et nibh. Quisque vel leo vitae felis hendrerit fermentum. Donec consectetuer, nunc id mattis elementum, lacus ligula fringilla leo, quis varius lacus turpis sit amet massa. Morbi accumsan ante suscipit ipsum. Curabitur non tellus nec metus venenatis iaculis. Donec tempor nunc. Mauris sit amet erat. Vestibulum sed nulla ac nisl dapibus porta. Praesent a nisi quis nisl cursus tempor. Praesent semper laoreet nisl. Donec id urna.</p>
					<p class="bodytext">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi eget elit. Donec pulvinar. Fusce non est ac libero blandit laoreet. Pellentesque iaculis erat. Cras ullamcorper. Vivamus et nibh. Quisque vel leo vitae felis hendrerit fermentum. Donec consectetuer, nunc id mattis elementum, lacus ligula fringilla leo, quis varius lacus turpis sit amet massa. Morbi accumsan ante suscipit ipsum. Curabitur non tellus nec metus venenatis iaculis. Donec tempor nunc. Mauris sit amet erat. Vestibulum sed nulla ac nisl dapibus porta. Praesent a nisi quis nisl cursus tempor. Praesent semper laoreet nisl. Donec id urna.</p>
					<ul class="bodytext_ul">
					<li>Blah blah blah yada yada yada</li>
					<li>Blah blah blah yada yada yada:
						<ul class="bodytext_ul_nested">
							<li>Blah blah blah yada yada yada</li>
							<li>Blah blah blah yada yada yada</li>
							<li>Blah blah blah yada yada yada</li>
							<li>Blah blah blah yada yada yada</li>
							<li>Blah blah blah yada yada yada</li>
	          </ul>
					</li>
					<li>Blah blah blah yada yada yada</li>
					</ul>
					<div id="subnav" class="noprint"><a href="#top">top</a></div>
				</div>
			</div>
		</div>

		<div id="nav" class="noprint">
			<div class="innertube noprint"><?php include 'navigation dot php'; ?></div>
		</div>

	</div>
</div>
<div id="footer">Copyright &copy; 2007-<?php echo date('Y'); ?> Company Name<span class="noprint"> &nbsp;|&nbsp;<a href="#">Disclosures</a></span></div>
</body>
</html>

Here’s the navigation “page” (it requires php):
Name it navigation dot php if you’re saving it to disk.


<?php

// Variable Initialization

$menu_array[0] = "home";
$menu_array[1] = "page1";
$menu_array[2] = "page2";
$menu_array[3] = "page3";
$menu_array[4] = "page4";
$menu_array[5] = "page5";
$menu_array[6] = "page6";
$menu_array[7] = "template"; // for testing only - remove to publish

$page_array[0] = "index dot php";
$page_array[1] = "page1 dot php";
$page_array[2] = "page2 dot php";
$page_array[3] = "page3 dot php";
$page_array[4] = "page4 dot php";
$page_array[5] = "page5 dot php";
$page_array[6] = "page6 dot php";
$page_array[7] = "test dot php"; // for testing only - remove to publish

// Get the current URL

$current_url = $_SERVER["REQUEST_URI"];

// Truncate the URL removing the leading :/)

$file = substr(strrchr($current_url, "/"), 1);

// When there is no filename use the default name

if($file == "") {
	$file = "default dot php";
	}

// If the filename doesn't end with php use the default name
if(substr($file, -3, 3) != "php") {
	$file = "default dot php";
	}

// Generate the Menu
// change 7 to 6 below to publish due to removal of template from array

echo '<div id="menu" class="noprint">';  // Menu Div

for ($counter = 0;$counter <= 7 /*6*/ ;$counter += 1) {
	if ($file == $page_array[$counter]) {
		echo '<span class="links_nav-active">' . $menu_array[$counter] . '</span><br />';
	} else {
		echo '<a href="../' . $page_array[$counter] . '" class="links_nav">' . $menu_array[$counter] . '</a><br />';
	}
}	
echo '</div>'; // End Menu Div

// Logo area
echo '<div id="navlogo" class="noprint"><img src="../../images/dummy.gif" width="135" height="55"  alt="logo" /></div>';

//Debug Output - uncomment to use
/*
echo '<small>Current URL: <br />' . $current_url . '<br /></small>';
echo '<small>file: <br />' . $file . '<br /></small>';
*/
?>

Here’s the main CSS: (stripped down some - removing non used items on this page)
Name it test dot css when saving.


/* Import CSS Reset to zero everything out */

@import url(reset.css);

/* ***Begin our Formatting*** */

*.hr {
	width:98%;
	margin:0 auto;
	border:0px;
	line-height:2px;
	font-size:2px;
	background-color:#333333;
}

*.hr hr {display:none}

a:link {text-decoration:none}	

a:hover {color:#FF7600; text-decoration:none}

img {border:0px}

html, body {height:100%;}

html {background-color:#F5F5F5;}

body {width:1000px; margin:0 auto;}

/*Opera Fix*/
body:before {
    content:"";
    height:100%;
    float:left;
    width:0;
}

#outer {
    width:1000px;
    background-color:transparent;
    margin:auto;
    min-height:100%;
    margin-top:-14pt;
}

#inner {width:1000px; float:left;}

#header {
	height:117px;
	background-color:#4C1601;
	background-image:url(images/dummy.gif); /* image is 740px wide x 117px high */
	background-repeat:no-repeat;
	background-position:left top;
	border-top:14pt solid #4C1601;
}

#header_rule {
	height:4px;
	background-image:url(images/dummy.gif); /* image is 740px wide x 4px high */
	background-repeat:no-repeat;
	background-position:left top;
	background-color:#000;
	text-align:center;
}

#footer {
	font-family:Arial, Helvetica, sans-serif;
	font-size:7pt;
	color:#FFFFFF;
	text-decoration:none;
	background-color:#4C1601;
	text-align:left;
	text-indent:1.5em;
	width:1000px;
	margin:auto;
	height:14pt;
	line-height:14pt;
	clear:both;
}

#footer a {
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:7pt;
	color:#FFFFFF;
	text-decoration:none;
}

#footer a:hover {color:#FF7600; text-decoration:none;}

#contentwrapper {
	width:1000px;
	min-height:100%;
	margin:0;
	background-image:url(images/dummy.gif); /* image is 740px wide x 95 px tall */
	background-repeat:no-repeat;
	background-position:left top;
	background-color:#fff;
	float:left;
}

#content {margin:0 0 0 156px; background-color:transparent; text-align:left;}

#date {
	font-family:Arial, Helvetica, sans-serif;
	font-size:8pt;
	color:#777777;
	text-transform:uppercase;
	text-decoration:none;
	text-align:center;
	padding:1.5em 0 20px 0;
	margin:0;	
	float:right;
}

#nav {
	width:156px;
	margin-left:-1000px;
	text-align:left;
	background-color:transparent;
	float:left;
}

#menu {padding:1em 0 1em; background-color:transparent;}

#navlogo {text-align:center; border:none; margin:0; background-color:transparent;}

#subnav {
	margin:0;
	background-color:transparent;
	padding-top:.75em;
	padding-right:1em;
	text-align:right;
	clear:right;
}

#subnav a {
	font-family:Arial, Helvetica, sans-serif;
	font-size:8pt;
	color:#4C1601;
	text-transform:uppercase;
	text-decoration:none;
	letter-spacing:1px;
}

#subnav a:hover {color:#FF7600; text-decoration:none;}

.bodytext {
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:8.5pt;
	line-height:12pt;
	color:#333333;
	padding-bottom:1em;
}

.bodytext_ul {
	margin:0;
	padding-left:2em;
	padding-bottom:1em;
	list-style-position:outside;
	list-style-image:url(images/dummy.gif); /* image is 4px wide x 11px high
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:8.5pt;
	line-height:12pt;
	color:#333333;	
}

.bodytext_ul_nested {
	margin:0;
	padding-left:3em;
	list-style-position:outside;
	list-style-image:url(images/dummy.gif); /* image is 4px wide x 11px high
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:8.5pt;
	line-height:12pt;
	color:#333333;	
}

.innertube {margin:0 10px 10px 10px; background-color:transparent;}

.links_bodytext {
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:8.5pt;
	font-weight:normal;
	line-height:12pt;
	color:#4C1601;
	text-transform:none;
	text-decoration:none;
}

.links_nav {
	font-family:Arial, Helvetica, sans-serif;
	font-size:7.5pt;
	line-height:24px;
	color:#333333;
	text-transform:uppercase;
	text-decoration:none;
	letter-spacing:1px;
}

.links_nav-active {
	font-family:Arial, Helvetica, sans-serif;
	font-size:7.5pt;
	line-height:24px;
	color:#4C1601;
	text-transform:uppercase;
	text-decoration:none;
	letter-spacing:1px;
}

.pageart {border:1px solid #666666; margin:0 0 10px 10px; float:right; clear:right;}

.sectionhead {
	padding-top:.5em;
	height:1.5em;
	letter-spacing:1px;
	font-family:"Times New Roman", Times, serif;
	font-size:18pt;
	font-weight:normal;
	font-style:normal;
	color:#4C1601;
	text-decoration:none;
	text-transform:capitalize;
}

/*  ***Printing Rules*** */

@media print {

/* Hide everything we're not printing */

.noprint {display:none; margin:0; padding:0;}
.novis {visibility:hidden;}

/* Reformat the content for printing */

html {background-color:transparent;}

body, #outer, #inner, #contentwrapper, #footer {width:750px;}

#content {margin-left:0;}

#date {padding:0 0 5px;}

#contentwrapper {background-image:none; background-color:transparent;}

/* header and header_rule below perform gfx replacement to a simpler print header */

#header {
	height: 40px;
	background-color:transparent;
	background-image:url(images/dummy.gif); /* this image is 530px wide x 40px high */
	background-position:left top;
	border-top:none;
}

#header_rule {background-image:none;}

/* footer below removes background color / alters text to black / places footer @ bottom of page in standards browsers */

#footer {color:black; background-color:transparent; position:fixed; bottom:0; left:0; border-top: solid black 1px;}

#outer {margin:0}
}
/* ***EOF*** */

Here’s the reset CSS:
Name it reset dot css when saving


/* Reset Reloaded - with thanks to Eric Meyer, et. al */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-weight: inherit;
	font-style: inherit;
	font-size: 100%;
	font-family: inherit;
	vertical-align: baseline;
}
/* remember to define focus styles! */
:focus {
	outline: 0;
}
body {
	line-height: 1;
	color: black;
	background: white;
}
ol, ul {
	list-style: none;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: separate;
	border-spacing: 0;
}
caption, th, td {
	text-align: left;
	font-weight: normal;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: "";
}
blockquote, q {
	quotes: "" "";
}
9

Gah - ok. I figured this out and it has nothing to do with the page design.

It is the copy of IE8 I was using to test. Apparently, IE8 on Win7 is a “special” build which is not the same as anything else. I installed IE8 on another machine I have and it is fine. :eye:

I apoligize for taking up anyone’s time with this. :injured:

10

You may have just set the IE8 to a differnt mode. You shouldn’t needa new IE8 to test on…but rather switch the mode back. Which are you on?

11

IE8 on Win7 is a “special” build which is not the same as anything else.

Yes the version on win 7 is still a beta and not in full working order. I have had a number of clients say they have problems on win7 unaware that ie8 hasn’t been finalised there yet.

Hopefully these bugs will be fixed as it seems to be quite broken at the moment.:slight_smile:

12

Yeah - it is borked in sneaky little ways. All is well on a “live” IE8 though.

Pretty good - the site works on just about everything at this point. From FF v1.5 to 3.0.10 and IE 6 to 8. Opera and Safari still have a few issues in print mode that I need to iron out though.