Page css doesnt refresh within javascript function - css

Question

my first question here so be gentle :).
I have this issue with changing css of elements and their refresh. I am createing a webforms application with ajax requests. My problem is that when somone chooses a report from a tree view it should display a gif with loading sign and after data is recieved it should display it. Its working fine on firefox and opera but not on ie, chore or safari. Here is the code:
This the method that is launched when someone clicks a tree node
this.hideElements();
var id = node.getId().substr(2);
var client = new CAjaxClient();
var data;
client.addParameter(new CKeyValuePair('ReportID', id));
client.postCallBack('/ajaxpages/Reports.aspx', 'GetReportFilters', this.dataRecieved);
filterGenerator.setReportID(id);
This the method hideElements()
$('#FiltersContainer').css('visibility', 'hidden');
$('#ActionsContainer').css('visibility', 'hidden');
$('#loadingDiv').css('visibility', 'visible');
$("input[id$='Date']").parent().css('visibility', 'hidden');
This the ajax postBack method
if (this.readyState == 4 && this.status == 200) {
$('#FiltersContainer').css('visibility', 'visible');
$('#ActionsContainer').css('visibility', 'visible');
$('#loadingDiv').css('visibility', 'hidden');
var data = eval(this.responseText);
filterGenerator.processFiltersData(data);
Data and everything is returned in order its just that in the request time the browser is like frozen and when the data returns css state is of that at the end of the whole process. Loading div is never shown. I tried also forcing redraw with domelement.style changing but no effect. When I execute the code in chrome debugger line by line everything goes perfectly. Please help if you can.
Html code(vio:TreeView is our own ASP control):
<div id="pageHeader" style="display:inline-block">
<div id="headerImageDiv" style="float:left; margin-left:15px; margin-top:5px;">
<img src="style/default/printerLarge.png" alt="" />
</div>
<div id="pageTitleDiv" style="float:left">
<span style="display:block; margin-top:20px;margin-left:10px;color:#78b4bb; font-size:20px;">Reports And Analyses</span>
<span style="display:block; margin-top:20px;margin-left:10px;font-size:18px;">Select a report</span>
</div>
</div>
<br />
<div id="mainPane" style="display:inline-block;width:100%;">
<div id="readerTreeContainer" style="float:left;border-top-style:solid;border-left-style:solid;border-bottom-style:solid;border-right:none; border-width:1px; overflow : auto;width:300px;height:auto; background-color:white;">
<vio:TreeView ID="TreeView" runat="server"
Width="298" Height="500"
ActionListener="ReportsGeneralListener"
ActionListenerScript="ReportsGeneralTree.js"
GlobalTreeviewName="reportsTreeview">
</vio:TreeView>
</div>
<div id="FiltersContainer" style="position:relative;visibility:hidden;float:left;border-top-style:solid;border-right-style:solid;border-bottom-style:solid;border-left:solid 1px; border-width:2px; overflow : auto;width:30%;height:500px; background-color:#dbdae4;">
<div id="filterColumnOne" style="float:left;width:50%;height:100%;border-right:solid 1px;border-left:none;">
</div>
<div id="filterColumnTwo" style="float:left;width:49%;height:100%;">
</div>
<div id="loadingDiv" style="z-index:10;position:absolute;top:50%;left:50%;margin: -35% 0 0 -35%;z-index:100001;height:316px;width:396px;">
<div style="position:relative;display:block">
<img src="style/default/loading.gif" alt="" style="position:absolute;left:0px;top:0px;z-index:-1;"/>
<span style="display:block;text-align:center;padding-top:80px;font-size:25px;font-weight:bold;">Loading Report</span>
</div>
</div>
</div>
<div id="ActionsContainer" style="visibility:hidden;float:left;border-left-style:none;border-top-style:solid;border-right-style:solid;border-bottom-style:solid;border-width:2px; overflow : auto;width:200px;height:200px; background-color:#abe9e7;">
<div style="display:block;border-bottom:solid 1px;height:50%">
<div style="position:relative; height:100%;">
<div style="position:absolute;top:50%;left:50%; height:72px;margin: -35px 0 0 -35%;">
<img src="style/default/document.png" alt="" style="float:left;margin-right:10px;"/>
<button type="button" style="margin-top:18%;height:30px;" onclick="print();">Print</button>
</div>
</div>
</div>
<div style="display:block;border:none;height:49%;">
<div style="position:relative; height:100%;">
<div style="position:absolute;top:50%;left:50%; height:72px;margin: -35px 0 0 -35%;">
<img src="style/default/application_pdf.png" alt="" style="float:left;margin-right:10px;height:72px;"/>
<button type="button" style="margin-top:18%;height:30px;">PDF</button>
</div>
</div>
</div>
</div>
</div>

Answer 1

Try .hide and .show instead. They work cross-browser.
See the jQuery API
I think your problem was:
<div stuff I'm hiding>
<div loading screen>
See here for a working demo of what you provided. I removed the inline visibility:hidden from the styles (I'd suggest you split into a CSS file, it's making it unreadable) and took the loading div from inside the div you were hiding.