Improve company productivity with a Business Account.Sign Up

x
?
Solved

html Footers ?

Posted on 2010-11-30
7
Medium Priority
?
389 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 1600 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 1600 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
What Kind of Coding Program is Right for You?

There are many ways to learn to code these days. From coding bootcamps like Flatiron School to online courses to totally free beginner resources. The best way to learn to code depends on many factors, but the most important one is you. See what course is best for you.

 
LVL 2

Assisted Solution

by:rnevet
rnevet earned 1600 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 400 total points
ID: 34241997
change #footer into .footer
0
 
LVL 2

Assisted Solution

by:rnevet
rnevet earned 1600 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

Get 10% Off Your First Squarespace Website

Ready to showcase your work, publish content or promote your business online? With Squarespace’s award-winning templates and 24/7 customer service, getting started is simple. Head to Squarespace.com and use offer code ‘EXPERTS’ to get 10% off your first purchase.

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.

Join & Write a Comment

Not sure what the best email signature size is? Are you worried about email signature image size? Follow this best practice guide.
There's never been a better time to become a computer scientist. Employment growth in the field is expected to reach 22% overall by 2020, and if you want to get in on the action, it’s a good idea to think about at least minoring in computer science …
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…
This video shows how to quickly and easily deploy an email signature for all users in Office 365 and prevent it from being added to replies and forwards. (the resulting signature is applied on the server level in Exchange Online) The email signat…

602 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