Website has too much Padding when on Firefox Browser

Question

My team created a website for a University Writing Conference. Our problem is that when using Firefox, there is too much white space on the bottom of the page, almost a whole page worth!

On Safari and Explorer, the white space ends right after the footer.

Why is it like this on Firefox?

Here is a link to the website, below is our CSS Code;

    /* CSS Reset */
* { margin:0; padding:0; }
html,
body {
    margin:0;
    padding:0;
    height:100%;  
    /* IE10 */ 
    background-image: -ms-linear-gradient(top, #FFFFFF 0%, #C2E6F6 100%);

    /* Mozilla Firefox */ 
    background-image: -moz-linear-gradient(top, #FFFFFF 0%, #C2E6F6 100%);

    /* Opera */ 
    background-image: -o-linear-gradient(top, #FFFFFF 0%, #C2E6F6 100%);

    /* Webkit (Safari/Chrome 10) */ 
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #FFFFFF), color-stop(1, #C2E6F6));

    /* Webkit (Chrome 11+) */ 
    background-image: -webkit-linear-gradient(top, #FFFFFF 0%, #C2E6F6 100%);

    /* Proposed W3C Markup */ 
    background-image: linear-gradient(top, #FFFFFF 0%, #C2E6F6 100%);
    background-attachment:fixed;
    font-family: 'Telex'; sans-serif;
}

h1 {
    font-family: 'Asap', sans-serif;
    font-size:50px;
    color:#FF3300;
}

h2 {
    font-family: 'Asap', sans-serif;
    font-size:40px;
    color:#FF9E00;
}

h3 {
    font-family: 'Asap', sans-serif;
    font-size:30px;
    color:#FF3300;
}
h3 a {font-family: 'Asap', sans-serif;
    font-size:30px;
    color:#FF3300;
}

p {
    font-family: 'Telex', sans-serif;
    font-size:18px;
    margin-top:1.2em;
    margin-bottom:1.2em;
}
p.normal {font-style:normal;}
p.italic {font-style:italic;}
p.oblique {font-style:oblique;}
table.center {
    margin-left:auto; 
    margin-right:auto;
}
ul {
    font-family: 'Telex', sans-serif;
}
ul li {
    font-family: 'Telex', sans-serif;
    margin-left:20px;
}
img.centered {
    display: block;
    margin-left: auto;
    margin-right: auto 
}
a img {
    border: none;
}
#container {
  position:relative;
  width:960px;
  margin:0 auto;
}
#header {
  height:175px;
  width:960px;
  margin: 0 auto 0 auto;
  position:relative;
}
#header h1 {
  display:block;
  float:left;
  width:600px;
  height:175px;
  background:url(img/ncptwbanner.gif) no-repeat 0 0;
  background-size:600px 175px;
  text-indent:-10000px;
  }
#header h1 a {
  display:block;
  position:absolute;
  width:600px;
  height:175px;
}  
#header h2 {
    display:block;
    float:right;  
    position:relative;
    width:315px;
    height:182px;
    margin:0;
    background:url(img/chicago_box.jpg) no-repeat 0 0;
    text-indent:-10000px;
  }
#navigation {
    width:960px;
    height:90px;
    margin:0 auto 0 auto;
}
#navigation ul {
  display:block;
  float:right;
  width:960px;
  height:90px;
  background:url(img/menu.jpg) no-repeat 0 0;
  list-style:none;
  padding:0;
}
#navigation ul li {
  display:block;
  float:left;  
  height:90px;
  text-indent:-10000px;
  margin-left:0px;
 }
#about {
  width:221px;
}
#call {
  width:203px;
}
#schedule {
  width:140px;
}
#explore {
  width:217px;
}
#register {
  width:179px;
}
#navigation ul li a {
  display:block;
  width:100%;
  height:100%;
}
#about a:hover {
  background:url(img/menu.jpg) no-repeat 0 -90px;
}
#call a:hover {
  background:url(img/menu.jpg) no-repeat -221px -90px;
}
#schedule a:hover {
  background:url(img/menu.jpg) no-repeat -424px -90px;
}
#explore a:hover {
  background:url(img/menu.jpg) no-repeat -564px -90px;
}
#register a:hover {
  background:url(img/menu.jpg) no-repeat -781px -90px; 
}
#body {
    display:relative;
    float:left;
    width:960px;
    margin-top: 15px;
    margin-bottom: 15px;
    padding:10px;
    -moz-box-shadow: 0 0 5px 5px #888;
    -webkit-box-shadow: 0 0 5px 5px#888;
    box-shadow: 0 0 5px 5px #888;
}

.imgLeft {
    display:inline-block;
    float:left;
    margin:2px;
    padding:0;
    border-style:solid;
    border-width:3px;
}
.imgRight {
    display:inline-block;
    float:right;
    margin: 2px;
    padding:0;
    border-style:solid;
    border-width:3px;
}
#featured_text {
    display:inline-block;
    float:left;
    width:520px;
    margin:auto;
    padding:4px;
}
#single_column_featured_text {
    display:block;
    float:left;
    width: 950px;
    margin: 0px 0px 0px 0px;
    padding: 0px 10px 0px;
}
#single_column_featured_text h1 {
    font-size:30px;
}
#second_column {
    display:inline-block;
    float:left;
    width:420px;
    margin:0;
    padding:4px;
}
#john_hancock {
    position:relative;
    width:142px;
    height:660px;
    float:left;
    left:-142px;
    bottom:660px;
    margin-left:-10px;
    padding:4px;
}
#sears_tower {
    position:relative;
    width:156px;
    height:822px;
    float:right;
    right:-156px;
    bottom:822px;
    margin-right:-45px;
    padding:4px;
}
footer { 
   position:absolute;
   bottom:0;
   width:100%;
   height:20px;   /* Height of the footer */
 }
#footer p {
  margin:0;
  padding:10px;
  font-size:.75em;
  text-align:center;
 }

Answer 1

The problem comes from #john_hancock and #sears_tower. They have position: relative and they are moved from its natural position through bottom property. Its natural position is at the bottom space you have in your page. The problem is that elements which have set a relative position still keep the space originally reserved for them. Look at this link for more information.

The best thing I think you could do is to change a little bit your mark-up and display that two tower images with CSS, as background images. This is more correct because that images aren't content, but style. HTML is for content and not for style. That way you won't have these layout problems.