Bizarre CSS problem with "absolute" positioning - Help!

Hello there,

I have created a php webpage that is a three stage process for applying for
something.
The page consists of three <div> sections, each one containing a form.
Each form action is the web page itself again, only with a value sent to
identify the form that was submitted.
My intention was to only ever have one form displayed at a time and I
controlled this by for each <div> section, depending on whether the
particular div section is the current stage the user is at, the php code
selects which class to apply to the div to determine whether the form is
hidden or not.

I hope this makes sense so far as this part all worked as expected. Below is
an example of the CSS used:

..AccountsTableHidden {
visibility: hidden;
left:1em;
top:50em;
position:absolute;
z-index:1;
}
..AccountsTableVisible {
visibility: visible;
left: 1em;
top:1em;
position:absolute;
z-index:10;
}

and below an example of the <div> tag:
<div class="AccountsTable<?php if ( ($currentStage=="stage2")) { echo
"Visible";} else { echo "Hidden";} ?>">

If the a form is one to be displayed, then its containing class is set to
the visible class and the other two forms would therefore get set to the
hidden class.
This all worked well until I tried to changed the positioning to "absolute".
This is because I wanted each div to be displayed in the same place (so they
are overlap each other when displayed, but only one div containing a form is
displayed at a time).

The problem is, when using absolute positing, I get funny effects. For
example, when I get to stage two of the form, and try to select a radio
button on the form I cannot select it. If I move the mouse slightly to the
right, the radio button appears again (displayed twice) and the new one I
can click on. If I refresh the page, the page reloads slightly to the left.

I get similar effects in IE or Firefox, while not exactly the same, it is
strange never the less. In fact in Firefox, I clicked on the submit, then
the whole page kind of redrew itself to the left slightly, then the same
thing happened again, then it finally let me press the submit button.

Does anyone have any insight to what is going on here?

If so, then please let me know.

Thanks in advance.

David Smithz

David Smithz wrote:
> Hello there,
>
> I have created a php webpage that is a three stage process for applying for
> something.
> The page consists of three <div> sections, each one containing a form.
> Each form action is the web page itself again, only with a value sent to
> identify the form that was submitted.
> My intention was to only ever have one form displayed at a time and I
> controlled this by for each <div> section, depending on whether the
> particular div section is the current stage the user is at, the php code
> selects which class to apply to the div to determine whether the form is
> hidden or not.
>
> I hope this makes sense so far as this part all worked as expected. Below is
> an example of the CSS used:
>
> .AccountsTableHidden {
> visibility: hidden;
> left:1em;
> top:50em;
> position:absolute;
> z-index:1;
> }
> .AccountsTableVisible {
> visibility: visible;
> left: 1em;
> top:1em;
> position:absolute;
> z-index:10;
> }
>
> and below an example of the <div> tag:
> <div class="AccountsTable<?php if ( ($currentStage=="stage2")) { echo
> "Visible";} else { echo "Hidden";} ?>">
>
> If the a form is one to be displayed, then its containing class is set to
> the visible class and the other two forms would therefore get set to the
> hidden class.
> This all worked well until I tried to changed the positioning to "absolute".
> This is because I wanted each div to be displayed in the same place (so they
> are overlap each other when displayed, but only one div containing a form is
> displayed at a time).
>
> The problem is, when using absolute positing, I get funny effects. For
> example, when I get to stage two of the form, and try to select a radio
> button on the form I cannot select it. If I move the mouse slightly to the
> right, the radio button appears again (displayed twice) and the new one I
> can click on. If I refresh the page, the page reloads slightly to the left.
>
> I get similar effects in IE or Firefox, while not exactly the same, it is
> strange never the less. In fact in Firefox, I clicked on the submit, then
> the whole page kind of redrew itself to the left slightly, then the same
> thing happened again, then it finally let me press the submit button.
>
> Does anyone have any insight to what is going on here?
>
> If so, then please let me know.
>

Instead of using absolute positioning and altering the visibility, (BTW
visibility: hidden; the element is still "physically" there , just not
visible) use "display: none;" instead. Or I have found not playing with
the display of an element but 'pushing" out of the viewport is less
quirky, for example, "left: -999em;" or "margin-left: -999em;"

--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com

"Jonathan N. Little" <> wrote in message
news:4470ff94$0$3684$.. .
> Instead of using absolute positioning and altering the visibility, (BTW
> visibility: hidden; the element is still "physically" there , just not
> visible) use "display: none;" instead. Or I have found not playing with
> the display of an element but 'pushing" out of the viewport is less
> quirky, for example, "left: -999em;" or "margin-left: -999em;"


Hmmm, looked promising, but still did not work. Still have the same problem.
As soon as I change the positioning to absolute it starts occurring. I did
try the shift to the left off screen thing and the same problem occurs if I
use absolute positioning.

Any other ideas?

David Smithz wrote:
> "Jonathan N. Little" <> wrote in message
> news:4470ff94$0$3684$.. .
>> Instead of using absolute positioning and altering the visibility, (BTW
>> visibility: hidden; the element is still "physically" there , just not
>> visible) use "display: none;" instead. Or I have found not playing with
>> the display of an element but 'pushing" out of the viewport is less
>> quirky, for example, "left: -999em;" or "margin-left: -999em;"
>
>
> Hmmm, looked promising, but still did not work. Still have the same problem.
> As soon as I change the positioning to absolute it starts occurring. I did
> try the shift to the left off screen thing and the same problem occurs if I
> use absolute positioning.
>
> Any other ideas?
>
>

Did you set a width on that DIV?

--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com

"Jonathan N. Little" <> wrote in message
> Did you set a width on that DIV?

No I had not, and on doing so, on my first initial testing (two tests) it
seems to of fixed it!

So thank you.

So what happens then, without a width does it just decide its own width and
this messes things up a bit?

Also, anyone know a good page with a clear description what the differences
between ex, em px etc. ( I know px is pixel but I do not understand the
others and am looking for a page which just neatly describes them).

Thanks again.

David Smithz wrote:
> "Jonathan N. Little" <> wrote in message
>> Did you set a width on that DIV?
>
> No I had not, and on doing so, on my first initial testing (two tests) it
> seems to of fixed it!
>
> So thank you.
>
> So what happens then, without a width does it just decide its own width and
> this messes things up a bit?

If you do not set a width than the div will extent to the edges of the
viewport overlapping your 'visible' div acting link a sheet of glass
over your 'clickable' bits!

>
> Also, anyone know a good page with a clear description what the differences
> between ex, em px etc. ( I know px is pixel but I do not understand the
> others and am looking for a page which just neatly describes them).

Nothing like the source!

http://www.w3.org/TR/CSS21/syndata.html#length-units

--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com