Solved

html Footers ?

Posted on 2010-11-30
7
378 Views
Last Modified: 2012-05-10
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
Comment
Question by:JMO9966
  • 4
  • 2
7 Comments
 
LVL 2

Accepted Solution

by:
rnevet earned 400 total points
ID: 34239939
Change your position to fixed, this will set the bottom relative to the window.

bottom: 0px;
position: fixed
0
 
LVL 2

Assisted Solution

by:rnevet
rnevet earned 400 total points
ID: 34239971
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
 

Author Comment

by:JMO9966
ID: 34241084
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
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 
LVL 2

Assisted Solution

by:rnevet
rnevet earned 400 total points
ID: 34241231
on the bottom property use 0px  and not just 0.
0
 
LVL 20

Assisted Solution

by:Sathish David Kumar N
Sathish David  Kumar N earned 100 total points
ID: 34241997
change #footer into .footer
0
 
LVL 2

Assisted Solution

by:rnevet
rnevet earned 400 total points
ID: 34242141
@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
 

Author Comment

by:JMO9966
ID: 34243000
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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
This article explains how to prepare an HTML email signature template file containing dynamic placeholders for users' Azure AD data. Furthermore, it explains how to use this file to remotely set up a department-wide email signature policy in Office …
In this tutorial viewers will learn how add a scalable full-width header using CSS3. Create a new HTML document with an internal stylesheet. Set a tiled background.:  Create a new div and name it Header. Position it with position:absolute at the top…
In this tutorial viewers will learn how to position items using CSS's three positioning types Create a new HTML document with an internal stylesheet.: Create another div in CSS and name it Absolute : Type "position:absolute;" and "top:10px; left:50p…

911 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

19 Experts available now in Live!

Get 1:1 Help Now