rgstephens — 2012-09-21T10:46:29-04:00 — #1
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/
paulob — 2012-09-21T12:07:41-04:00 — #2
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.
To confine the absolute element to the #content div do this:.
rgstephens — 2012-09-21T13:15:16-04:00 — #3
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