Solved

html Footers ?

Posted on 2010-11-30
7
381 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
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

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

Things That Drive Us Nuts Have you noticed the use of the reCaptcha feature at EE and other web sites?  It wants you to read and retype something that looks like this. Insanity!  It's not EE's fault - that's just the way reCaptcha works.  But it i…
This is a PowerShell web interface I use to manage some task as a network administrator. Clicking an action button on the left frame will display a form in the middle frame to input some data in textboxes, process this data in PowerShell and display…
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…
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…

734 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