Rounded tab menu tranparency problem

[mla0205]

Hi Guys! New here..
I need some help.. ASAP (from some people with good heart out there :p)

I have these two images for the menu, with a rounded corner.
It's in .png format and has transparency so that whenever I wanted to change the background, I dont have to go edit the menu.

http://i1011.photobucket.com/albums/af234/mlarcipe/problem.jpg?t=1258709772

The only problem is that, when I tried to do that using the tutorials I found in some threads here, the img02 will overlay the img01 which will result to straight edge, instead of the rounded corner I wanted to achieve.



Here is the code that I used:

#navmenu li:hover,
#navmenu li.iehover,
#navmenu li.active{
background: url(../images/img01.png) right center no-repeat;

}
#navmenu li:hover a,
#navmenu li.iehover a,
#navmenu li.active:hover a,
#navmenu li.active.iehover a,
#navmenu li a:hover,
#navmenu li.active a,
#navmenu li.active a:hover{
background: url(../images/img02.png) left center no-repeat;

Note: Attached files are the menu images.

I would be very glad for people who will help me with this.
I will be waiting.... ;)

May you have a good day!

[monicasaha]

please check the attachment.. I have not done pngfix for ie6 . hope that u can do that yourself.

Thanks
Monica

[mla0205]

Thank you so much Monica!