471,066 Members | 983 Online
Bytes | Software Development & Data Engineering Community
Post +

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 471,066 software developers and data experts.

Opera relative and absolute positioning

Hi all,
I've met a problem with Opera and its ability to render absolutely
positioned divs inside relatively positioned parent blocks, themselves
contained inside a relatively positioned block.
I'm surely missing something, but what? Any help would be kindly
appreciated :)

Here's a code sample:

..grandparent{position:relative;}
..parent{position:relative;}
..parent .sub{
position:absolute;
top:19px;
left:0px;
display:none;
z-index:1;
}

<div class="grandparent">
<div class="parent">
<div class="sub">text</div>
</div>
</div>

The display:none property is modified to display:block on a click
event happening somewhere else. Hence the hidden div appears as a
submenu, whose position depends on the parent block.

Any clue on why Opera cannot position this child block correctly? Or
is there anything wrong with my way of doing it? In fact, the .sub
divs seem to be positioned relative to the .grandparent div, not their
respective .parent divs.

Thanks for the anwser
Jul 20 '05 #1
4 8604
Els
louissan wrote:
.grandparent{position:relative;}
.parent{position:relative;}
.parent .sub{
position:absolute;
top:19px;
left:0px;
display:none;
z-index:1;
}

<div class="grandparent">
<div class="parent">
<div class="sub">text</div>
</div>
</div>

Any clue on why Opera cannot position this child block correctly? Or
is there anything wrong with my way of doing it? In fact, the .sub
divs seem to be positioned relative to the .grandparent div, not their
respective .parent divs.


As to _why_ I don't really know, but I used to have the same
problem. I decided to take away the position:relative of the
..parent, and have the .sub positioned absolute, relative to
the .grandparent, in all browsers.

--
Els
http://locusmeus.com/
Sonhos vem. Sonhos vo. O resto imperfeito.
- Renato Russo -

Jul 20 '05 #2
In article louissan wrote:
Hi all,
I've met a problem with Opera and its ability to render absolutely
positioned divs inside relatively positioned parent blocks, themselves
contained inside a relatively positioned block.
I'm surely missing something, but what? Any help would be kindly
appreciated :)

Here's a code sample:
URL would be better, as your code does nothing useful to demonstrate your
problem.
The display:none property is modified to display:block on a click
event happening somewhere else. Hence the hidden div appears as a
submenu, whose position depends on the parent block.
OK. So I changed it, and still unable to see any difference.
Any clue on why Opera cannot position this child block correctly?
What version of Opera? I don't know if any version of opera since 4 is
buggy in this.
Or is there anything wrong with my way of doing it? In fact, the .sub
divs seem to be positioned relative to the .grandparent div, not their
respective .parent divs.


With your code, there is no difference, as grandparent and parent are
identical. If I ad something before parent, it is apparent that
positioning works correctly.

--
Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>
I'm looking for work | Etsin tyt
Jul 20 '05 #3
lo******@caramail.com (louissan) wrote:
I've met a problem with Opera and its ability to render absolutely
positioned divs inside relatively positioned parent blocks, themselves
contained inside a relatively positioned block.

.grandparent{position:relative;}
.parent{position:relative;}
.parent .sub{
position:absolute;
top:19px;
left:0px;
display:none;
z-index:1;
}

<div class="grandparent">
<div class="parent">
<div class="sub">text</div>
</div>
</div>

The display:none property is modified to display:block on a click
event happening somewhere else. Hence the hidden div appears as a
submenu, whose position depends on the parent block.
Then there wasn't much point in including it in the example was there?
Any clue on why Opera cannot position this child block correctly? Or
is there anything wrong with my way of doing it? In fact, the .sub
divs seem to be positioned relative to the .grandparent div, not their
respective .parent divs.


The above example renders the same in Opera 7.23 and IE6, in both
Quirks and Standards modes.

Do you by any chance have a float on .parent? That will make a
difference. Opera doesn't allow an element to be both positioned and
floated and will apply the float but ignore the position.

This is probably an error - the CSS specs say that float does not
apply to absolutely positioned elements, but doesn't, as far as I can
see, say anything about the interaction of float and relative
position.

Steve

--
"My theories appal you, my heresies outrage you,
I never answer letters and you don't like my tie." - The Doctor

Steve Pugh <st***@pugh.net> <http://steve.pugh.net/>
Jul 20 '05 #4
Thanks :)

It just so happens that i had a float on .parent ... but indirectly.

I had a .grandparent *{float:left} declared somwhere up in the stylesheet.

Thank you again, Steve.

Steve Pugh <st***@pugh.net> wrote in message news:<9b********************************@4ax.com>. ..
Do you by any chance have a float on .parent? That will make a
difference. Opera doesn't allow an element to be both positioned and
floated and will apply the float but ignore the position.

Jul 20 '05 #5

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

14 posts views Thread by Harlan Messinger | last post: by
24 posts views Thread by Wim Roffal | last post: by
1 post views Thread by Fred Nelson | last post: by
6 posts views Thread by Mark | last post: by
14 posts views Thread by Fistro | last post: by
reply views Thread by leo001 | last post: by

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.