[CSS TABS] Rounded corner on the right hand side doesn't appear???

[!designer!]

When I test the hover state of the mainMenu, I don't see the rounded cornered on the tab on the right hand side of the screen, all I see is a non-rounded corner on the right hand side of the tab. Could someone please tell me how to fix this? I am using XHTML 1.0 Strict as the doctype. Thanks in advance.

#mainMenu {
    float:left;
    width:100%;
    font-size: 14px;
    list-style:none;
}
 
#mainMenu li {
    display: inline;
}
 
#mainMenu a:link, #mainMenu a:visited {
    background: url('images/tab-left.gif') no-repeat left top;
    margin-right: 1px;
    padding: 5px 4px 5px 5px;
    text-decoration:none;
    color: #000;
}
 
#mainMenu a:link span, #mainMenu a:visited span {
    background: #DADADA url('images/tab-right.gif') no-repeat right top;
    color:#000;
    margin-right: 1px;
    text-decoration:none;
    padding: 5px 4px 5px 5px;
}
 
#mainMenu a:hover {
    margin-right: 1px;
    color: #000;
    text-decoration: none;
    background: bottom left;
    padding: 5px 4px 5px 5px;
}
 
#mainMenu a:hover span {
    margin-right: 1px;
    color: #000;
    text-decoration: none;
    background: bottom right;
    background: #C2C1C1;
    padding: 5px 4px 5px 5px;
}

<ul id="mainMenu">
	<li><a href="#"><span>Home</span></a></li>
	<li><a href="#"><span>Partner Profiles</span></a></li>
	<li><a href="#"><span>Photos</span></a></li>
	<li><a href="#"><span>Careers</span></a></li>
	<li><a href="#"><span>Client Base</span></a></li>
	<li><a href="#"><span>News</span></a></li>
	<li><a href="#"><span>Contact</span></a></li>
	<li><a href="#"><span>Sitemap</span></a></li>
</ul>

[kohoutek]

You have taken out/not specified the background image on hover.

This:

#mainMenu a:hover {
    margin-right: 1px;
    color: #000;
    text-decoration: none;
    background: bottom left;
    padding: 5px 4px 5px 5px;
}

isn't valid. The background shorthand must have either a color or background image value defined. So either remove that line from the hover state or add the background image to that declaration. And if you need both images, then use one for the :hover and the other for the :hover span, just like you have done for the :link and :visited rules.

[!designer!]

Thanks that worked.