SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Guru
    Join Date
    Nov 2004
    Location
    calif
    Posts
    743
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    white marks appear in IE8 but not in IE7

    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.

    Code:
      <!--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:
    Code:
    /*--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; }
    Attached Images Attached Images

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Looks like it's the bullet from the list.

    Code:
    #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.

  3. #3
    SitePoint Guru
    Join Date
    Nov 2004
    Location
    calif
    Posts
    743
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Can you elaborate and maybe provide an alternative?
    I already supplied an alternative with the code I posted marked in bold

    Code:
     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:

    Code:
     <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:
    Code:
    .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

  5. #5
    SitePoint Guru
    Join Date
    Nov 2004
    Location
    calif
    Posts
    743
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the help. Much appreciated


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •