Images shift when resizing browser window

Weird Problem

[one_mind]

Hi,

I have 2 images on my page and they both look fine. When i minime my browser to 800x600 one of the images acts like it is set with absolute positioning when it is set to relativve.

In other words, it stays in the same spot when it shouldn't.

Here is the css for the images.

img#city
{
position:relative;
top:15px;
}

img#bar
{
position:relative;
top:20px;
}

Please help

Thanks

[one_mind]

Ok, i found something.

When i click minime the picture is still in the wrong spot but the i click refresh and it jumps up into the right spot. Then i maxime and click refresh for the same thing.

Why do i need to refresh to move the image?

[penders]

I wouldn't have thought you would need to [refresh] the page for it to display correctly. What are your img's relative to? Are they inside any other containers (div's) or just in the body?

<See Forum Charter [webmasterworld.com]>

[edited by: tedster at 2:16 am (utc) on July 4, 2006]

[one_mind]

I think i am closing in on it.

I pasted a drop down menu script i got from here: [dynamicdrive.com...]

If i put all my image code above the script it displays fine without the refresh so it must be a script problem. THe only thing now is that all the positioning is wroung. Is it ok to use negative positioning to get the menu in the right place?

Any javascript or css whizzes here want to take a look at the script and see why this is?

Cheers

[kaled]

Avoid large fixed negative positioning values since they might be viewed as hiding text by search engines. Negative values applied by javascript should be ok, but avoid if possible.

If it's just a one or two pixel correction, negative positioning should be ok, but before you get into that, be sure to view the page using at least the three common browsers being IE, Firefox and Opera and be sure you have selected the correct doctype for the page and validated it.

Kaled.

[one_mind]

Thanks, but i really dont see how you can avoid using negative numbers with css positioning.

[penders]

I had a go at installing the dynamic drive drop-down menu script you mention above, with your CSS (relative positioning of the 2 images) you mention in your first post.

It all seems to display ok for me, whether I have the images before or after the menu script and everything is re-positioned ok as I resize the browser (both IE and Firefox).

So, the script in itself seems to be ok(?)

Relative positioning... I would have thought it could be a bit problematic relying on a lot of relative positioning in order to get things displayed correctly in all browsers. In using large relative positioning values you are perhaps altering the natural flow of the page. Which is a bad thing for search engines and document readers etc. Or in your case, the natural flow (the order of things in the HTML file) is already wrong and you are attempting to correct this visually (positioning the menu at the top....)