Absolute positioning and resolution

[Quarfelburg]

I have made a page with hidden layers over an image containing several pieces of furniture. These layers onmouseover appear and they border each piece of furniture.

I can sticky the page to anyone interested.

When viewed on 1280x960 (resolution I am using) the border is placed correctly. But switching to the popular 1024x768 or 800x600 and everything is out of whack. How do I overcome the resolution problem?

Here is a snippet from one of the divs:

<div id="Stepper" style="position:absolute; width:165px; height:167px; z-index:9; left: 524px; top: 296px" onMouseOver="toggle('item1')" onMouseOut="toggle('item1')"><a href="#"><img src="spacer.gif" width="165" height="167" border="0">

I am quite new to this, so please bear with me =)

[DrDoc]

Absolute positioning in reference to the top left corner should render the same way, no matter the resolution. There must be something else that's wrong.

Any surrounding code maybe?

[SethCall]

Without more details, I would suggest converting everything you can to percentages, rather than pixel values. (or simply have all values pixel.. your layout will break at various resolutions otherwise)