IE8 and IE7 yaxis label and gridlines align issue

[jaxie]

Hi!

I have poblems rendering a chart completetly correctly, the y-axis labels are not aligned correctly with the data displayed in the chart.
I have provided a jsFiddle to show my problem.
http://jsfiddle.net/Hfrsn/8/

The problem i hope is just something with how i configured the options. Any help would be greatly appriciated!

The problem only appears in Internet Explorer 7 & 8

EDIT: sorry should be the y-axis labels and grid lines

EDIT: solved it manually by using some jquery hacking ..

Code: Select all

var browserVersion = navigator.appVersion;
if((browserVersion.indexOf("MSIE 7") != -1)
|| (browserVersion.indexOf("MSIE 8") != -1) )
 {
var xaxisHolder = $("#statisticsChartHolder .highcharts-container:first div:first .highcharts-axis").eq(1);
var xaxisGridHolder = $("#statisticsChartHolder .highcharts-container:first div:first .highcharts-grid").eq(1);
var xlbl1 = parseFloat(xaxisHolder.find("span").eq(0).css('top').replace('px', ''));
var xlbl2 = parseFloat(xaxisHolder.find("span").eq(1).css('top').replace('px',''));
var rowWidth = xlbl1 - xlbl2;
var adjustGridLine = Math.ceil(rowWidth / 2);
xaxisHolder.css("top","-14px");
xaxisGridHolder.css("top", adjustGridLine +"px");
console.log("chart adjusted for ie8 & ie7");
}

Though the gridlines seems to be missaligned for all browsers.. not insync with alternate rowcolor..
would still appriciate if someone could identify what's causing this..