Welcome to WebmasterWorld Guest from 54.221.9.209

Forum Moderators: open

Message Too Old, No Replies

Positioning problem in Opera 6

.. going from 'absolute' to default 'static'

     
10:39 pm on May 24, 2002 (gmt 0)

Senior Member

WebmasterWorld Senior Member drdoc is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:Mar 15, 2002
posts:6807
votes: 0


I have a couple of DIVs on a page. Some of them are supposed to be hidden when the page loads. Since they are fairly big, and just so the rest of the page content won't be messed up (if space is reserved for the DIVs) I use the following CSS:

.mydiv {
visibility: hidden;
position: absolute;
top: 0px;
left: 0px;
}

When the user clicks on a link the DIV is supposed to become visible and be included in the normal page flow (it's in the middle of text and stuff) .. so I set visibility to 'visible' and position to 'static'.

In every browser, except Opera, the DIV will appear just as if it never was hidden in the first place. Opera will make the DIV visible, but leave it at the top left corner of the page. Fairly annoying!

So, right now I just hide the DIVs in all other browsers, except Opera, where they are visible all the time.

Can anyone help me with a workaround or change that would make it work in Opera? As a side note - it doesn't matter what I set the position to. I have tried 'relative', 'fixed', and 'inherit' .. No luck. Also, I can't change the top and left values since I never know the exact position ..

11:17 pm on May 24, 2002 (gmt 0)

Full Member

10+ Year Member

joined:Mar 19, 2001
posts:220
votes: 0


I personally have never worked with the visiblity function but a possible work around would be to create another div of the same size and have it cover the existing div until the link is clicked.
12:05 am on May 25, 2002 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Dec 31, 2001
posts:1238
votes: 0


I know you aleady know that "position:absolute" takes your <div> out of the normal page flow (the effect is similar to creating a new "body" element).

What results of changing the "position" to relative, depends on where your code for the <div> is placed withing your document; a relatively positioned element bases its coordinates on the nearest "normal flow" element that precedes it.

This could be the <body> or a heading or any number of normal page flow elements. If there are three "position:absolute" elements preceding the "position:relative" element, and no other "normal page flow" elements, the relative positioning gets its coords based on the body.

If you have a banner image at the top of your page and then three "position:absolute" elements followed by your "position:relative" <div>, the relative coordinates are now based off of the bottom position of the banner image.

Can you post a larger code snippet?

- papabaer

1:40 am on May 25, 2002 (gmt 0)

Senior Member

WebmasterWorld Senior Member drdoc is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:Mar 15, 2002
posts:6807
votes: 0


Yes, I know that 'position:absolute;' takes the element out of normal page flow ..

The other DIVs follow lots of other DIVs and stuff, so it should 'return' to the normal page flow, but it is left at the top of the page.

papabaer, I stickied you the code. Once again, I apologize for the size of the mail ..

7:09 am on May 25, 2002 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Dec 31, 2001
posts:1238
votes: 0


DrDoc,

What's happening is that Opera is not interpreting the javascript by displaying the successive revealed "hidden" divs withing the page flow, i.e., pushing content when revealed and releasing occupied space when "hidden."

The show/hide layer function is working, but instead of displaying the newly revealed content where the javascript does when rendered in IE or Mozilla/NS6.x, Opera takes the assiged CSS coordinates (position:absolute;top:0;left:0;} and displays the successive divs at the top left exactly as you mentioned. The three revealed <divs> are stacked one upon the other and can then be "hidden" by clicking the "hide fields" link.

In this case, Opera is actually following the given CSS declarations by correctly displaying the revealed divs at {top:0; left:0;}.

What is happening is not an issue with CSS but one with Opera, javascript and the DOM.

At first I though the problem might be due to Opera's restricition on "styling" form elements [ [opera.com...] ] but that does not appear to be the case.

7:55 am on May 25, 2002 (gmt 0)

Senior Member

WebmasterWorld Senior Member drdoc is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:Mar 15, 2002
posts:6807
votes: 0


Yes, papabaer, you're right ..
Instead of re-assigning the values to "position: relative; top: 0px; left: 0px;" in relative reference to page content and preceeding elements, Opera displays the DIV relative to its previous absolute position.

I was hoping this was not the case, that I had missed something ..

I will play around with it some more and see if I can find a solution .. If I do, I will post it on here.

As always, thanks for your help.

8:24 am on May 25, 2002 (gmt 0)

Senior Member

WebmasterWorld Senior Member drdoc is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:Mar 15, 2002
posts:6807
votes: 0


Hmm .. Interesting ..

From Opera's web site:
IE5 also has an issue with positioning, as a positioned element should be positioned to the nearest containing positioned element, not the containing element.

From w3:
static
The box is a normal box, laid out according to the normal flow. The 'left' and 'top' properties do not apply.
relative
The box's position is calculated according to the normal flow (this is called the position in normal flow). Then the box is offset relative to its normal position. When a box B is relatively positioned, the position of the following box is calculated as though B were not offset.

8:28 am on May 25, 2002 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Dec 31, 2001
posts:1238
votes: 0


DrDoc, I've been searching through my bookmarks, I seem to recall visiting a site recently (using Opera) that rendered "show/hide" layers as you intend. I'll keep looking..!

- papabaer

8:32 am on May 25, 2002 (gmt 0)

Senior Member

WebmasterWorld Senior Member nick_w is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:Feb 4, 2002
posts:5044
votes: 0


Hi
Just a thought:

Opera sometimes has trouble with properties not expressed in shorthand notation like:
margin: 0 0 0 0;

Could that play any part in this?

Nick

8:48 am on May 25, 2002 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Dec 31, 2001
posts:1238
votes: 0


Hi Nick, Opera actually IS displaying the <div>'s appropriately. It's rendering them as instructed by the CSS declaration: {position:absolute; top:0; left:0;} In DrDoc's test, the hidden <divs> are meant to be revealed through a number of link clicks, with each new div "elbowing" its way into line and forcing the following content downstream.

After the <divs> are once again hidden, the page content is meant to return to its previous position.

I haven't looked at the accompanying javascript yet, but the CSS coords as declared are rendered faithfully.

DrDoc,

IE5 also has an issue with positioning, as a positioned element should be positioned to the nearest containing positioned element, not the containing element.
sent you a Sticky with an example.

relative
The box's position is calculated according to the normal flow (this is called the position in normal flow). Then the box is offset relative to its normal position. When a box B is relatively positioned, the position of the following box is calculated as though B were not offset.
Big heads up here! Take note everyone, understanding this will save some grief!