jQuery search/filter table - height of table isn't updating correctly
<p><strong>[SOLVED]</strong></p>

<p>problem is IE8, just add this in head:</p>

<p><code>&lt;meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" /&gt;</code></p>

<p>some statements in the search function are not compatible with IE8, not yet found which ones. Maybe the .hide()</p>

<hr>

<p>I have a search box, a data table and a footer.</p>

<p>On back-end (jQuery): I have a search function that filters the table base on user input. Result is filtered on the fly (Height of table is changing dynamically) as user inputs search term; </p>

<p>I also have a function that positions the footer to the bottom of the page, based on how long the table is.
 if table is longer than browsers height, then footer is append to end of table.
 if table is shorter, then footer is fixed to bottom of page.</p>

<p>problem: <code>$('#datatable').outerHeight();</code> does not always update itself while I input search term. Only in IE8, works fine in Firefox.</p>

<p>here are the function:</p>

<pre><code>function positionFooter(obj){
var a = $('#datatable').outerHeight();
var b = $(window).height();

if (a &gt;= b) {
    obj.css("position","relative");
} else {
    obj.css("position","fixed");
    obj.css("bottom","0px");
}
}


function searchTable(inputVal){
    // go through every row
    $('#datatable').find('tr').each(function(index, row){
        var allCells = $(row).find('td');
        if(allCells.length &gt; 0){
            var found = false;
            // go through every cell
            allCells.each(function(index, td){
                var regExp = new RegExp(inputVal, 'i');
                // check if current cell = keyword
                if(regExp.test($(td).text())){
                    found = true;
                    return false;
                }
            });
            // show all found row, hide rest
            if(found == true){
                $(row).show();
            }else{
                $(row).hide();
            }
        }

    });
}
</code></pre>

<p>here is how I call them:</p>

<pre><code>$(window).resize(function(){
    positionFooter($('#footer'));
});

$(document).ready(function(){
    positionFooter($('#footer'));

    $('#search').keyup(function(){
    searchTable($(this).val());
    // as user type keyword, table height changes
    // should re-position footer everytime table changes
    positionFooter($('#footer'));
    });
});
</code></pre>

<ul>
<li>I test the <code>positionFooter()</code> function with static data, and it works fine.</li>
<li>I replaced this search with QuickSearch plugin, and still has the problem.</li>
</ul>

<p>Seems like when I combine the two, it doesn't work anymore, is it because how I call them?
But strange thing is the problem happens only in IE8. Am so confused...</p>
