Posted by Jonathan N. Little on 05/22/06 03:06

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

[Back to original message]