Hello and welcome to our community! Is this your first visit?
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New Coder
    Join Date
    Apr 2007
    Thanked 1 Time in 1 Post

    Double Border Lines

    Hi All,
    Got a small issue on my hands. I'm attempting to create a tableless table (using CSS Div tags), which will have 5 columns and a variable (dynamically generated) number of rows. I'm trying to build it using inline list elements (UL/LI).

    The problem I'm facing is that my borders for the list elements keep overlapping for the adjoining list elements. I would love to use the border-collapse property, but of course this doesn't exist for list elements.

    Here is my HTML:

    <div id="container">
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
        <li>Item 4</li>
        <li>Item 5</li>
        <li>Item 6</li>
        <li>Item 7</li>
        <li>Item 8</li>
    And here is a snippet of my CSS:
    #container {
      margin:0px auto;
      height: 100%;
    #container ul li {
      display: inline;
      float: left;
      width: 125px;
      height: 40px;
      border: 1px Solid Black;
    If you run this, you'll see that the outer border has a single pixel width, but the inner borders have double pixel width because of the two list element borders coming together. I would like everything to be 1 pixel--inside and out.

    Any help would be greatly appreciated.


  • #2
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    In a place far, far away...
    Thanked 1,043 Times in 1,019 Posts
    Hmm. Judging by what you said you are trying to do I think a table is the way to go for this. You are going to be displaying tabular data therefore you should use a table. Using a list IMO is not the right thing to do in this case.


    Posting Permissions

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