View Full Version : Double Border Lines

05-16-2007, 01:04 AM
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.


05-16-2007, 01:32 AM
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.