[css-d] Layout Breaks in IE - Please Help :)

[Aaron Roberson]

In IE there is a gap between the footer and the navigation bar just
above the footer. It renders as expected in Firefox, but not in IE for
some reason.

The page in question is below:

http://whitehorsemedia.com/test.cfm

Here is the html in question:

<div id="wrapper-nav-footer">
                      <p id="page-top"><a href="#top" title="Top">Top</a></p>
                      <ul id="nav-footer">
                              <li><a href="about/index.cfm">About Us</a></li>
                              <li><a
href="products/index.cfm">Products</a></li>
                              <li><a
href="articles/index.cfm">Articles</a></li>
                              <li><a
href="broadcast/index.cfm">Broadcast</a></li>
                              <li><a
href="donations/index.cfm">Donations</a></li>
                              <li><a href="contact/index.cfm">Contact</a></li>
                      </ul>
              </div>
              <div id="wrapper-footer">
                      <p id="copyright">Copyright &copy;
<cfoutput>#DateFormat(Now(),
"yyyy")#</cfoutput> White Horse Media. All Rights Reserved.</p>
</div>

Here is the css in question:

#wrapper-nav-footer{
      clear:both;
      height:56px;
      position:relative;
      background:url(../images/nav_footer_bg.jpg) no-repeat 0 0;
}

#wrapper-footer {
      background: url(../images/footer_bg.gif) no-repeat 0 0;
      /*clear: both;
      position: relative; */
      height: 43px;
}

#page-top a {
      background: url(../images/top_btn.jpg) no-repeat 0 0;
      left: 536px;
      overflow: hidden;
      position: absolute;
      text-indent: -9999px;
      top: 13px;
      width: 20px;
      height: 20px;
}

#nav-footer {
      font-size: 95%;
      height: 33px;
      padding: 26px 10px 0 10px;
}

#nav-footer li {
      display: inline;
      float: left;
      margin: 0;
      list-style-type: none;
}

#nav-footer li a {
      display: block;
      letter-spacing: .2em;
      padding: 7px 0 9px 0;
      text-align: center;
      text-decoration: none;
      text-transform: uppercase;
      font-weight: bold;
      width: 123px;
      background: url(../images/nav_footer_bullet.jpg) no-repeat 50% bottom;
}

I hope that helps to narrow things down to the problem area. Can
anyone see from this why there is a gap between the footer navigation
and the footer itself?

Thanks for the help,
Aaron
______________________________________________________________________
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/