Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 387
  • Last Modified:

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>

0
JMO9966
Asked:
JMO9966
  • 4
  • 2
5 Solutions
 
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
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 
rnevetCommented:
on the bottom property use 0px  and not just 0.
0
 
Sathish David Kumar NCommented:
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

Featured Post

[Webinar] Database Backup and Recovery

Does your company store data on premises, off site, in the cloud, or a combination of these? If you answered “yes”, you need a data backup recovery plan that fits each and every platform. Watch now as as Percona teaches us how to build agile data backup recovery plan.

  • 4
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now