Absolute Positioning - changing location in different browsers

[braves07]

Hi, I am trying to position a logo centered and on top of #checkered and #footer. I have 2 div's at the bottom.

#checkered {height: 35px} #footer {height: 50px}

My entire site is inside a container.

#container {
width: 780px;
height: auto;
margin: 0px auto;
background-color: #C1C394;
color: #000000;
border: #000000 1px solid;
overflow: hidden;
}

Here is the code for the absolute positioned logo:

.logo {
position: absolute; bottom: 15px; right: 350px;
}

<img class="logo" alt="Logo" "img src="logo.png" width="300" height="118" />

The problem I'm having is the object is moving around depending on how you view it. If the window isn't maximized it moves to a different spot. If I have different toolbars open it moves. Basically any change in the document window size and the position doesn't stay where i want it. If I grab the window and drag it in so the page is very thin.. the image stays cenetered in the window... instead of the #container Is there a way to fix this?

Thanks,

braves07

 

[Vragabond]

Absolutely positioned elements will position according to their first positioned (absolutely or relatively) parent element, that is, in its top left corner unless specified otherwise. When no positioned parent exists, they are positioned according to the viewport -- the browser window. It seems as if this is the case in your code.

___________________________________________________________
[small]Do something about world cancer today: PACT[/small]

 

[BabyJeffy]

And let me follow up with a mention on Doctypes. You will no doubt experience different behaviour depending on the doctype (lack of).

Cheers,
Jeff


[tt]Jeff's Page [!]@[/!] Code Couch

http://www.codecouch.com/jeff/blog/

http://www.coedit.co.uk/

[/tt]

Make sure your web page and css validates properly against the doctype you have chosen - before you attempt to debug a problem!

FAQ216-6094