XHTML strict: positioning of div/img does not work as intended

Question

after several days of researching and trying I want to see if you can help me. I have a graph (coord) and students should mark the extrema of the graph. I have to use JavaScript for this and work in XHTML 1.0 Strict//EN. The idea was that the student clicks on the position on the graph where he/she thinks an extremum lies, this triggers a JavaScript function (addPoint) which adds an img into the same div in which the graph lies (coordDiv) and gives it the position where the student clicked. For an example visit http://ourresidence.net/JavaScript/ where you should be able to view both the site code and the JavaScript code.

As far as I understood, the positioning has to be absolute. static and fixed are incompatible with the desired behaviour and relative would be very difficult because 1. I don't know where the next "ordinary" positioning would be and 2. it would get more complicated with a student deleting a point. So, absolute it is.

Then the positioning should be absolute relative to the div coordDiv and after some time I even figured out how to give the div a concrete dimension (through it's a bit static, the approach with adjustCoordDiv() in klausur.js hasn't work out). However, if I resize the bounderies of the browser, the div and the graph wanders (since they are centered) but the point does not. That needs to be fixed.

And reading how mixed up the acknowledgement of zooming is in different browsers by now I've already completely given up handling zooming in the exercise, but if you come with a solution for that too, my praise would know no end.

Answer 1

Positioning is relative to some containing element in HTML that is positioned itself. If there isn't any such element, positioning is relative to document's body (as in your case). Positioning basically means to have applied some other position in CSS than static.

So you basically need to subordinate your click points to the DIV containing the whole coordinate system (as you do now ). That div should have

position:relative

without any repositioning to position it and to start a new "local coordinate system" for using

position:absolute

on any subordinated element.

On clicking, coordinates of that click need to be converted from global coordinate space to local one. This might be achieved iterating from clicked element to document element using properties offsetParent, offsetTop and offsetLeft of each passed element.