Rounded corners with transparent background.

Question

On my website, each menu button has rounded corners using the dd_roundies library and has mouseover, mouseout, and onclick handlers assigned through jQuery. Corresponding JS code:

$(function(){

    // Add an event handler to the menu items that changes the background colour on mouse-over
    // and reverts it on mouse-out.
    $('div.nav-box').hover(
      function() {
        $(this).addClass('highlight');
        document.body.style.cursor = 'pointer';
      }, 
      function() {
        $(this).removeClass('highlight');
        document.body.style.cursor = 'default';
      }
    );

    // Add an onclick handler to each menu item
    $('div.nav-box').click(
      function() {
        // Change the current page to the 'href' value of the nested <a> element
        document.location.href = $(this).find("a:first").attr("href");
      }
    );

    // Round the corners of the menu items 
    DD_roundies.addRule('.nav-box', '20px', true);
});

Everything works very well in FF, but in IE7 it's a mess. The most obvious problem is that the background used when hovering the mouse over is square (not round), and in some cases the background does not disappear after clicking on a menu item and then on the mouse.

I do not expect anyone to understand how to fix the code above, but if you know an alternative way:

• apply transparent rounded corners to divs (so that the color of the parent element is shown through rounded corners)
• div (, mouseover),
• IE7 FF3 ( )

, IE , FF. JS- , CSS - .....

,

Answer 1

jQuery Corner IE. , , .

$(document).ready(function(){
    $("div.nav-box").corner("20px");

    $("div.nav-box").click(function(){
        //
    });
});

CSS. , IE6, - .

div.nav-box
{
    cursor: default;
    background-color: Blue;
}

div.nav-box:hover
{
    cursor: pointer;
    background-color: Red;
}

Answer 2

, , PNG, -, IE HTML- (.htc). .

.htc, PNG CSS.