tags:

views:

1426

answers:

1

Hi, I must have tried about 5 different plugins, each having downsides. Firstly I need it to work on a div with a specified height, and still round the corners if there is no content. Secondly it needs to work on tables (havent found any that "work")

I dont really want to use images, as this means 4images for the main content div then 4images for the table, jquery would be much easier

Any advice? Thanks

Below is the code I have tried with cury corners

 $(document).ready( function()
{

  $('.content').corner();
  $('nav_links').corner();


});
</script>

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

+2  A: 

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"&gt;&lt;/script&gt;
<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"&gt;&lt;/script&gt;
<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>
John
Arh rite thanks that works great =)
Elliott
Just one problem...only the top part corners in IE =( problem I have always had, really annoying.
Elliott
Also the table doesnt corner at all in IE
Elliott
Thanks alot :-)
Elliott