jQuery UI Sortable widget applied to table causes rendering issue on IE 7

Question

I'm using jQuery UI Sortable. This is the code I have:

$("table tbody").sortable({       
    items: 'tr:not(:first)', // Exclude 1st row (template)
    cursor: "move",
    axis: "y",
    //appendTo: document.body,
    //zIndex: 9999,
    stop: function(event, ui)
    {
        //alert("New position: " + ui.item.index());
    }
});

I use this meta tag to render the page using IE=7 engine:

<meta http-equiv="X-UA-Compatible" content="IE=7" />

When testing with IE 7 I see a rendering/painting issue like this:

As you can see this seems to be a z-index issue. I tried adding zIndex: 9999 but it didn't work. I drop the dragged row but it overlaps. This is crazy!

What may be causing this?

By the way: I'm using jQuery 1.10.2 and jQuery UI 1.10.3.

Answer 1

I found the culprit:

Font Awesome 3.2.1 and its accompanying font-awesome-ie7.css file.

I removed font-awesome-ie7.css and now it works as expected.

I confess I was going crazy with this one almost pulling my hair out! :D