Rounded corner on rollover - CSS problem

HTML & CSS
1

I am developing a site that requires the navigation menu to have one rounded corner at the end on the home button. The default button state is created using a background image but I need it to also have a rollover effect on hover and also on focus (for the home page item only). I have tried to use CSS and curvy corners Javascript code to create the effect as I don’t want to use images. However, I don’t think the curvy corners script is picking up the div item that I want to apply the corner to.

The trouble is I have a number of div boxes on the site that also have rounded corners (3 rounded and 1 square). The CSS is working fine for these in all browsers apart from Opera but when it comes to the navigation it doesn’t work properly in IE.

Here’s the HTML for the menu:


<div id="menu">
	<ul>
	<li><a href="index.htm" class="home">Home</a></li><li><a href="#">Mortgages</a></li><li><a href="#">Life Assurance</a></li><li><a href="#">General Insurance</a></li><li><a href="#">Partnership Services</a></li><li><a href="#">About Us</a></li><li><a href="#">Contact Us</a></li>
	</ul>
</div>
<br class="clearfloat" />

and here’s the CSS:


#menu {
	background-image:url(images/menubg.png);
	height:24px;
	width: 100%;
	overflow: hidden;
	position:relative;
	float:left;
	}
	
#menu ul {font-size:11px; font-weight:bold; list-style:none;}
#menu li{ display: inline; margin: 0;}
#menu ul li a {float: left;
	display: block;
	text-decoration: none;
	margin: 0;
	padding: 6px 15px 5px 15px; /*padding inside each tab*/
	border-right: 1px solid white; /*right divider between tabs*/
	color: white;
}
#menu li a:hover, #menu li a.focus {display: block; text-decoration:none; color:#445671; background-color:#d9e021;} /*background of tabs for hover state, plus tab with "focus" class assigned */

#menu li a.home:hover, #menu li a.homefocus { width:auto; text-decoration:none; color:#445671; background-color:#d9e021; border-right: 1px solid white;
/* Do rounding (native in Firefox and Safari) */
     -moz-border-radius-topleft:12px;
   	-moz-border-radius-topright:0px;
  	-moz-border-radius-bottomleft:0;
  	-moz-border-radius-bottomright:0px;
  	-webkit-border-top-left-radius:12px;
  	-webkit-border-top-right-radius:0px;
  	-webkit-border-bottom-left-radius:0px;
  	-webkit-border-bottom-right-radius:0px;
}

The CSS is in an external stylesheet, although I have also added the CSS for the rounded corner items to the header code.

The class ‘homefocus’ seems to work when applied to the a tag on the home page but the other class ‘home’ which should work on hover won’t work in IE.

I’m sure it’s something to do with the hover. Any ideas how I can make it work? :confused: