Unwanted border around HTML button

Unwanted border around HTML button

  1. Hi,

    I'm using jQuery to handle clicks on buttons of a given class and encounter a graphical problem with Internet Explorer 8: each button that was clicked appears like framed.


  2. The screenshot attached shows this (see the "+1" button).

  3. $('.' + class_add).click(function () {
    addToCart(this, this.name, this.id);
    alert('This alert box displays as expected.');
    return false;
    });

    In Firefox and Opera, the button keeps the focus after the click, but this pseudo-frame does not appear. This is the behaviour expected.

    In MSIE, it is like the button is enclosed in a parent container that remains in toggled state after the click. But the frame affects the button itself. (I checked by giving a larger size and special border to its parent.)

    I tried to replace the "click" event handler by ".mousedown" and even by ".mouseup".
    I also tried to return true instead of false, but the problem remained.

    Any idea what to do in such case ?
    Thanks.