Controls relative-positioned in Visual Studio 2008 gets misplaced in browsers

Question

Hi all!

I'm developing an aspx page using Visual Studio 2008 where I have a png image of a map of my country and many other png images, one for each state of my country. I'm trying to place these other images (little dots) over the image of the map using relative positioning. But I place the controls in design time at the position I want (under menu Format -> Position...) and when I open the page in any browser, I get a totally different position of those controls.

To illustrate what I'm explaining, I'll include 2 pics, one of my page in design time and other one opened in IE:

(Ops! When I was posting the question I discovered that new users can't post image tags, so I'll try to post just the links, sorry)

at design-time in VS

at runtime in IE

Does anybody know why is this happening and how to fix/deal with it?

Thanks a lot in advance.

Greetings, R.

Answer 1

Have you tried setting the width and height on the parent / containing element (presumably the map)?

I've had some problems with absolute and relatively positioned elements in IE before and giving the containing parent element a width and / or height seemed to fix it.

Answer 2

After some days fighting with VS, I finally discovered a way to set the position in design-time and have the same position at runtime: I had to put every image inside a div element and have this div positioned where I wanted.

I don't know why, but this way I have the very same position when I open the aspx page in the browser. A little more work to do, wrapping all images inside a div, but I could only have success this way.