jQuery UI bounce effect aligns elements left in Firefox and IE8

Question

There is an issue with JQuery UI\'s bounce effect in both Firefox and IE8 or lower. IE9, Chrome, and Safari render the bounce effect properly. Any ideas what is causing this

Answer 1

Bounce effect applies this style to the element:

element.style {
    bottom: auto;
    left: 0;
    position: relative;
    right: auto;
    top: 0;
}

Firefox disregards margin:auto in favor of left:0. This fixed the problem:

#notice {
  margin-left: 300px;
}

And for variable-width box:

#notice-container {
  text-align: center;
}

#notice {
  display: inline-block;
}

EDIT: For anyone that uses this answer I wanted to add a couple minor tweaks that made it work.

First

    #notice-container
    {
      text-align: center;
      display: none; /*Add this to make the parent invisible until the show effect is used.*/
    }

Next, the above JQuery in the question should be modified to use the parent container, not the centered child.

$('#notice-container').show('drop', { direction: 'right' }, 2000);
$('#notice-container').effect('bounce', { times: 3, distance: 10 }, 300);
// etc...