Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    Regular Coder
    Join Date
    Jul 2002
    Location
    The Netherlands
    Posts
    252
    Thanks
    0
    Thanked 0 Times in 0 Posts

    unwanted margin between two list-items

    Hi,

    I'm working on a website and I'm experiencing some problems with IE when I apply a list. The problem is that a one pixel line shows up between two list items. The html code couldn't be much simpler than:

    Code:
    <div id="menu">
     <ul>
      <li>Item 1</li>
      <li>Item 2</li>
     </ul>
    </div>
    I use the following CSS code, which is also quite straightforward:

    Code:
    #menu {
      float: left;
      width: 200px;
    }
    
    #menu ul {
      padding: 0px;
      margin: 0px;
      width: 200px;
      list-style: none;
    }
    
    #menu li {
      padding: 0px;
      margin: 0px;
      font-family: arial, helvetica, verdana;
      font-size: 12px;
      font-weight: bold;
      height: 28px;
      background: url(./graphics/menu-item.gif);
    }
    As you can see in the attached screenshot, an extra one pixel wide line exists between two menu items (at least in IE that is). I Moz everything works just as I want it. Anyone knwo what's wrong, and how to fix it?

    Thanx, Michiel
    Attached Thumbnails Attached Thumbnails unwanted margin between two list-items-screenshot-cf.jpg   unwanted margin between two list-items-menu-item.gif  

  • #2
    Senior Coder
    Join Date
    Jun 2002
    Location
    The Netherlands, Baarn, Ut.
    Posts
    4,252
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Known bug; forgot solution

    This is a known bug in IE; problem is, I forgot what the solution was...

    Try to delete the line break between the two list items in the source, effectively coding both list items on one line; delete everything between the closing bracket of the first and the starting bracket of the second. See if that helps.

    Update:
    No, that wasn't it. AARGH! Stupid browser!

    Update 2:

    Okay, this is really only interesting if there's another element (like a link) inside the list items, but the idea is to set the list items to "display: inline;" and the links inside them to "display: block;".
    I tried both a set width and none and saw no difference, but setting an explicit width might be something that's needed in other situations.
    Happy experimenting!
    Last edited by ronaldb66; 10-15-2004 at 02:21 PM. Reason: Updated - again...
    Regards,
    Ronald.
    ronaldvanderwijden.com


  •  

    Posting Permissions

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