Compatibility problem with Safari and Chrome

[RGStephens]

I have a single page landing site that is mostly a JPG image that will eventually use HOT SPOTS to link to other websites. The only real content on the page is a Bio which I have placed in a scrolling area and positioned on the image as "Absolute". Unfortunately the scrolling part is mis-positioned in Chrome but looks fine in IE8 and Safari. If it were strictly an IE8 issue I could force it to be in the right place but because it is only misplaced in Chrome, I do not know how to fix it. I suspect it is a CSS issue of some sort but at this point I am baffled. Can someone advise as to what I should do to correct the issue, please? Thanks

The link is: http://rgstest.com/nrev/

Rick

[Paul O'B]

Hi,

The scroller is misplaced in all browsers and it just depends how far the window is open as to where it will appear

You need to create a stacking context for the absolute element by applying position:relative to the parent #content. That will allow the absolute element to be placed in relation to #content and not the viewport. Absolute elements are placed in relation to the nearest ancestor that has a positioned defined (other than static), if none such element exists then the absolute element is placed in relation to the viewport.

e.g.
To confine the absolute element to the #content div do this:.

#content{position:relative}
#scroller{left:510px}

[RGStephens]

Thanks Paul,

Of course that fixed the problem. You and the other folks on this forum are so good - I only hope that one day when I grow up I can be half as good.

Thanks again - Rick