Vertical nav with rounded corners

[son]

I have a div with an unordered list inside which holds the navigation. I have a nice repeating image for background, but somehow do not get to grips with the rounded corners on each side of nav (so, I have three images altogether). Applying the left image to the ul does not work although I applied a left-padding big enough... The code is:

#contentNav {width:100%;background:#FFF url(topNav.gif) repeat-x;margin-bottom:20px;}#contentNav ul {padding-left:20px; background:#FFF url(topNavLeft.gif);}#contentNav ul li {float:left;border-right:#FFF 1px solid;}#contentNav ul li a {display:block;padding:10px 10px 8px 10px;font-size:14px;color:#59B7C1;}

[thescientist]

why not go:<div>left side rounded image | <div><ul></div> | right side rounded image?</div>Perhaps leave the images out of the list?Anyway, is the image in the same directory as the HTML file?

[real_illusions]

I'd use CSS3 rounded corners - get rid of the images.Can always target those poor suckers on IE with a bit of Javascript to give them the rounded corners.

[son]

I'd use CSS3 rounded corners - get rid of the images.Can always target those poor suckers on IE with a bit of Javascript to give them the rounded corners.

I tried:

<div style="-moz-border-radius: 5px;-webkit-border-radius: 5px; background-color:#CC0099;">test</div>

and works well for Safari, Chrome and Firefox. How would I target this in Javascript? Never done anything like this in Javascript...SonReason for edit: Forgot to include complete style info...