adv. styling list with css

Question

Hi

I need to style a regular html list like the following picture:

as you see each each list item has a padding on the sides and a top&bottom border. When hovered the border has a width of 100% of the <ul> item. Now the problem actually is: when you give each <li> element a top & bottom border I have a border of 2 px between each element (bottom border from the first element and the top border from the second element), I don't want that however I do not know any solution for this.

my html:

<div id="tab_top" class="tab">
        <div class="bottom">
          <div class="cont">
            <ul>
              <li><a href="#">Here’s a Sample Post <span class="ct">32</span></a></li>
              <li><a href="#">Here’s a Sample Post <span class="ct">32</span></a></li>
              <li><a href="#">Here’s a Sample Post <span class="ct">32</span></a></li>
              <li><a href="#">Here’s a Sample Post <span class="ct">32</span></a></li>
              <li><a href="#">Here’s a Sample Post <span class="ct">32</span></a></li>
              <li><a href="#">Here’s a Sample Post <span class="ct">32</span></a></li>
              <li><a href="#">Here’s a Sample Post <span class="ct">32</span></a></li>
            </ul>
          </div>
        </div>
      </div>

my css:

#tabs .tab div.cont ul li a{line-height:30px; height:30px; color:#3ca097; display:block; padding-left:11px; padding-right:13px; width:259px;}
#tabs .tab div.cont ul li a span.ct{float:right;background:url(images/count_comments.gif) no-repeat left top; height:13px; padding-left:16px; margin-top:10px; line-height:12px;}
#tabs .tab div.cont ul li a:hover{color:#fff; background-color:#6fd2c8; border-top:1px solid #7db9b2;  border-bottom:1px solid #7db9b2; height:28px; line-height:28px;}
#tabs .tab div.cont ul li a:hover span.ct{background-position:left bottom; color:#23665f; margin-top:9px;}

I would be pleased if you can help me

Yours truthfully

Answer 1

As Pekka suggested, prior to deleting his answer, the obvious solution is to amend this style:

#tabs .tab div.cont ul li a:hover{color:#fff; background-color:#6fd2c8; border-top:1px solid #7db9b2;  border-bottom:1px solid #7db9b2; height:28px; line-height:28px;}

to become:

#tabs .tab div.cont ul li a:hover{color:#fff; background-color:#6fd2c8; border-bottom:1px solid #7db9b2; height:28px; line-height:28px;}

Not terribly 'adv.', really...Unless we're both missing something?

Answer 2

Remove either the top or bottom border and then set an inline style on the first or last li to add the one border that would seem to be "missing."

Answer 3

You could just use a bottom border and for the first also include a top border..

either use an extra class for the first item, or use the :first-child pseudo-class (which is not supported on IE6)

Answer 4

If you use border-top and border-bottom, you are correct, you will get a 1px border, if however you use both, then specify li+li like so:

.tab div.cont ul li { border-top: 1px solid black; border-bottom:1px solid black; }
.tab div.cont ul li + li { border-top:none; }

You will get what you claim to want.