Question

I have a script that loads google charts api information into a div. The div has a fixed height and a scroll property. However, when the table from google loads, it overflows the div (see image below). This is on IE 8 in compatibility mode, and the css is as follows:

div.dashwrapper .no_overflow{overflow-x: hidden; overflow-y: scroll; height: 300px;}

Here is what it looks like in IE8 (Blue outline is from developer tools, it outlines the height of the div though)

And this is what it looks like in Firefox (how it should look)

Here is the HTML/Javascript for it:

<script>
var table = new google.visualization.Table(document.getElementById('chain_info_this_year'));
    table.draw(data , {showRowNumber: true});

    data = new google.visualization.DataTable();
    data.addColumn('string', 'Store Name');
    data.addColumn('string', 'Chain');
    data.addColumn('number', 'Intakes <?php echo date("F");?>');
    data.addColumn('number', 'Ships <?php echo date("F");?>');
    data.addColumn('number', 'Intakes <?php echo date("Y");?>');
    data.addColumn('number', 'Ships <?php echo date("Y");?>');
    data.addRows([
                <?php 
                for ($i = 0; $i < count($store_info); $i++)
                {
                    
                    if ($i <count($store_info) - 1)
                        echo "['" . str_replace("'", '',$store_info[$i]['chain']) . "', '" . str_replace("'", '', $store_info[$i]['store']). "', "  . $store_info[$i]['intakes_this_month'] . "," 
                            . $store_info[$i]['ships_this_month'] . "," . $store_info[$i]['intakes_this_year'] . "," . $store_info[$i]['ships_this_year'] . "],";   
                    else 
                        echo "['" . str_replace("'", '',$store_info[$i]['chain']) . "', '" . str_replace("'", '', $store_info[$i]['store']). "', "  . $store_info[$i]['intakes_this_month'] . "," 
                                . $store_info[$i]['ships_this_month'] . "," . $store_info[$i]['intakes_this_year'] . "," . $store_info[$i]['ships_this_year'] . "]";
                }
                ?>
                ]);
            var table = new google.visualization.Table(document.getElementById('store_info'));
    table.draw(data , {showRowNumber: true});

    </script>
    <div class='dash_row no_overflow'>
    <div class='dash_mod full_width'>
        <div class='title'>Store Information <span class='small_text space_left'><a style='cursor: pointer' onclick = "expand();">Show All</a></span></div>
        <div class='mod_content'><span id='store_info'></span></div>
    </div>
</div>

There is more html, but this is relevant stuff. The dash_row div is inside dashwrapper though, just to clarify.

UPDATE: JSFiddle link: http://jsfiddle.net/qKzLf/

Answer 1

The only solution I found to this was to use JQuery to reset the css height property after the content loads. This is because, apparently, IE 8 in compatibility mode renders the css, then ignores it with dynamic content.