stories and poems

I’m having another problem. I can’t set the background colour on the bounding box on the menu at the top of the page. In Firefox and Webkit, you should see rounded corners at the top of each menu item, but the bounding box should be the same colour as the body background.

Here’s the css:

.sf-menu {
     border-right:1px solid #ccc;
     float:left;
     background: #EBB0F5;
}

and later, i define the css for the .sf-menu li box:

.sf-menu li {
        background:             #fff;
}

The rounded corners are defined here:

.sf-menu a {
        border-left:1px solid #ccc;
        border-top:1px solid #ccc;
        border-bottom:1px solid #ccc;
        padding:9px 13px;
        text-decoration:none;
        -moz-border-radius-topleft: 10px;
        -moz-border-raduis-topright: 10px;
        -webkit-border-top-right-radius: 10px;
        -webkit-border-top-left-radius: 10px;
}

The html renders thusly:

<div class="menu">
<ul class="sf-menu">
  <li class="page_item page-item-2 current_page_item">
   <a href="http://stories.tamaratemple.com/pages" title="The Storyteller Site">
   The Storyteller Site</a>
  </li>
  <li class="page_item page-item-90">
    <a href="http://stories.tamaratemple.com/pages/resources/" title="Resources">
    Resources</a>
  </li>
  <li class="page_item page-item-116">
    <a href="http://stories.tamaratemple.com/pages/news/" title="News">
    News</a>
  </li>
</ul>
</div>