Search code examples
google-chromehtmlsafaripositioningmozilla

absolute DIV positioning with mozilla V.S. safari V.S. Chrome V.S. IE

I'm having trouble with the browser compatible div positioning. I'm doing an image map with buttons on top of it in separate div's. These div's tend to move around in firefox, in safari and chrome everything is okay.

They tend to move down a bit.

Changing the doctype seems to influence the rendering in firefox. But none of the doctype's seem to work.

Check the Algiers button on this link in firefox and you'll see what I mean.

http://kareldc.com/grimonprez/index_js_animatie_clicks.html

Any help = very much appreciated!

Solution

  • The <body> element is still using the browser's default margin and padding values (8px), which may account for the gap you're seeing.

    Another thing to note is that while your images have explicit heights, the <div>s surrounding them are actually taller than those images.

    For instance, the image you reference is 37px tall. It's surrounded by the #button_8_algiers div.

    • In Firefox, that element is 43px high, which is 6 pixels taller than the image -- the exact number of pixel whitespace you have.
    • In chrome, the element is 41px high, which is 4 pixels taller than the image. Chrome is rendering it OK for some reason, though.