Top left borders appearing round Bar Chart in IE7 using Google Visualization API

Hi,

I am having some problems with IE and googles Visualization Api. Basically an extra border (single pixel white line) is been added to the top and the left of the my chart, but only in IE. A full border is also been applied to a any labels in the graph which are truncated (cut off off slightly).

A screenshot can be seen here: http://www.screencast.com/users/Second2/folders/Jing/media/2de9ad36-efce-40ab-b3d0-a14e00460b49

HINT (the top and left white lines should not be there, and the border around the label "Expe..."

The Page Code:

<html>
  <head>
    <script type="text/javascript" src="http://www.google.com/jsapi"&gt;&lt;/script&gt;
    <script type="text/javascript">
      google.load("visualization", "1", {packages:["corechart"]});
      google.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = new google.visualization.DataTable();
        data.addColumn('string', 'Year');
        data.addColumn('number', 'Sales');
        data.addColumn('number', 'Expenses');
        data.addRows(4);
        data.setValue(0, 0, '2004');
        data.setValue(0, 1, 1000);
        data.setValue(0, 2, 400);
        data.setValue(1, 0, '2005');
        data.setValue(1, 1, 1170);
        data.setValue(1, 2, 460);
        data.setValue(2, 0, '2006');
        data.setValue(2, 1, 660);
        data.setValue(2, 2, 1120);
        data.setValue(3, 0, '2007');
        data.setValue(3, 1, 1030);
        data.setValue(3, 2, 540);

        var chart = new google.visualization.BarChart(document.getElementById('chart_div'));
        chart.draw(data, {width: 400, height: 240, title: 'Company Performance', backgroundColor: '#CCCCCC',
                          vAxis: {title: 'Year', titleTextStyle: {color: 'red'}}
                         });
      }
    </script>
    <style type="text/css">
    iframe {
        border: none;
    }
    </style>
  </head>

  <body style="background-color: #CCCCCC;">
    <div id="chart_div"></div>
  </body>
</html>
enter code here

Any one got any ideas what might be causing these extra white lines?

Cheers in advance for any help anyone can provide!

ansaurus

tags:

views:

answers:

Top left borders appearing round Bar Chart in IE7 using Google Visualization API

related questions