lawx lawx - 4 months ago 23
CSS Question

List items without overlapping borders

I have a

<ul>
that WOULD be dynamically added to using jQuery or whatnot. Each
<li>
would have a separate box around it, basically a selector.

However, I notice and anticipated that each
<li>
's bottom border is overlapping with the next. Here's an example:

http://jsfiddle.net/gANNJ/

Is there a way to remove this? Should I just use separator divs instead?

Answer
li {
    margin-top: -1px;
    border: 1px solid red;
    padding: 10px;
}

Cheap way of doing it ><. They are not overlaping, its just 2px border from top and bottom