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.


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>

Need Your Help

Find the longest string in a binary string tree python

python string binary-tree

Alright so I need to define a recursive function longest_length() that takes a binary string tree and returns the length of the longest string in the tree.

textbox style following jquery mobile

javascript jquery html html5

i having problem in creating textbox using jquery that is implemented in webview. here is the code

About UNIX Resources Network

Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.