I've encountered an issue with center-aligning a canvas and overlapping image on different browsers. While Chrome and Firefox display it correctly, Internet Explorer does not cooperate. The canvas is not centered, but the image is. I've tried various methods to center both elements horizontally, but nothing seems to work.
For displaying interactive RRD Graphs, I'm utilizing this library which relies on the qooxdoo framework. The canvas in question is generated by this library. Could this be causing the alignment issue? (FYI: the canvas is created in the rrdGraphPng.js file within the __addCanvas() method)
My ultimate goal is to overlap the canvas and image while centering them horizontally.
Here's the HTML structure post JavaScript manipulation:
<div id="graph-content">
<div id="ctrl">
<div>
<canvas draggable="false" unselectable="true" width="700" height="330"></canvas>
<img id="img" data-src-template=".." data-qx-class="rrdGraphPng" unselectable="true" draggable="false" src=".." />
</div>
<div>
</div>
This is the CSS styling applied:
div{
display: block;
}
#ctrl{
height: 100%;
width: 100%;
text-align: center;
}
#img {
width: 700px;
height: 330px;
padding: 0;
margin: auto;
}
canvas {
width: 700px;
height: 330px;
position: absolute;
cursor: url(http://../rrdtoolgraph/RrdGraphJS/public//MoveCursor.cur), move;
}
The browser renders it as follows:
div {
display: block;
}
#ctrl {
height: 100%;
width: 100%;
text-align: center;
}
/* Canvas */
element.style {
position: absolute;
cursor: url(http://../rrdtoolgraph/RrdGraphJS/public//MoveCursor.cur), move;
width: 700px;
height: 330px;
}
/* -webkit-user-drag attribute omitted in Firefox and IE11 */
canvas[Attributes Style] {
-webkit-user-drag: none;
}
/* Image */
element.style {
height: 330px;
width: 700px;
display: inline-block;
}
#img {
width: 700px;
height: 330px;
padding: 0;
margin: auto;
}
/* -webkit-user-drag attribute omitted in Firefox and IE11 */
img[Attributes Style] {
-webkit-user-drag: none;
}
Unfortunately, due to resource access restrictions, the jsfiddle demo may not run correctly as it requires external resources.