footer wouldn't to bottom of screen

**dragon52** · Mar 17 '11, 11:57 PM

Hi everyone,

I want to have the footer div stick to the bottom of the screen and my code works until I add the <form></form> to the html. Can somebody spot the problem for me. I only know basic html.

Here is the code. If I remove <form name=...></form> then it works. I am writing php but the html shouldn't matter? I am building a user input page so I must have the form tag.

see attached

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh" lang="zh">

<head>
    <title>scs</title>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <meta http-equiv="content-language" content="en,zh" />

    <link rel="Stylesheet" type="text/css" href="layout.css" />
    <link rel="Stylesheet" type="text/css" href="menu.css" />
    <link rel="shortcut icon" href="favicon.ico" />
  <!--[if !IE7]>
    <style type="text/css">
      #wrap {display:table; height:100%}
    </style>
  <![endif]-->
</head>

<body style="background:#FFFFFF">
<form name="student1Form" method="post" onsubmit="return checkForm();" action="student2.php" id="student1Form">
<div><div id="wrapper">
  <div id="header">
    <div id="menubar">
      <table style="padding-top:37px; padding-left:5px; width:100%">
        <tr>
          <td>
            <ul id="menu">
              <li><a href="#">Home</a></li>
              <li><a href="#">New User</a></li>
              <li><a href="#">My Profile</a></li>
              <li><a href="#" class="arrow">Students</a>
                <ul>
                  <li><a href="#">Search</a></li>
                  <li><a href="#">My sub menu item 2</a></li>
                  <li><a href="#">My sub menu item 3</a></li>
                </ul>
              </li>
              <li><a href="#">Logout</a></li>
            </ul>
          </td>
          <td>
            <p style="padding-left:5px;">You are not logged in.</p>
          </td>
        </tr>
      </table>
    </div> <!-- menuBar div -->
  </div> <!-- header div -->
  <div id="main">
    <div style="padding-left:100px; padding-right:100px; padding-top:50px; padding-bottom:100px;">
      <table class="table1">
        <tr>
          <th>Resources</th>
        </tr>
        <tr>
          <td>to be or not to be</td>
        </tr>
      </table>
      <br />
      <br />
      <table class="table2">
        <tr><th>head1</th><th>head2</th></tr>
        <tr class="d0">
          <td>john</td>
          <td>andy</td>
        </tr>
        <tr class="d0">
          <td>marc</td>
          <td>noel</td>
        </tr>
      </table>
     </div>
  </div> <!-- main div -->
  <div id="push"></div>
</div> <!-- wrapper div -->
<div id="footer">
  <p>Copyright &copy 2011 - Sydney Chinese School</p>
</div>
</div>
</form>
</body>
</html>

my 2 css files
menu.css

Code:

ul#menu ,
ul#menu ul {
 list-style-type: none;
 margin: 0px;
 list-style-image: none;
 padding: 0px
}

ul#menu li {
 position: relative;
 list-style-type: none;
 margin: 0px;
 width: 100px;
 float: left;
 list-style-image: none;
 padding: 0px
}

ul#menu li li {
 width: auto;
 float: none
}

#menu a {
 border: silver 1px solid;
 text-align: left;
 display: block;
 font-family: verdana;
 white-space: nowrap;
 background: #f5f0dc;
 color: black;
 font-size: 13px;
 text-decoration: none;
 padding: 3px;
 height: 17px;
}

#menu a:focus {
 outline-style: none;
 outline-color: invert;
 outline-width: medium
}

#menu a.no-click {cursor: default}

#menu li a {margin: -1px -1px 0px 0px}

#menu li li a {margin: 0px 0px -1px}

#menu > li > a.arrow {padding-right: 14px}

#menu ul.arrow-pad > li > a {padding-right: 11px}

#menu li a.arrow ,
#menu > li > a.arrow {
 background-repeat: no-repeat;
 background-position: right 50%
}

#menu li:hover > a {
 background-color: #5d9276;
 color: #d9e32c;
 text-decoration: underline;
}

#menu li ul ,
#menu li:hover ul ul ,
#menu li:hover ul ul ul ,
#menu li:hover ul ul ul ul ,
#menu li:hover ul ul ul ul ul ,
#menu li:hover ul ul ul ul ul ul ,
#menu li:hover ul ul ul ul ul ul ul ,
#menu li:hover ul ul ul ul ul ul ul ul ,
#menu li:hover ul ul ul ul ul ul ul ul ul ,
#menu li:hover ul ul ul ul ul ul ul ul ul ul ,
#menu li:hover ul ul ul ul ul ul ul ul ul ul ul ,
#menu li:hover ul ul ul ul ul ul ul ul ul ul ul ul ,
#menu li:hover ul ul ul ul ul ul ul ul ul ul ul ul ul ,
#menu li:hover ul ul ul ul ul ul ul ul ul ul ul ul ul ul ,
#menu li:hover ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ,
#menu li:hover ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ,
#menu li:hover ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ,
#menu li:hover ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ,
#menu li:hover ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ,
#menu li:hover ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul {
 z-index: 999;
 position: absolute;
 display: none
}

#menu li:hover ul {display: block}

#menu li li:hover ul ,
#menu li li li:hover ul ,
#menu li li li li:hover ul ,
#menu li li li li li:hover ul ,
#menu li li li li li li:hover ul ,
#menu li li li li li li li:hover ul ,
#menu li li li li li li li li:hover ul ,
#menu li li li li li li li li li:hover ul ,
#menu li li li li li li li li li li:hover ul ,
#menu li li li li li li li li li li li:hover ul ,
#menu li li li li li li li li li li li li:hover ul ,
#menu li li li li li li li li li li li li li:hover ul ,
#menu li li li li li li li li li li li li li li:hover ul ,
#menu li li li li li li li li li li li li li li li:hover ul ,
#menu li li li li li li li li li li li li li li li li:hover ul ,
#menu li li li li li li li li li li li li li li li li li:hover ul ,
#menu li li li li li li li li li li li li li li li li li li:hover ul ,
#menu li li li li li li li li li li li li li li li li li li li:hover ul ,
#menu li li li li li li li li li li li li li li li li li li li li:hover ul {
 display: block;
 margin-left: 100%
}

#menu li:hover ul {margin-left: 0px}

#menu ul ul {
 top: 1px;
 left: -1px
}

#menu li {top: -1px}

layout.css file

Code:

*
{
  margin: 0;
}

html, body
{
  height: 100%;
}

#header
{

  height: 63px;
  background-color: #b6cf98;
  font-family: verdana,geneva,arial,sans-serif;
  font-size: 13px;
}

#wrapper
{
  min-height: 100%;
  height: auto;
  height: 100%;
  width: 1000px;
  float: center;
  margin: 0 auto -3em;
}

#footer, #push
{
  height: 3em;
  clear: both;
}

#footer
{
  width: 1000px;
  background-color: #b6cf98;
  text-align: center;
  font-size: 16px;
  float: center;
  margin: 0 auto -3em;
}

table.table1
{
  width: 500px;
  min-height: 100px;
  float:center;
  margin-left:auto;
  margin-right:auto;
  background-color: #f5f5f5;
  border: 1px silver solid;
  font-family: verdana, geneva, arial, sans-serif;
}
table.table2
{
  width: 800px;
  min-height: 100px;
  float:center;
  margin-left:auto;
  margin-right:auto;
  background-color: white;
  border-collapse: collapse;
  border: 1px red solid;
}

table.table2 th, table.table2 td
{
  border: 1px grey solid;
}

table.table2 th, table.table2 td
{
  height: 25px;
  padding-left: 10px;
  text-align: left;
}

table.table2 th
{
  background-color: #b6cf98;
}

table.table2 tr.d0 td
{
  background-color: #feffff;
}
table.table2 tr.d1 td
{
  background-color: #fdf8e4;
}

Attached Files

footer.jpg (20.8 KB, 148 views)