SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Wizard
    Join Date
    Aug 2002
    Location
    N.Ireland
    Posts
    1,046
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    IE6 horizontal list bug

    I've come across a strange bug with IE6 where a horizontal list which has borders left on each list item (or anchor) repeats a border when it shouldn't.

    In the example below the 2nd last list item has two left borders, the second one repeating where the text wraps. Does anyone know how I can get rid of this?

    Code:
    <html>
    <head>
    <style type="text/css">
    ul {
        margin: 0;
        padding: 0;
        width: 200px;
    }
    li {
        display: inline;
    }
    a {
        border-left: 1px solid red;
    }
    </style>
    </head>
    <body>
    <ul>
        <li><a href="#">test</a></li>
        <li><a href="#">test some more</a></li>
        <li><a href="#">test even more</a></li>
        <li><a href="#">and test again</a></li>
    </ul>
    </body>
    </html>

  2. #2
    SitePoint Wizard
    Join Date
    Aug 2002
    Location
    N.Ireland
    Posts
    1,046
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I found a workaround which is to float the list items left and add white-space: nowrap to the anchors.

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,338
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Yes it's a bug and borders on inline elements in IE are unreliable. The white-space: nowrap will cure it but will make the whole link drop to the next line rather than partial text which is probably what you wanted anyway


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
  •