white marks appear in IE8 but not in IE7

[ChrisjChrisj]

I have this login box, with a color background. In IE7 it looks fine, but in IE8 seven white marks appear down the left side of the box/background (see attached image). When I comment-out the login box code (shown below) the white marks disappear. So, that would make me believe that the issue lies in this code. Can you help me solve this mystery? Thanks.

  <!--Begin Login Box-->
  <div id="login-box">
    <!--[onload_300;block=div;when [var.show_login_box]=1;comm]-->
    <form action="login.php" method="post" accept-charset="UTF-8" class="middletext">
      <ul>
        <li><label><font class="font4_13">[var.lang_user_name]:</font></label><span class="username"><input type="text" name="user_name_login" size="16" style="width:138px;" /></span></li>
        <li>&nbsp;</li>
        <li><label><font class="font4_13">[var.lang_password]:</font></label><span class="password"><input type="password" name="password_login" size="16" style="width:138px;" /></span></li>
        <li>&nbsp;</li>
        <li>
          <input type="submit" value="[var.lang_login_now]" class="button-form" />
        </li>
        <li>&nbsp;</li>
        <li>
          <a href="login.php">[ [var.lang_password_reminder] ]</a>&nbsp;<b>|</b>&nbsp;<a href="[var.register_menu_link]">[ [var.lang_register_today] ]</a>
          <input type="hidden" name="submitted" value="yes" />
          <input type="hidden" name="remember_me" value="remember_me" />
        </li>
        </ul>
      </form>
  </div>
  <!--End Login Box-->

Here's the css code, also:

/*--The Login Form Container--*/
#login-box {
  color: #fff;
  width: 258px;
  height: 170px;
  float: right;
  background: transparent url(../images/login-back.gif) no-repeat;
  margin: 0px 0px 5px 0px;
}

#login-box ul{
  display: block;
  list-style-type: block;
  margin: 0px 0px 0px 10px;
  padding: 25px 0px 0px 0px;
}

.login-box li{
  list-style-type: none;
  margin: 5px 20px 5px 0px;
  text-align: right;
}

#login-box a {
  color: #000000;
  font-weight: bold;
}

#login-box a:hover { color: #fff; }

.username { margin:0px 0px 0px 12px; }

.password { margin:0px 0px 0px 12px; }

.howlong { margin: 0px 12px 0px 12px; }

.login-button { margin: 0px 0px 0px 18px; }

.login-button-index { margin: -8px 0px 0px 0px; }

[Paul O'B]

Looks like it's the bullet from the list.

#login-box ul{
  display: block;
  list-style-type: none;
  margin: 0px 0px 0px 10px;
  padding: 25px 0px 0px 0px;
}

Don't use empty elements just to make space. Use a margin on the existing elements instead.

[ChrisjChrisj]

Thanks for your reply.
Can you elaborate and maybe provide an alternative?
because I don't know what you mean by "bullet from the list"
nor do I know what this means "Don't use empty elements just to make space. Use a margin on the existing elements instead"

Thank you

[Paul O'B]

Hi,

Can you elaborate and maybe provide an alternative?

I already supplied an alternative with the code I posted marked in bold

 list-style-type: none;

That will remove the bullets from the list.

All lists have bullet markers (bullets) by default and you failed to clear the list marker for the list in question which is why it was showing as a white mark at the left edge of the login panel as seen in your screenshot.

Browsers place the marker at different position (using left paddding or left margin) which is why it was only evident in certain browsers.

nor do I know what this means "Don't use empty elements just to make space. Use a margin on the existing elements instead"

In the html you posted you have elements like this between every item:

 <li>&nbsp;</li>

They are empty elements and if you are using them just to create space then you should use a margin on the exisiting list elements instead to space things out.

e.g increase the bottom margin here:

.login-box li{
  list-style-type: none;
  margin: 5px 20px 15px 0px;
  text-align: right;
}

If instead you are using them for other reasons (such as hooks for images) then there would still be better ways of doing it in most cases.

Hope that explains it

[ChrisjChrisj]

Thanks for the help. Much appreciated