views:

678

answers:

2

I have an issue where a div is not getting rounded corners added in IE but it works fine in chrome and firefox. It appears to round the corners but removes the border colours. You can see the rounding if you highlight the rendered page.

Any ideas why this is happening and how to fix it? I'm using version 2.03 of jquery corners downloaded from http://jquery.malsup.com/corner/

            <html>
            <head>
            <style>
            #content{   border: solid 6px #888888;}
            #content2{  border: solid 6px #888888;}
            </style>
                <script type="text/javascript" src="include/script/jquery-1.3.2.min.js"></script>   
                <script type="text/javascript" src="include/script/jquery.corners.js"></script>
                <script type="text/javascript"> 
                    $(function(){                           
                        $('.content').corner("round 8px").parent().css('padding', '8px').corner("round 14px");
                        $('#content2').corner();
                    }); 
                </script>     
            </head>
            <body>
                <div id="content" class="content">
                    content
                </div>
                <div id="content2" class="content2">
                    content
                </div>
            </body>
            </html>
A: 

Hi Arnout!

Your code looks ok. One thing I would suggest is wrapping that javascript code in a ready statement. You are trying to round the corners of an element before you know if it has finished loading or not. Here is the code I would try.

$(document).ready(function(){                           
    $('.content').corner("round 8px").parent().css('padding', '8px').corner("round 14px");
    $('#content2').corner();
}); 

Hope this helps!

Metropolis

Metropolis
$(function(){is shorthand for $(document).ready(function(){ they should achieve the same thing. I've tried it anyway, but it's not made any difference.
arnout
do you have an example of this I can see up?
Metropolis
A: 

Taken from http://jquery.malsup.com/corner/ - "Recently I added support for native border-radius rounding in browsers that support it (Opera 10.5+, Firefox, Safari, and Chrome). So in those browsers the plugin simply sets a css property on the element. But in IE, we'll have to wait for version 9 before that is supported. And for all browsers, choosing a pattern other than "round" requires the use of the "div stips" method. "

So rounded corners won't work in IE, but any other corner style will.

Azhral