...

View Full Version : Double Border Lines



mamamia
05-16-2007, 12: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">
<ul>
<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>
</ul>
</div>


And here is a snippet of my CSS:


#container {
width:550px;
margin:0px auto;
text-align:left;
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.

mamamia

_Aerospace_Eng_
05-16-2007, 12: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.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum