Corners lead to very strange visual effects

[simon-scheurer]

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