Forum Moderators: open
.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 ..
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
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 ..
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.
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.
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
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
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.
relativeBig heads up here! Take note everyone, understanding this will save some grief!
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.
