adv. styling list with css
- by Ayrton
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
