div not visible in IE8

Question

I am trying to show a div using the css display property.

The contents of #divbar and #divline are set dynamically using AJAX.

This code works perfectly in Firefox and Chrome, but in IE 8 I'm unable to see the content of #divbar even though the toggle button works perfectly.

HTML :

<div id="divline" style="float:left;">
    <div id="jqChart2" class="charts"></div>
</div>

<div id="divbar" style="float:left">
    <div id="jqChartb2" class="charts"></div>
</div>

jQuery :

$("#toggle_button1").click(function(){
    $("#toggle_button1").css({'display':'none'});
    $("#toggle_button2").css({'display':'block'});
    $("#divline").css({'display':'block'});
    $("#divbar").css({'display':'none'});
});

$("#toggle_button2").click(function(){
    $("#toggle_button2").css({'display':'none'});
    $("#toggle_button1").css({'display':'block'});
    $("#divline").css({'display':'none'});
    $("#divbar").css({'display':'block'});
});

CSS :

#toggle_button1{
    display:block;
    width:100px;
}
#toggle_button2{
    display:none;
    width:100px;
}
#divline{
    display:block;
}
#divbar{
    display:none;
}

Any suggestions?

Answer 1

I think in following code:

<div id="divbar" style="float:left">
<div id="jqChartb2" class="charts" >      </div>
</div>

problem is related with

<div id="jqChartb2" class="charts" >      </div>

Please try another content instead of it For example :

<div id="divbar" style="float:left">
Test
</div>

Answer 2

Check you have Enable JavaScript on IE8??

try below way in your ie8 browser

Click ‘Tools’ on the menu bar’
Select ‘Internet Options’
Click the ‘Security’ tab
Click the ‘Custom Level’ button
Scroll to the ‘Scripting’ section 
Select ‘Enable’ to enable whichever JavaScript activities you want to work.