We use a pretty simple header/body/footer layout:
...
<body>
<div id="container">
<div id="head">[header content goes here]</div>
<div id="body">[content goes here]</div>
<div id="foot">[footer content goes here]</div>
</div>
</body>
...
The css then simply makes sure that the footer is always at the bottom:
html, body {margin:0;padding:0;height:100%;}
#container {min-height:100%;position:relative;}
#body {padding:10px;padding-bottom:2em;zoom:1;}
#head {padding:10px;}
#foot {position:absolute;bottom:0;width:100%;height:1em;}
This works perfectly well... until we add an AnyChart graph to the page, that is. The minute we do that, instead of the footer being at the bottom of the page, there's a blank stripe that's the exact same height as the footer at the bottom of the page, and then the footer is above that blank stripe.
Here's what the problem looks like on a page that uses the "wide" stylesheet, which uses the full width of the browser for the content:
And here's what it looks like on a page that uses the "pretty" stylesheet, which adds a background image and side margins to let said image show through:
I can make the space smaller by setting a negative border-bottom on #container, but I really want to know where it's coming from so I can fix the error instead of treating the symptom.
I'm having trouble making AnyChart cough up version information. I know it's not the latest version: it still uses extensive xml, both for templates and for the chart data, whereas I believe the newest version has moved mostly to JSON (or something like it). In our version, we add links to AnyChart.js and AnyChartHTML5.js, and then do stuff like this to define a graph (classic ASP with VBScript, if anyone cares):
<%
chartData = "<anychart><templates path=""../js/AnyChartTemplates.xml""/>"
chartData = chartData & "<charts><chart template=""relbar"">"
chartData = chartData & "<data><series><point name=""Question 1"" y=""4.5"" />"
chartData = chartData & "<point name=""Question 2"" y=""8.23"" />"
...
chartData = chartData & "</series></data><chart_settings>"
chartData = chartData & "<axes><y_axis><scale maximum=""10"" /></y_axis></axes>"
chartData = chartData & "</chart_settings></chart></charts></anychart>"
%>
<div id="mychart"></div>
<script type="text/javascript" language="javascript">
AnyChart.renderingType = anychart.RenderingType.SVG_PREFERRED;
var chart = new AnyChart("../swf/Chart.swf");
chart.setData('<%=chartData%>');
chart.write("mychart");
</script>
Again, I want to emphasize that the styling works perfectly on every page that doesn't have an AnyChart graph on it, so the problem must lie with something AnyChart does. I know that there are other bugs with this version of AnyChart, e.g. if you have more than one chart on a page, it adds an iframe element which it tries to hide but fails miserably at doing so (as a workaround, our AnyChart css has a line iframe {display:none;}, which'll work as long as we don't want to actually use an iframe in the same page as a chart). I'm hoping someone knows what other superfluous element or styling AnyChart is adding that causes the bottom margin effect, so I can hide it or disable it.
