No replies
exelGram
Offline
newbie
Last seen: 13 years 2 weeks ago
Joined: 2009-05-05
Posts: 1
Points: 0

Hello everybody,

I recently designed a homepage for a new social community that requires a sticky footer to always appear at the bottom center of the page. In addition, the site uses a 100% width/height body for a resizable background image. The idea is that when the user resizes his or her viewport, the background will resize in proportion.

I've run into problems in IE6 (of course ). When the viewport is resized too small, a white bar appears at the bottom of the page.

While I have a sense the problem either has to do with the negative-margin footer, or the height or width property as viewed by IE6, I can't seem to fully remove the white bar that appears.

Thanks in advance for your help!

Here is the applicable code:

HTML

<body>
<div id ="container">
<div><img src="Images/background.jpg" name="background" width="1150" height="768" id="background" /></div>
<div id="clearfooter"></div>
<div id="footerIndex">
  <div id="contentLogin">
  <form id="form1" name="form1" method="POST" action="<?php echo $loginFormAction; ?>">
    <table width="175" border="0" align="center" cellpadding="3" cellspacing="1" id="loginTable">
  <tr>
   <td><label for="username"></label><input name="username" type="text" class="formBoxLogin" id="username" value="<?php if (isset($_COOKIE['cookname'])) { echo $_COOKIE['cookname'];} else { echo 'username';}?>"size="22" /></td>
  </tr>
  <tr>
    <td><label for="password"></label><input name="password" type="password" class="formBoxLogin" id="password" size="22" /></td>
  </tr>
  <tr>
    <td class="formBoxSmallTextLogin"><a href="USERforgotUserPassword.php" class="link">Forgot password or username?</a></td>
  </tr>
  <tr>
    <td class="formBoxSmallTextLogin"><input name="remember" type="checkbox" id="remember" checked="checked"/>Remember Me!</td>
  </tr>
  <tr>
    <td><label for="doLogin"></label><input type="submit" name="doLogin" id="doLogin" value="Login" /></td>
  </tr>
    </table>
    </form></div>
    <div id="contentSignUpError"><?php
if (isset($error)) {
    echo '<ul>';
    foreach ($error as $alert) {
        echo "<li class='warning'>$alert</li>\n";
    }
    echo '</ul>';
}
?></div>
<div id="contentSignUp">
  <form action="<?php echo $editFormAction; ?>" method="post" name="form2" id="form2">
    <table width="720" align="center" cellpadding="3" id="signUpTable">
      <tr>
        <td align="right">username  <input name="username" type="text" class="formBox" value="<?php if (isset($_POST['username'])) {
        echo htmlentities($_POST['username'], ENT_COMPAT, 'UTF-8');}  ?>" size="32" href="Images/favIcon.png" rel="shortcut icon" /></td>
      </tr>
      <tr>
        <td align="right">password  <input name="password" type="password" class="formBox" value="" size="32" /></td>
      </tr>
      <tr>
        <td align="right">confirm Password  <input name="confirm_password" type="password" class="formBox" id="confirm_password" size="32" /></td>
      </tr>
      <tr>
        <td align="right">email  <input name="email" type="text" class="formBox" value="<?php if (isset($_POST['email'])) {
        echo htmlentities($_POST['email'], ENT_COMPAT, 'UTF-8');}  ?>" size="32" /></td>
      </tr>
      <tr>
        <td align="right">confirm Email  <input name="confirm_email" type="text" class="formBox" id="confirm_email" value="<?php if (isset($_POST['confirm_email'])) {
        echo htmlentities($_POST['confirm_email'], ENT_COMPAT, 'UTF-8');}  ?>" size="32" /></td>
      </tr>
      <tr>
        <td align="right">sum of 1 and 2?  <input name="test" type="text" class="formBox" id="test" size="32" /></td>
      </tr>
      <tr>
        <td align="right" class="controlBox">By clicking Sign Up, you agree to the <a href="termsANDagreement.php" class="link">User Agreement & Privacy Policy</a></td>
      </tr>
      <tr>
        <td align="right" class="controlBox"><input name="signUp" type="submit" id="signUp" value="Sign Up" /></td>
      </tr>
    </table>
    <input type="hidden" name="user_id" value="" />
    <input type="hidden" name="register_date" value="NOW()" />
    <input name="activationkey" type="hidden" id="activationkey" />
    <input name="status" type="hidden" id="status" value="verify" />
    <input type="hidden" name="MM_insert" value="form2" />
  </form></div>
  <div id="howItWorks"><a href="howItWorks.php"><img src="Images/howItWorks.png" alt="How It Works" width="85" height="85" class="linkButton" /></a></div>
  <img src="Images/footerIndex.png" width="709" height="489" border="0" usemap="#Map" />
  <map name="Map" id="Map">
    <area shape="rect" coords="163,417,230,487" href="index.php" alt="home" />
  <area shape="rect" coords="442,452,503,472" href="about.php" alt="about" />
  <area shape="rect" coords="444,473,510,489" href="feedbackGENERAL.php" alt="contact" />
</map>
</div>
<div id="payPalLogo"><img src="Images/verification_seal.png" width="50" height="50" alt="Official PayPal Seal" /></div>
</div>
</body>

CSS

body {
    font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
    color: #FFF;
    font-size: 13.5px;
    font-weight: lighter;
    height: 100%;
    margin: 0;
    padding: 0;
    position: absolute;
    width: 100%;
    letter-spacing: .6px;
}
#container {
    position: relative;
    min-height: 100%;
    z-index: 2;
    margin-bottom: -489px;
}
/* mac hide \*/
* html #container{
    height: 100%;
}
/* end hide */
#clearfooter {
    clear: both;
    height: 489px;
    width: 100%;
    overflow: hidden;
}
#background {
    position: absolute;
    z-index: 3;
    height: 100%;
    width: 100%;
}
#footer {
    position: absolute;
    width: 100%;
    z-index: 2;
    text-align: center;
    bottom: 0px;
    height: 324px;
    vertical-align: baseline;
    margin-bottom: -15px;
}
.formBox {
    height: 19px;
    width: 190px;
    font-size: 13px;
    background-color: #000;
    color: #FFF;
    border-top-style: none;
    border-right-style: none;
    border-bottom-style: none;
    border-left-style: none;
}
.formBoxSmallText {
    font-size: 10px;
    line-height: 12px;
    text-align: right;
    width: 150px;
}
.formBoxLogin {
    height: 18px;
    width: 165px;
    font-size: 12px;
    background-color: #000;
    color: #FFF;
    border-top-style: none;
    border-right-style: none;
    border-bottom-style: none;
    border-left-style: none;
}
.formBoxSmallTextLogin {
    font-size: 10px;
    height: 12px;
}
#footerIndex {
    position: absolute;
    height: 489px;
    width: 100%;
    bottom: 0px;
    z-index: 4;
    overflow: hidden;
    text-align: center;
}
#contentSignUp {
    position: absolute;
    bottom: 200px;
    width: 100%;
    font-size: 13px;
    z-index: 5;
    right: 1px;
}
#contentLogin {
    position: absolute;
    bottom: 72px;
    width: 100%;
    right: 255px;
    z-index: 6;
    overflow: hidden;
}

Thanks again for your time!