tags:

views:

547

answers:

1

I have jquery cury corners working great in firefox, this includes on a div and table. The div content is empty, but has a height and width vaule...this causes problems in IE as only the top of the div tag is cornerd, the table isnt at all.

    <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> 
 </tr>
</table>

 <script type="text/javascript">
$(document).ready( function()
{
    $('.content').corners();
    $('.nav_links').corners("bottom");
 });
 </script>

This isnt a duplicate post, as the first wasnt due to the IE problem

Cheers

A: 

I got this to work by putting the table in a div and applying corners to this, also I reversed the order in which corners are applied to inner div first as doing outer first will not work.

<div id="content" class="content" style="background-color:Red">
<div class="nav_links" style="background-color:blue;width:100px">
        <table id="nav_links"  cellpadding="7" >
        <tr style="background-color:blue">
        <td class="nav_background" style="background-color:blue"><a href="index.html">Home</a></td>   
        </tr>
</table>
</div>

<script type="text/javascript">
    $(document).ready(function() {
        var settings = {
            tl: { radius: 5 }, tr: { radius: 5 }, bl: { radius: 5 }, br: { radius: 5 }, antiAlias: true
        };
        curvyCorners(settings, '.nav_links');
        curvyCorners(settings, '.content');
    });
 </script>
Richard
Thanks, this doesnt seem to round the corners at all?Could you give me an full page example please..?
Elliott