I've used the Corners plugin, which works without images. Your code is almost correct, however you seem to have mixed your jQuery selectors up. To select an element with id myId
, use $('#myId')
, see also selectors in the jQuery docs.
Working code for FireFox:
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="jquery.corners.min.js"></script>
<script type="text/javascript">
$(document).ready( function()
{
$('#nav_links').corners('20px');
});
</script>
<style type="text/css">
#nav_links { background-color: #c0c0c0; }
</style>
</head>
<body>
<div id="content" class="content">
<table id="nav_links" class="nav_links" cellpadding="7">
<tr>
<td class="nav_background"><a href="index.html">Home</a></td>
<td class="nav_background"><a href="#">1</a></td>
<td class="nav_background"><a href="#">2</a></td>
<td class="nav_background"><a href="#">3</a></td>
<td class="nav_background"><a href="#">4</a></td>
</tr>
</table>
</div>
</body>
</html>
Note that this requires you've downloaded and installed the plugin. As you write in the comments, this doesn't seem to work for tables in IE. The best solution in this cases would be to transform the table to a list as suggested by dcneiner, since this is semantically a list of pages/links anyway.
If you want to stick to the table, and are able to specify an explicit width, use a background div to do what you want:
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="jquery.corners.min.js"></script>
<script type="text/javascript">
$(document).ready( function()
{
$('#nav_links_background').corners('20px');
});
</script>
<style type="text/css">
#nav_links_background { background-color: #c0c0c0; width: 20em;}
</style>
</head>
<body>
<div id="content">
<div id="nav_links_background">
<table id="nav_links" cellpadding="7">
<tr>
<td class="nav_background"><a href="index.html">Home</a></td>
<td class="nav_background"><a href="#">1</a></td>
<td class="nav_background"><a href="#">2</a></td>
<td class="nav_background"><a href="#">3</a></td>
<td class="nav_background"><a href="#">4</a></td>
</tr>
</table>
</div>
</div>
</body>
</html>