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

Placing Java objects on Redis: is JavaNode a correct approach?

java redis jackson

I'm writing a JSON representation of an object to a Redis instance (via Jesque) but am unclear whether putting a JsonNode object is the right approach. The gist of examples/APIs (e.g. this one for

Emoticon Replace Using Regex for Keys in a Dictionary

c# regex dictionary twitch

I found an elegant solution for what I'm trying to execute, which is the replacement of emotes in a string with a URL (it'll end up being an img tag once I figure this out. This solution was found ...