Question

I’m trying to figure out why the border extends out so much as well as doesn’t put start at the number.

http://kansasoutlawwrestling.com/

mockup:
http://kansasoutlawwrestling.com/assets/images/wrestling2.jpg

    <div id="sidebar_left">
        <a href="#"><img src="assets/images/ad.png" alt="Spotlight Wrestler"/></a>
        <div id="top5">
            <ol>
                <li>Joe Smith</li>
                <li>John Michaels</li>
                <li>Steve Hart</li>
                <li>Bret Hogan</li>
                <li>Undertaker</li>
            </ol>
        </div>
    </div>

#sidebar_left{width:300px;float:left;}
#sidebar_left img {}
#top5 ol li {padding:11px 0 11px 0;border-bottom:solid 1px gray;}
#top5 ol li:last-child{border:none;}

Answer 1

Will the LI’s be links? Try making the text a link or just a span and then put the border on that element. Add padding to the left/right so it doesn’t cling to the edges of the text. f you want the lines to be all the same width, give the parent ul a width.

See my mockup: http://jsfiddle.net/2kJJE/1/