The plugin doesn't work properly with Safari 4.0.4. It displays the corners, but they are not as smooth as before, links aren't clickable anymore and inline elements can't be rounded. It also generates lots of divs which makes the code messy.

I cant figure out how this works. What am I doing wrong?

i added jquery.js and jquery.corners.js

added
<script>$(document).ready( function(){
$('div.rounded').corner('5px');
});
</script>


have the following in my body tag

an outside div with id="wrap" and class="rounded"

and four divs inside the wrap div as seen below:
div class="features rounded">Feature: One </div

div class="features rounded">Feature: Two </div

div class="features rounded">Feature: Three</div

div class="features rounded">Feature: Four</div

Opera does not propably correct handle the overlay. If you want to put some text floated up at corner and want to click on it, opera is making problem. In IE, Firefox is it ok. The temporaly solution is to create absolute position, with z-index.

When i use the corner method on the window.open event in Chrome no corners are rounded. jQuery v1.3.2

Hello!

If you try to make a corner in an element other than div, using IE8, the execute of the script stops.
It occurs in line 157 of the jquery.corner.js script.

I've added a try...catch block to solve it, but I do'nt know if we can do it by some "best way".

Here what I changed:
At line 157:

bot ? this.appendChild(d) : this.insertBefore(d, this.firstChild);

changed to:

try {
bot ? this.appendChild(d) : this.insertBefore(d, this.firstChild);
}
catch(e) { /* do nothing */ }

That's all ;D
Thank you!

Using IE7 and 8, trying to do a simple 'keep bottom 6px' or similar command on a div (either using .corner() or as data-corner in the div itself), the object will corner correctly but the border stays square. You can see this behavior at http://jquery.malsup.com/corner/ in the 'Pick Your Colors (or keep your borders)' section.

Hi

It seems that only in IE7 the bottom corners are rendered incorrectly if the div contains a
div style="clear: both;"

here is my site http://www.lazyshino.co.uk/test-1

and here are the results for several browsers

http://seeinvisible.litmusapp.com/pub/361e35d

best wishes
Lee

Hi,
If I want to set a default rounding of 5px + use the meta data-corner, the data-corner is ignored :

$('.rounded').corner("5px");

<div class="rounded" data-corner="bottom">My bottom rounded div</div>

The div will be rounded using 5px on each corner, the "bottom" setting is ignored.
Therefore, the only way to do what I want is currently to add the 5px in every rounded block of the page (a lot !).

Thanks :)

When rounding corner on a container using the min-height hack (http://www.dustindiaz.com/min-height-fast-hack/), the bottom corners are rendered at the 'auto' height, resulting in bad display.
Solved this changing line 144 from this:
var cssHeight = $.curCSS(this, 'height');
to this:
var cssHeight = $(this).outerHeight()+'px';

the "keep" attribute allows for rounded corners with a border on IE/Chrome (tested), but IE's behavior is to simply render the original non-rounded border instead.

This happens in both my tests and on the demo site at malsup.com

I am not so sure if this is an issue so much as a feature request. For inner elements in list the corners module rounds all the list items. Is there a way to set a "no corners" options. This way subsequent elements that would normally be affected by the corner element could be unset. An example might be:

1. When I try to add corner to INPUT element, I get JavaScript error in corner.js file in line 163 where is:

   bot ? this.appendChild(d) : this.insertBefore(d, this.firstChild);

saying that object doesn't support method.

1. Once the corner method is executed, elements affected loose borders, and corner is visible on the content, but the border is gone.

First off, great script. I just found it, but it is making web development much faster and easier for me.

I noticed today that the corners over a page background image are working, but the corner backgrounds are of the page background color and not pulling in the background image.
http://www.tryoutresults.com/inside.php?pg=associations

I am going to poke around to see if I can fix it, but I was wondering if this is a known issue with an easy fix, or now.

Hi, I am using the plugin in three places on a page... it looks great in Firefox and Chrome, but in IE (all versions) this always happens:

The first instance works fine -- but subsequent instances don't get rounded right; they have a dark bit in each corner.

Thoughts?

This code works fine with FF and other versions of IE, but with IE9 it does not round. First I test version and then set parameters;

Then I use the

                <div class="content"> Links to other stuff here... </div>

Please refer to the reply to my initial post at ASP.NET forums for more details. Essentially, when the corners plugin is applied to elements in a content placeholder page inside a master page it works fine. However when the placeholder is inside of a panel or div with an id it does not work on any object inside that panel.

I am using Windows XP, IE8, jQuery 1.4.2, and the latest corners plugin.

I am using corner to round out the corners of a container on a fixed-width centered layout. The body has a CSS background image (jpg) that is repeated. I apply a corner to the container and all is well except in IE8, it will not corner unless I remove the background image of the body via CSS- if I do that, it corners just fine.

Is this a limitation or is there a work around?

generally works incorrectly in IE 7 in many cases when rounded buttons inside jquery UI dialog
for example:

        $("button.btn").corner("keep 3px");

     var testDialog= $("#testDialog");
        testDialog.dialog({
                    autoOpen: true,
                    draggable: true,
                    resizable: false,
                    /*dialogClass: 'commonConfirmDialog',*/
                    height:100,
                    width: 180,
                    position: ['center', 'center'],
                    minWidth:180,
                    minHeight:100
                });

    });

    function showDlg_Click()
    {
    $("#testDialog").dialog("open");
    }

     function btnOk_Click()
    {
    $("#testDialog").dialog("close");
    }
</script>
</head>
<body>
    <button class="btn" onclick="showDlg_Click()">Show dialog</button>
    <div id="testDialog" title="Test dialog">
        Some text<br/>
        <button class="btn" onclick="btnOk_Click()">Press OK</button>
    </div>
<body>

Is there an issue with the corner plugin with jQuery 1.3.2? This is the first time this has happened, and I've used your plugin for a long time. When viewing in IE8, the element does not have a border. When reloading the page with javascript turned off, the border is there.

The following code didn't do what I expected (remove the current corner and recorner the selected elements):
$(".selector").uncorner().corner();
This would be a common task for recornering elements for example.

Replacing line 173 with:
$.fn.uncorner = function() {$('.jquery-corner', this).remove(); return this; };
Solved the problem. Perhaps remove() doest return jQuery?
I don't know enough about jQuery to know whose bug this is, but the line above fixes it.

Corners with Recaptcha gives following error
Firefox.
Error: [Exception... "Component returned failure code: 0x80004005 (NS_ERROR_FAILURE) [nsIXMLHttpRequest.send]" nsresult: "0x80004005 (NS_ERROR_FAILURE)" location: "JS frame :: http://example.com/jquery/jquery.min.js :: anonymous :: line 18" data: no]

Google Chrome:
Error: NETWORK_ERR: XMLHttpRequest Exception 101

Haven't tested other browsers.

,my code

$("#member-box").corner("top 8px");

<div id="member-box-main">
test
</ div>

1 box is ok but if have a box more than 1

cornor is not show after first box :O

thanks.

I've noticed that if i use a background picture the corners are not rounded when using Firefox; all other browsers are working fine (Safari, Internet explorer, Opera, Chrome...). How can i solve this?

thanks in advance,

if a min-height property is inherited from the parent element it overrides the inline height: 1px setting.

Hi there,

I am still learning about JQuery Corner. So maybe I do a mistake. I want to draw rounded corners to my nav buttons. I am using JQuery 1.3.2 that comes with Wordpress 2.8.6.

My code is as follows:

[...]

[...]

[...]

[...]

While FF and Iron/Chrome render the borders fine (Iron/Chrome looks somewhat aliased but at least it works somehow) and do not even require the "wrapped div" (border works) I have problems with MSIE 8 and Opera 10. Best way to imagine the problem is IMO to see the screenshot: http://www.meszi.de/Zwischenablage01.jpg

What can you suggest to get this issue resolved?

CU,
Mészi.

People who had problems with ie compatibility. Code below deactivate the script only for ie browser.

Fırst it checks the browser whether if ie or not. if your browser is ie i just put a comment like Do Nothing, if not just write your plugin codes.

// PUT THIS CODE BETWEEN JAVASCRIPT TAGS

var isIE/@cc_on=1@/;
if(isIE){
//Do Nothing !
}else
{
// CORNER PLUGIN CODES
$("#mydiv").corner("bottom","3px");
}

First of All thanks a lot for your great script.
anyway: I tried all the solutions here and I couldn't solve
problem I have in IE when I am using corner plug-in and in some corners there are some problems which I can not solve:
you can check this with IE
http://huraman.com/tehranr/

Thanks a lot for your help
Danial

In IE8 I receive the following error:

Line: 132
Error: Unexpected call to method or property access.

Hi,

I was using another plugin called corners (yes, same with "s"). I had to drop it in favor of this one, and now my page behaves as expected :)
Anyway, there 2 things I miss in the current implementation :

• no native corners if safari/firefox (they render a lot better than the JS way)
• not able to pass "params" as classes. corners is using classes like "rounded {top left}" so that the JS is really minimal (handling the class "corners" only).

It would be great to have these 2 features. Also, I must admin the rendering is a little better on IE with cornerS, but the library also has a lot less features !

ho, corners can be found here :
http://www.atblabs.com/jquery.corners.html

the project doesn't seem to be active any more :(

Thanks

Hey!
The transparency doesn't work on IE,
and that is really sad because I can't use your plugin until it will work in all IE6/7/8.
I saw an other script that it's transparency does work in IE,
so maybe it will help you to do the same that yours will also work,
take a look at:
http://www.curvycorners.net
I really don't know if this script work in the same way as yours, but maybe.
(why I don't just use it? because it's got some problems, but the transparency part does work)

if i use div with style top:-100px; , then corner is not render properly.

Hi - just wanted to report a memory leak using Internet Explorer + the corner plugin. Memory is lost on each page refresh (observed using ie6). It can be fixed as follows (call to removeExpression added):

var expr = $.browser.msie && (function() {
    var div = document.createElement('div');    
    try { div.style.setExpression('width','0+0'); div.style.removeExpression('width'); }    
    catch(e) { return false; }    
    return true;
})();

Cheers,

Tim

When using corner() in FF3.5.2 the usage of Sliding animations leaves a "barbed" look, as apparently FF rendering engine can not cope. Even uncornering and then recornering does not make the visual error go away, however - changing the opacity via FadeTo of the object sometimes resets the visual. Not sure if this is even an issue with corner.js or a FF bug?!

Hi Dave and Mike,

I am trying to use rounded corners with a Wordpress theme and I just can't figure out what's not working.

jQuery comes with wordpress now and the only thing that I need to adjust, when using the actual library, is to change $ sign to 'jQuery'.

However, when I do the same to your plug-in and call it from the page, it doesn't seem to work.

Any ideas where I am going wrong or what information could help you help me?

Thank you very much!

Hey, and thanks so much for jCorner. What i wonder is if i'm missing a way to suppress the extra bits from the print style of a document that uses colored corners -- i.e. $(this).corner("cc:#9"); -- which i'm using with a 35px radius on top corners. It creates two distracting little crescents on the (printed) page and i'm wondering if there's a way around this. Thanks!

please check the following paste:

http://pastebin.com/c3QiLfJi

We use jquery.corner to do rounded corners in our application.
Mostly this works fine. But in some situations (above all in combination with li elements) it produces extremly strange results.
display in firefox: http://dl.dropbox.com/u/1776128/firefox3.6-windows.png
display in ie8: http://dl.dropbox.com/u/1776128/ie8.png

The file code can be seen in
http://dl.dropbox.com/u/1776128/%40menus.html

The code opening and closing the slide-menu is as follows:
(function($) {

$.fn.slideMenu = function(div) {
return this.eq(0).each(function() {
var $a = $(this);
var $span = $a.parent();
var $menu = $(div);
var menuId = $a.attr('href');

    if ($.fn.slideMenu.openMenu && $.fn.slideMenu.openMenu == menuId) {
        $.fn.slideMenu.openMenu = false;
        $menu.hide();
    } else {
        // right align the menu?
        var alignRight = $span.hasClass('right');

        // display and hide menu? maybe calculation of width will not work if closed?

        var spanPos = $span.offset();
        var spanWidth = $span.outerWidth();
        var spanHeight = $span.outerHeight();
        var pagePos =  $('#page').offset();

        var menuWidth = $menu.outerWidth();
        var duration = Math.max($menu.outerHeight()*1.5, 250);

        if (alignRight) {
            $menu.css('left', spanPos.left - pagePos.left - menuWidth + spanWidth).css('top', spanPos.top - pagePos.top + spanHeight);
        } else {
            $menu.css('left', spanPos.left - pagePos.left).css('top', spanPos.top - pagePos.top + spanHeight);
        }

        $menu.slideDown(duration);
        $.fn.slideMenu.openMenu = menuId;
    }
});

};

})(jQuery);

The code used to attach the slideMenu contents to the a-tags:
function prepareMenus() {
var openMenu = false;
var $menus = $('div.menus');
$('#page').append($menus);
$('span.menu a').click(function() {
var $a = $(this);
var href = $a.attr('href');
var pos = href.indexOf('#');
var id = href.substr(pos);
var $div = $(id, $menus);

    $menus.hide();
    $menus.children().hide();
    $div.show();

    $a.slideMenu($menus);

    return false;
});

}

The code used to prepare the rounded corners:
function prepareCorners() {
$('div.content span.edit a').corner("4px").parent().corner("5px");
if (!$.browser.msie) {
$menus = $('div.content div.menus');
$('div.items', $menus).corner("5px").parent().corner("7px");
}
}

In summary:

1. All span.edit a elements get rounded corners
2. All a.menu elements get an attached slideDown menu
3. The slideDown functionality is handled in the slideDown extension

As you can see the rounded corners of the menu itself (not the buttons within) are already excluded as they lead to a menu that looks very similar to the ie8-screenshot (but the whole menu displays in such a way).

IE 8 shows a rendering bug. I'm using the following code:

<style>
ul#navigation li a {
        color: white;
        text-decoration: none;
        display: inline-block;
        padding: 0.8em;
        -moz-border-radius: 8px;
        -webkit-border-radius: 8px;
        border-radius: 8px;
        font-weight: bold;
        font-size: 0.8em;
        text-transform: uppercase;
}
</style>

<script>
                var nav = $('ul#navigation li a');
                $.each(nav, function(i, n) {
                        $(n).width($(n).width());
                        $(n).corner("11px");
                });
</script>

The result is that most of them work, but 3 of the navigation links show a bug in rendering as the image below shows:

http://imagepaste.nullnetwork.net/viewimage.php?id=522

when i used "the Corner Plugin with Images" from the page it self, it running well.
but, when i tried to call the image via ajax:
$.fn.corner.defaults.useNative = false;
$(document).ready(function(){
$("#imgBox").corner("15px");
});

the image still doesn't have rounded corners.
can yu give me an example how to call corner plugin with image via ajax..
thanks..

The following renders a rounded div but not a rounded input element in FF3, IE7,
IE8, and in fact causes the input box border to disappear completely:

http://www.weichbrodt.org/jquery.corner.test.html

Doubly frustrating because border-radius does round the corners of input elements in FF3.

Cheers!

Corner() works sensationally well for me in Chrome and FF, but in IE 7, the page renders first, then the corners are modified a split-second later, causing a distracting animation effect. These are the first two lines of my code:
$(document).ready(function(){
$(".tab").corner("tl tr 10px");
Other jQuery code following the corner statement is behaving as expected, just the corners are doing this two-step rendering.
Has anyone else noticed this behavior, or is it unique to me? Is there a work-around?

There are basically some alignment/mostly horizontal axis issues with a number of the samples on the project page. I will try to fix some of these, but I'll need to get acquainted with the code first.

My itch to scratch is the "keep notch" variant.

(I don't see screenshot support, so this'll have to do...)

http://imgur.com/MgYaC.png

If anyone has any advice, please dispense it...

This code works fine with FF and other versions of IE, but with IE9 it does not round. First I test version and then set parameters;

Then I use the

Hi,

When I apply corners to a div that has a background and border, then borders are corned and displayed correctly in all browsers except Internet Explorer (tested with 7 and 8). Instead, the border is hidden but rounding is applied with the 'background' color of the div.

sidemenu {

width: 170px;
float: left;
padding: 10px;
background: #bcbcbc;
border-left: 2px solid #f49d03;
border-right: 2px solid #f49d03;
border-bottom: 2px solid #f49d03;

}

$('#sidemenu').corner("bottom");

i try this plugin..work well in FF, but the border "keep" doesn't work in IE6. Please advice how to make it work in IE6. anyway, this is a very good plugins. thanks

IE 8 is giving me the following error:

Line: 157
Error: Unexpected call to method or property access.

regards,
Tim

Hi,

I have a small table where I want to set-up some corners. Unfortunately, it's only working on safari. Since borders are set on the table itself, I don't want to embed all of this in a div.
Anyone having the same issue ?

Thanks

When expanding a rounded div tag in firefox 3.5.5 on windows xp and Mac OS X 10.6, it doesn't remove the old corners (try example code).

In http://jquery.malsup.com/corner/image.html It should be stated that $.fn.corner.defaults.useNative = FALSE , otherwise it won't work on browsers supporting round corners.

the only effect that will yield transparent corners is "round". Is it possible to have transparent "beveled" corners?

thanks