Firefox jQuery UI Position effect

This requires a bit of history so you can see how one fix has only turned into a problem that itself needs to be fixed:

Take a look at this jsFiddle in Firefox. Click on the button and you'll see a maroon box show up in the upper left corner of the HTML are开发者_如何学Pythona. In Chrome, IE, and Safari, in the same jsFiddle, the cell with the checkbox will get the maroon box show and then fade out to the background, which is what the desired behavior is.

Note in the js code and the css that a div is added to the checkbox cells and then faded out. This was supposed to be the solution to a problem found in this jsFiddle. In the js code there you can see that I use the UI Highlight effect, which works in all browsers, but fades to white before going to the background image.

To address the fade to white then to background image problem, the former jsFiddle was supposed to be the fix, which only introduced the Firefox problem. And trying to fix that using UI's Position effect didn't help.

I'd be eternally grateful if someone could help me find a cross-browser solution that highlights the checkbox cells without fading to white, as the Highlight effect does.

Wrap your input into a <div style="position: relative"> and it will work in FF too. Absolute positioning in tables in FF seems to be a problem, even if the <td> has position: relative.

Here is the modified fiddle.

It's also possible with jQuery only with dynamic wrapping / unwrappring. Modify your JS the following way:

 $('#classesTable input:checkbox').wrap('<div style="position: relative"/>').parent().append('<div class="checkwrap" />');

 $('#classesTable .checkwrap').fadeOut(1000, function() {
       $(this).unwrap().remove();
 });

Here this fiddle

it is nott ff problem - its your. Td cannot be positioned relative. Use div iside td width position:relative