asked on

html Footers ?

I'm having difficulty gettting the footers to be placed at the bottom of the page. I'm creating my .xslt file with Visual Studio 2008. I'm displaying this file in a PDF browser, but my footers are not at the bottom of the page.

I've tried several methods and none seem to work. This is the latest code I'm using:

<?xml version="1.0" encoding="iso-8859-1"?>
<xsl:stylesheet version="1.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

<xsl:template match="/">
<html>
<head>

<style type="text/css">
body {
margin:0;
padding:0;
height:100%;
}
#container {
min-height:100%;
position:relative;
}
#header {
background:#ff0;
padding:10px;
}
#body {
padding:10px;
padding-bottom:60px; /* Height of the footer */
}
#footer {
position:absolute;
bottom:0;
width:100%;
height:60px; /* Height of the footer */
background:#6cf;
}
</style>
</head>
<body>
<xsl:apply-templates select="User" />
</body>
</html>
</xsl:template>

<xsl:template match="User">
<table width="100%" cellpadding="0" cellspacing="0">
<tr>
<td width="100%" align="right">
<img>
<xsl:attribute name="src">
<xsl:value-of select='ImagePath' />logo.gif
</xsl:attribute>
</img>
</td>
</tr>
</table>

<h2>
<table width="100%" cellpadding="0" cellspacing="0" colspan="2">
<tr>
<td class="center f14" >
NSPM INITIAL PERSONAL HISTORY QUESTIONAIRE (PHQ)
</td>
</tr>
</table>
<br />
<br />
</h2>

<body>
<div class="wrapper">
<p><b>All information provided will be treated as CONFIDENTIAL and seen only by persons with an authorized NEED TO KNOW.</b></p>
<div class="push"></div>
</div>

<div class="footer">
<p style="page-break-after:always; margin:0;">
Use of this form as a procedural aid does not require retention as a quality record.

<table width="100%" cellpadding="0" cellspacing="0" colspan="2">
<tr>
<td class="center f12" >
<b>CONFIDENTIAL RESTRICTED INFORMATION</b>
</td>
</tr>
</table>
</p>
</div>

</body>

ASKER CERTIFIED SOLUTION

rnevet

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

SOLUTION

rnevet

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

JMO9966

ASKER

Thanks, I tried using a fixed position, but now my footer doesn't show at all??


#container {
min-height:100%;
position:relative;
}
#header {


padding:10px;
}
#body {
padding:10px;
padding-bottom:60px; /* Height of the footer */
}
#footer {

position:fixed;
bottom:0;
width:100%;
height:60px; /* Height of the footer */
background:#6cf;
}

<div id="container">

<div id="header">
<h2>
<table width="100%" cellpadding="0" cellspacing="0" colspan="2">
<tr>
<td class="center f14" >
NSPM INITIAL PERSONAL HISTORY QUESTIONAIRE (PHQ)
</td>
</tr>
</table>
<br />
<br />
</h2>
</div>

<div id="body">
<p><b>All information provided will be treated as CONFIDENTIAL and seen only by persons with an authorized NEED TO KNOW.</b></p>
</div>

<div id="footer">
Use of this form as a procedural aid does not require retention as a quality record.
</div>

</div>

SOLUTION

rnevet

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

SOLUTION

Sathish David Kumar N

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

SOLUTION

rnevet

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

JMO9966

ASKER

I had tried the 0px but it didn't work so I removed this. I've condensed by file to only contain the following code and I still don't get a footer??

<?xml version="1.0" encoding="iso-8859-1"?>
<xsl:stylesheet version="1.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

<xsl:template match="/">
<html>
<head>
<style type="text/css">
#container {
min-height:100%;
position:relative;
}
#header {


padding:10px;
}
#body {
padding:10px;
padding-bottom:60px; /* Height of the footer */
}
#footer {

position:fixed;
bottom:0px;
width:100%;
height:60px; /* Height of the footer */
background:#6cf;
}
</style>
</head>
<body>
<xsl:apply-templates select="User" />
</body>
</html>
</xsl:template>

<xsl:template match="User">

<div id="container">

<div id="header">
<h2>
<table width="100%" cellpadding="0" cellspacing="0" colspan="2">
<tr>
<td class="center f14" >
Header Text
</td>
</tr>
</table>
<br />
<br />
</h2>
</div>

<div id="body">
<p><b>Test body.</b></p>
</div>

<div id="footer">
Footer Text.
</div>

</div>

</xsl:template>