Applying image rounded corners to <li>

Question

Hey,

I was using jQuery plugins to create a rounded corner for my

< li >

but it was not working on alot of browsers and didnt support mouse over, it acted very strange.

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 >

Any thoughts? I looked on google and here, but it only brought up more jQuery plugins, and rounded corners using < div > elements for content.

Ryan

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

Let me give this a go :) Ill post my results.

Answer 3

For the left and right corners, I would just have to set the width to the width of the background image correct?

Answer 4

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.

Answer 5

Hey, below is my current code, but wont display the background unless I make it display:block. But if I do that it wont make my list inline as i want it, ideas?

#top ul li.corner span.left-corner{
    background-image:url("images/corner-left.gif");
    background-repeat:no-repeat;
    width:12px;
    height:23px;
}
#top ul li.corner span.right-corner{
    background-image:url("images/corner-right.gif");
    width:12px;
    height:23px;
}
#top ul li.corner span.content{
    background-color:#2C2C2C;
    width:12px;
    height:23px;
}

HTML:

<ul>
 <li class="corner">
  <span class="left-corner"></span>
  <span class="content"><a href="http://www.ryancoughlin.com/index.php" title="Go Home">home</a></span>
  <span class="right-corner"></span>
 </li>
 <li class="corner">
  <span class="left-corner"></span>
  <span class="content"><a href="category/tutorials/" title="View Tutorials">tutorials</a></span>
  <span class="right-corner"></span>
 </li>
 <li class="corner">
  <span class="left-corner"></span>
  <span class="content"><a href="category/blog/" title="Read My Blog">blog</a></span>
  <span class="right-corner"></span>
 </li>
 <li class="corner">
  <span class="left-corner"></span>
  <span class="content"><a href="about/" title="Get To Know Me">get to know me</a></span>
  <span class="right-corner"></span>
 </li>
 <li class="corner">
  <span class="left-corner"></span>
  <span class="content"><a href="category/blog/" title="Read My Blog">blog</a></span>
  <span class="right-corner"></span>
 </li>
 <li class="corner">
  <span class="left-corner"></span>
  <span class="content"><a href="contact/" title="Contact Me">coffee? chat? project?</a></span>
  <span class="right-corner"></span>
 </li>
 <li class="corner">
  <span class="left-corner"></span>
  <span class="content"><a href="http://feeds.feedburner.com/ryancoughlin/" title="Subscribe">subscribe</a></span>
  <span class="right-corner"></span>
 </li>
</ul>

Answer 6

I got the answer. Pim wrote in the comment to my reply above, to float the li's and set display:block.

Working great!