Applying image rounded corners to <li>

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>.

Answers


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.


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.


Need Your Help

how to fill gradient in background or image as backgrond for slider control in wpf?

c# wpf xaml slider styles

I am working on slider control of wpf, i want background design of slider control filled according to my attached image, please help me how i can fill the background with same gradient in wpf ?

Play framework JavaWs exception java.io.IOException: Remotely Closed

playframework playframework-2.2

I am trying to call a post() on URL using Play Framework and I am getting following exception. I am new to play framework. What could be happening here?