Chart Rendering Difference in IE/Firefox

drogina

I have a chart with a 1px border on the left and right sides. If I set the width to display correctly in IE, it is incorrect in Firefox (and Chrome is all messed up, too). IE seems to calculate the width including the borders and Firefox calculates it without, meaning that in Firefox, it displays two pixels too short/long. From what I've read, this is a known difference between IE and other browsers, but it's not supposed to happen after IE6 and I'm using IE8 (and Firefox 14, if that's relevant).

Since I cannot set the width by %, I was hoping I could just detect the browser and set the width in the beforeFactory method of the report.

I tried:
var agt = navigator.userAgent.toLowerCase();

if (agt.indexOf("firefox") != -1) {
this.getReportElement("chart").setWidth("509px");
} else if (agt.indexOf("msie") != -1) {
this.getReportElement("chart").setWidth("511px");
}

With this, I get the following error:
ReferenceError: "navigator" is not defined.

I'm not a huge fan of hard-coding the width of the object, so alternative suggestions are welcome as well.

Thanks in advance.

mwilliams

You could always try something like this, in an HTML text box, if you're wanting it to be set to 100%:

<script type="text/JavaScript">
document.getElementById("myChart").style.width = "100%";
</script>

Just be sure to bookmark your chart as "myChart" in the property editor. Then, you wouldn't have hard coded values for the chart. Also, make sure it's sized close to what you want, in the designer, or the client side script will skew the chart image.