Question

I have a large table which has a background-color on each td. I also have the following code:

    $('.table-cell').live('mouseover', function () {
        $(this).stop().fadeTo('slow', 0.7);
    });


    $('.table-cell').live('mouseout', function () {
        $(this).stop().fadeTo('fast', 1.0);
    });

The mouseover is working fine. The color will change to a lower opacity nicely but when your mouse leaves the cell the cell goes white (except for the text which continues to have a colored background). After the fade completes the color will return properly but it looks really bad while it’s changing.

We have this problem in FireFox 11 and IE8 (7 & 9 work fine).

Answer 1

The problem is border-collapse: collapse; this will solve the problem

table
{
    border-collapse:separate;
}

Example

In the comments I noticed that this fiddle is not working like Chrome in FF because the Normalized CSS was checked and this fiddle just works fine in both Chrome and FF without Normalized CSS. Check this answer to understand Normalized CSS that uses border-collapse: collapse;.

Nnormalize.css link