css - HTML page lose formatting on external server -
i have made html page include css aswell 2 simple highcharts (highcharts.com)
i have tested locally on own computer, , happy result, moved server on our internal netwrok, available everyone.
when page loaded server, appears "wrong", can see in following 2 pictures.
(im not allowed post pictures seems)
http://i46.tinypic.com/jaua7o.png
this correct layout.
http://i46.tinypic.com/1zo9dzo.png
this incorrect layout. may able see on incorrect layout, reason letters in menu smaller, , "gigabyte" left of graphs suffering weird weird stuff. in addition this, when graphs loaded on local machine, have sleek animations, doesnt show when loaded external server.
although letters smaller on local computer, clear of formatting works intended, menu "sort of" works, , made css.
any hints cause this? im kinda confused, figured same whether load html local machine, or server.
thanks ton in advance.
the code of particular page (apologise havent commentated it):
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.min.js"></script> <script type="text/javascript" src="http://code.highcharts.com/highcharts.js"></script> <script type="text/javascript"> function getqueryvariable(variable) { var query = window.location.search.substring(1); var vars = query.split("&"); (var = 0; < vars.length; i++) { var pair = vars[i].split("="); if (pair[0] == variable) { return pair[1]; } } return (false); } var kunde = getqueryvariable("area"); function ondownload() { document.location = 'database' + kunde + '.csv'; } $(document).ready(function () { var graph = { colors: [ '#696567', '#525051' ], exporting: { enabled: false }, chart: { renderto: 'container', type: 'column' }, credits: { enabled: false }, title: { text: 'imaginært diskforbrug' }, xaxis: { categories: [] }, yaxis: { min: 0, title: { text: 'gigabyte' }, stacklabels: { enabled: true, style: { fontweight: 'bold', color: (highcharts.theme && highcharts.theme.textcolor) || 'gray' } } }, legend: { align: 'right', x: -100, verticalalign: 'top', y: 20, floating: true, backgroundcolor: (highcharts.theme && highcharts.theme.legendbackgroundcolorsolid) || 'white', bordercolor: '#ccc', borderwidth: 1, shadow: false }, plotoptions: { column: { stacking: 'normal', datalabels: { enabled: true, color: (highcharts.theme && highcharts.theme.datalabelscolor) || 'white' } } }, series: [] }; $.get("mfdisk" + kunde + ".txt", function(data) { var lines = data.split('\n'); $.each(lines, function(lineno, line) { var items = line.split(','); if (lineno == 0) { $.each(items, function(itemno, item) { if (itemno > 0) graph.xaxis.categories.push(item); }) ; } else { var series = { data: [] }; $.each(items, function(itemno, item) { if (itemno == 0) { series.name = item; } else { series.data.push(parsefloat(item)); } }); graph.series.push(series); } }); var chart = new highcharts.chart(graph); }); }); </script> <script type="text/javascript"> $(document).ready(function () { var tapegraph = { colors: [ '#525051' ], exporting: { enabled: false }, chart: { renderto: 'tapecontainer', type: 'column' }, credits: { enabled: false }, title: { text: 'imaginært tapeforbrug' }, xaxis: { categories: [] }, yaxis: { min: 0, title: { text: 'gigabyte' }, stacklabels: { enabled: true, style: { fontweight: 'bold', color: (highcharts.theme && highcharts.theme.textcolor) || 'gray' } } }, legend: { align: 'right', x: -100, verticalalign: 'top', y: 20, floating: true, backgroundcolor: (highcharts.theme && highcharts.theme.legendbackgroundcolorsolid) || 'white', bordercolor: '#ccc', borderwidth: 1, shadow: false }, plotoptions: { column: { stacking: 'normal', datalabels: { enabled: true, color: (highcharts.theme && highcharts.theme.datalabelscolor) || 'white' } } }, series: [] }; $.get("mftape" + kunde + ".txt", function (data) { var lines = data.split('\n'); $.each(lines, function (lineno, line) { var items = line.split(','); if (lineno == 0) { $.each(items, function (itemno, item) { if (itemno > 0) tapegraph.xaxis.categories.push(item); }) ; } else { var series = { data: [] }; $.each(items, function (itemno, item) { if (itemno == 0) { series.name = item; } else { series.data.push(parsefloat(item)); } }); tapegraph.series.push(series); } }); var chart = new highcharts.chart(tapegraph); }); }); </script> </head> <body> <ul class="tabmenu"> <li><a href="csv.html">forside</a></li> <li class="active"><a href="mfstart.html">mainframe</a></li> <li><a href="">aix</a></li> <li><a href="">superdome</a></li> <li><a href="">test</a></li> </ul> <div class="menu"> <a href="mf.html?area=ac">kma</a> <a href="mf.html?area=fac">frysac</a> <a href="mf.html?area=oc">kmo</a> <a href="mf.html?area=foc">frysoc</a> <a href="mf.html?area=bc">kmb</a> <a href="mf.html?area=sap">sap</a> <a href="mf.html?area=eboks">eboks</a> <a href="mf.html?area=fbc">frysbc</a> <a href="mf.html?area=uaz">udv - az</a> <a href="mf.html?area=uoz">udv - oz</a> <a href="mf.html?area=ubz">udv - bz</a> <a href="mf.html?area=tcs">tcs</a> <a href="mf.html?area=coop">coop</a> <a href="mf.html?area=u1">kmd udv1</a> <a href="mf.html?area=u2">kmd udv2</a> <a href="mf.html?area=nem">nemkonto</a> <a href="mf.html?area=systest">systest</a> <a href="mf.html?area=aki">Åki</a> <a href="mf.html?area=ribe">ribe</a> <a href="mf.html?area=eindkomst">e-indkomst</a> <a href="mf.html?area=fyn">fyns amt</a> <a href="mf.html?area=kk">kk</a> <a href="mf.html?area=kc">kc</a> <a href="mf.html?area=fdc">fdc</a> <a href="mf.html?area=atp">atp</a> </div> <div id="container" style="width: 720px; height: 360px; margin: 0 auto"></div> <div id="tapecontainer" style="width: 720px; height: 360px; margin: 0 auto"></div> <div class="downloadlink"> <a href="javascript:ondownload();">klik @ downloade database on kundens forbrug</a> </div> </body>
i know may appear abundant made same code 2 graphs, these different further in project.
after frustration, , time on other projects, came fresh eyes. turned out problem caused fact ie9 automatically opens web pages on our local intranet in compatibility mode, disabled , worked charm!
Comments
Post a Comment