Wild Internet Explorer 6 CSS Bug – Fixed!
For the last day or so I've been battling a nasty bug in Internet Explorer 6 (IE 6) when refreshing my Google Visualization widget with a simple Javascript timer. The problem was that for each refresh, the enclosing HTML table would expand horizontally. No joke. For each update/refresh of the widget, it seemed to "push" the div wider, and after a few minutes, it was twice the size of the initial graph.
Makes no bloody sense. But then again, it's IE 6 and I've read enough to know that I should expect a few of these, and to try and roll with the punches and see if I can't get something working.
The original HTML for the AnnotatedTimeLine wigdet was:
<tr>
<td>
<div id="chart_div" style="align: center; width: 600px;
height: 450px;"></div>
</td>
</tr>
and when I finally found this article, I realized that it was as easy as adding the overflow: hidden; attribute to the CSS for the div. The result being:
<tr>
<td>
<div id="chart_div" style="align: center; width: 600px;
height: 450px; overflow: hidden;"></div>
</td>
</tr>
With this, my updates of the Google AnnotatedTimeLine don't expand on IE 6, and it doesn't mess up the rendering on Firefox 3, either. Nice thing to know.