Applying image rounded corners to <li>

Question

I was using jQuery plugins to create a rounded corner for my <li>, but it was not working on a lot of browsers and didn't support mouse over.

I am wondering what is the best way to use two images (left corner and right corner) as the left and right side with using <li>.

Answer 1

You could put Divs inside your li's like so:

<li>
  <div class="lefcorner"></div>
  <div class='liContent'>Foo</div>
  <div class='rightcorner'></div>
</li>

That way you will both keep your semantics and will also have the cross-browser support of styling DIVs.

Answer 2

The construct that I have seen used most for that is a span inside a link.

so something like:

<li><a><span>Your text here</span></a></li>    

you can then target the span and the link using the hover state of the link:

a:hover{some rules here}  
a:hover span{some more rules here} 

that keeps it kinda semantic, and doesn't add to much junk to the page.