IE "box model" - MousePosition with Border

[euzuro]

As reported on the users list by cr5 and Gerd D.:

>
>       Problem with "var pointLayer = new OpenLayers.Layer.Vector("Point
> Layer");" and similar (Line and Polygon): All draw controls seem to draw
> points and vertices south-east of where the mouse-click occurred by about
> 1/2 of the diameter of the drawn Point-Circle. That means all drawn features
> are miss-placed. Is this a bug or is it just that I do use the draw feature
> wrongly? Source attached below. The website is at this stage not public for
> administrative reasons; sorry.

Internet Explorer has problems with its 'box model': the 3px border
you're putting on your map is causing the browser to incorrectly report
your mouse position relative to the map. If you remove that border, this
will be fixed: you can instead create a slightly more complicated map
setup, with the map div inside another div which does have a border,
rather than putting it directly on a map.

The function to look into is OpenLayers.Events.getMousePosition().

[euzuro]

More info from Matt H.:

For what it's worth, I've encountered a similar issue using Firefox
under
certain specific situations.  For example, again modifying the
editingtoolbar.html example, try this:

    <table style="position:absolute; margin:20px"><tr><td> <div
id="map"></div> </td></tr></table>

In this case getMousePosition() appears not to properly translate
from client
coordinates to map-local coordinates, with an offset equal to the
20px margin.
The problem goes away if you use padding instead of margin, if you
make the
table non-absolute, if you use a div instead of a table, or if you
use WebKit
instead of Firefox.  So this was easy enough for me to work around on
my own,
but I thought if anybody starts looking at adding workarounds to
getMousePosition()
they might want to know about it.

[pgiraud]

Several notes about that bug report :

1 - I'm not OK with the answer by chris about the IE box model. In fact, if people gives the "map" div element a 10px border, vector elements will not be added when the user clicked both in IE and FF (possibly other browser too). We can't blame IE this time. The parent div element with border is a good solution though.

2 - Event if we don't set a border to the "map" div, features are drawn in IE with a 2,2 offset in almost all cases (part of the "1/2 of the diameter" effect). In fact, the OpenLayers.Events.getMousePosition() doesn't take it into account. I spent my work day to look for ressources about this problem on the internet and to find a workaround for this. I now have an explanation and a patch for that.

I'm filling a new bug report for the second part. Please consider closing this bug as "invalid" when it's done.

[pgiraud]

New opened ticket is at  http://trac.openlayers.org/ticket/863

[crschmidt]

Okay, this is old and confused at this point. I'm going to open a new ticket with the etails of the CSS misbehaviors I'm aware of that are IE specific.