I would like to redo this one on my site:

http://img413.imageshack.us/img413/3...icleboxoh4.jpg

My problem is that I get this:

http://img413.imageshack.us/img413/6...ox22222gi0.jpg

Why!?
This is my code:

HTML:

            <div class="sidebox greenborder">

            <h4><span class="boxtopic1">Article Topics</span></h4>
            <!-- article topics -->
            <ul><li><a href="http://www.webmaster-talk.com/articles/cat/12" title="Read articles in the General Business category">General Business</a></li>
<li><a href="http://www.webmaster-talk.com/articles/cat/2" title="Read articles in the SEO category">SEO</a></li>
<li><a href="http://www.webmaster-talk.com/articles/cat/3" title="Read articles in the SEM category">SEM</a></li>
<li><a href="http://www.webmaster-talk.com/articles/cat/4" title="Read articles in the Affiliate Marketing category">Affiliate Marketing</a></li>
<li><a href="http://www.webmaster-talk.com/articles/cat/5" title="Read articles in the Hosting &amp; Security category">Hosting &amp; Security</a></li>

</ul>
            <!-- / article topics -->                        
        </div>

CSS:

/* global side box */
    .sidebox                       {background:#f8f8f7; margin:20px 0px; padding-bottom:10px;}
    .sidebox h4                       {color:#9ac872; font-size:1em; font-weight:normal; position:relative; top:-9px; right:-8px;}
    .sidebox p                      {text-align:center;}
    .sidebox ul                      {list-style: none;}
    .sidebox li                       {padding:4px 15px;}
    .sidebox li a                       {color: #0066CC; font: small Tahoma, Verdana, Arial, sans-serif; font-weight: bold; padding: 4px 4px;}
    .sidebox li a:visited                  {color: #0066CC;}
    .sidebox li a:hover                   {color: #569fe8; font-weight: bold; padding: 4px 4px; text-decoration:underline; font-family: Tahoma, Verdana, Arial, sans-serif;}
    
.boxtopic1                    {background:transparent url(images/textbg.gif) repeat left; padding:0px 6px; margin-left:6px;}
        
.greenborder        {border:1px solid #9ac872;}

Well you could do this other ways using CSS, but the easiest way is to use the fieldset and legend html elements.

Can you please post an example on how do do it, also with CSS colours?