« return

Cross browser CSS rounded corners on hover for IE

22-Jul-2011, Ant

I have been trying out getting css rounded corners to work for IE 7 and 8 using http://fetchak.com/ie-css3/

 

If you are having trouble add the folowing styles:

z-index
position relative or position absolute
zoom 1

To work on hover for an "a" tag:

 

I got it to work using javascript with a hover class instead of the standard css :hover styles. 

Note you need to specifically add the behavior css style.


$(".topnav li").hover(
  function () {
    current_menu_item = $(this).html();
    $(this).addClass("hover");
    $(this).find('a').css('behavior', 'url(/stylesheets/ie-css3.htc)');
  },
  function () {
    $(this).removeClass("hover");
    $(this).html(current_menu_item)
  }
);