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>
        <!--<title>Application For Employment</title>-->
        <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>

JMO9966Asked:
Who is Participating?
 
rnevetCommented:
Change your position to fixed, this will set the bottom relative to the window.

bottom: 0px;
position: fixed
0
 
rnevetCommented:
adding to my last comment,
you should use some developer tool that lets you inspect your page and change the properties an view the result in live, Chrome comes with it built in. Firefox has a plugin called DOM Inspector and IE has IE developer.

position fixed - is relative to the window, position absulote is relative to the parent frame in this case the wrapper div, your problem is that the wrapper div doesn't extend the whole page.

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

 <!--jbm, 11-30-2010-->
          #container {
          min-height:100%;
          position:relative;
          }
          #header {
          <!--yellow-->
          <!--background:#ff0;-->
          padding:10px;
          }
          #body {
          padding:10px;
          padding-bottom:60px;   /* Height of the footer */
          }
          #footer {
          <!--position:absolute;-->
          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>
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

 
rnevetCommented:
on the bottom property use 0px  and not just 0.
0
 
Sathish David Kumar NArchitectCommented:
change #footer into .footer
0
 
rnevetCommented:
@dravidnsr that's if he would have declared footer as a class , he declared it as an id property and in this case a # was right.
0
 
JMO9966Author Commented:
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 {
          <!--yellow-->
          <!--background:#ff0;-->
          padding:10px;
          }
          #body {
          padding:10px;
          padding-bottom:60px;   /* Height of the footer */
          }
          #footer {
          <!--position:absolute;-->
          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>
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.