Opera issues: absolute DIV inside relative DIV

works in 8.x - 9.x gets it wrong

[amznVibe]

I am getting widely ranging bad behavior on Opera 9.x where Opera 8.x is much closer to IE 6/7 and Firefox 1/2

Any known hacks/tricks to this that I can't seem to find via Google?

Already two hours into this issue, it's driving me batty for those less than 10% users but i bet Safari is affected as well...

(this is for an info popup DIV on a mouseover)

[edited by: amznVibe at 1:48 pm (utc) on Mar. 8, 2007]

[Robin_reala]

No known Opera9 hacks that I know of, but usually it's pretty good. Can you post some sample code for us to look at?

[amznVibe]

I figured out what the problem is exactly after more wasted hours but I cannot find a solution for it.

Apparently Opera gets very confused if you have nested parents that are all position relative. When you set a child to absolute to try to base it on the immediate parent, it doesn't. Instead it likes to go another parent higher or the base parent.

IE and Firefox do it correctly though.

rough example

<span id=footer style="position:relative">
<span id=infotext style="position:relative">
<div id=popup style="position:absolute">
popup text here
</div>
</span>
</span>

IE and Firefox will set infotext's base location to infotext
Opera likes to chose footer.

Adding left and right floats to the matter complicates things even worse.

Argh. About to say to heck with opera folks.

[amznVibe]

Found a way to fix it, though it's ugly IMHO.

Wrap another (3rd) span around the final absolute positioned DIV, and make that span absolute. It's parent has to be relative.

Works in all - IE 6/7 Firefox 1/2 and Opera 8/9

Nasty, especially since I have to repeat the code block several times on a page but that's css/html for yah.

[SuzyUK]

amznVibe, I'm not sure I follow here, the biggest problem I can see is that you have a div (block level element) nested inside spans which are inline elements so the block's position is naturally going to want to be a new line and left?

what happens if you change the absolute element into a span too?

I tried a test and Opera worked just fine in either case wrongly nested or not *if* co-ordinates were set for AP element.. if no co-ordinates were set IE, FF and Opera all produced different results especially when the elements were wrongly nested

<div>here is a block with a
<span>relative span and
<span>nested relative span
<em>AP block</em>
</span>
</span>
inside it</div>

CSS:
div {background: #eee; margin: 0;}
div span {position: relative; left: 20px; top: 20px; background: #ff0;}
div span span {background: #0f0;}
div em, div div {position: absolute; left: 0; top: 20px; background: #cfc;}

That code as is, shows correct positioning in all browsers tested including Opera..
but try changing the <em> to a <div> and then try both ways without any co-ordinates, comment out the bit in red

Suzy

[edited by: SuzyUK at 6:35 pm (utc) on Mar. 8, 2007]