Tag Archives: IE7

jQuery table fade doesn’t work in IE7

While working on an up-and-coming web service, I found that apparently Internet Explorer does not cope well with fading <table> elements using jQuery. Here’s what I was doing:

tbl = $('#primaryColumn table');
loading = $('#primaryColumn .loading');

tbl.fadeTo(300, 0.0, function() {
    loading.show();
        tbl.load('/contacts/{pagination:page}/' + page_num + '?ajax&search={pagination:search}', function() {
        loading.hide();
        tbl.stop().fadeTo(300, 1.0, function() {
            tbl.css('opacity', 'auto');  // removing the CSS opacity rule restores the ClearType anti-aliasing in IE
        });
    });
});

For some reason, the fadeIn(), fadeOut(), and fadeTo() effects do not work on <table> elements in IE, although they work great in Firefox and Opera. This also applies when using animate() to alter the CSS opacity rule (yeah, I tried them all).

As usual, the solution proved to be very easy: don’t animate the <table>, rather, wrap the <table> in a <div> and animate that. The only change required is the first line:

tbl = $('#primaryColumn div#table_div');

Bingo! Another three-hour bug-swatting episode reinforcing my hatred for Microsoft browsers of all versions just concluded.

Cross-browser text wrapping in
 tags

Until CSS3 is widely supported, if you want to wrap text inside a <pre> tag you can do it this way:

pre {
  white-space: pre-wrap; /* css-3 */
  white-space: -moz-pre-wrap !important; /* Mozilla, since 1999 */
  white-space: -pre-wrap; /* Opera 4-6 */
  white-space: -o-pre-wrap; /* Opera 7 */
  word-wrap: break-word; /* Internet Explorer 5.5+ */
  white-space: normal;
  width:99%;
}

Note that white-space:normal at the end makes IE behave, and width:99% prevents the dreaded horizontal scrollbar.

Thanks to “Deng Zhi” who commented on Wrapping Text Inside Pre Tags.