homepage Welcome to WebmasterWorld Guest from 54.196.62.132
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Visit PubCon.com
Home / Forums Index / Browsers / Opera Browser Usage and Support
Forum Library, Charter, Moderator: open

Opera Browser Usage and Support Forum

    
Positioning problem in Opera 6
.. going from 'absolute' to default 'static'
DrDoc




msg:1586481
 10:39 pm on May 24, 2002 (gmt 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 ..

 

mdharrold




msg:1586482
 11:17 pm on May 24, 2002 (gmt 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.

papabaer




msg:1586483
 12:05 am on May 25, 2002 (gmt 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

DrDoc




msg:1586484
 1:40 am on May 25, 2002 (gmt 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 ..

papabaer




msg:1586485
 7:09 am on May 25, 2002 (gmt 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.

DrDoc




msg:1586486
 7:55 am on May 25, 2002 (gmt 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.

DrDoc




msg:1586487
 8:24 am on May 25, 2002 (gmt 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.

papabaer




msg:1586488
 8:28 am on May 25, 2002 (gmt 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

Nick_W




msg:1586489
 8:32 am on May 25, 2002 (gmt 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

papabaer




msg:1586490
 8:48 am on May 25, 2002 (gmt 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!

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Browsers / Opera Browser Usage and Support
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved