Link to home
Create AccountLog in
Avatar of chrisj1963
chrisj1963

asked on

Why is div showing when it should be hidden

I have a version of a form where the divs show and hide properly but when I add tables and rows the div is showing up when i don't want it to.  the div that is only supposed to show up on page 2 is showing through all pages...?????

version 1: http://g3crm.com/expert/div10.htm 
all flows well without the tables and rows  i added.

version 2: http://g3crm.com/expert/div11.htm
with tables and rows added.

version 3: http://g3crm.com/expert/div12.htm
i replaced the "table" and "tr" with "div" and replaced "TD" with "span".
It works, but note that the 123 and 456 are bunched together when they should be centered over each 'model' image.

...but aren't tables more appropriate for this application.  Why are they not working?


Can someone please tell me what i need to change to get the version version 2 to act like version one.

Thanks,
Avatar of chrisj1963
chrisj1963

ASKER

I sort of solved it by replacing the tables and rows with "div" and the cells (td's) with "span".
Now the problem is that you will note in page 2 that the 123 and 345 that should be centered over each "model" image is all bunched in the middle. Can someone help me fix that?
thanks
looks like your sample code #2 was on the right track. i think your javascript is faulty though for it.

if you want to stick with divs, your layout should more resembed this:
<div id="allHeadShotsContainer" style="width:450px">
    <div class="headShotContainer" style="float:left; width:150px; ">
        <h1>1</h1>
        <img src="blah.jpg" width="150" height="100" alt="" />
    </div>
    <div class="headShotContainer" style="float:left; width:150px; ">
        <h1>2</h1>
        <img src="blah.jpg" width="150" height="100" alt="" />
    </div>
    <div class="headShotContainer" style="float:left; width:150px; ">
        <h1>3</h1>
        <img src="blah.jpg" width="150" height="100" alt="" />
    </div>
</div>
...and don't forget the css "text-align:center; " on your <h1>s if you choose to use those. are you very familiar with css and non-tabular layout?
daleyjem,
Thanks very much for your solution.  One issue though: for some reason, in firefox, the "next" and continue buttons end up on the right of the page and all of the content is pushed to the left.

Can you give me some guidance on how to address that?

and in answer to your question,  I am not too familiar with "css and non-tabular layout". i am really winging it on this project.  If you have any other suggestions for improving the script i would welcome them.
by the way, the updated version is http://g3crm.com/expert/div12.htm
OK. i thought that i had it.  please see http://g3crm.com/expert/div13.htm
All i did was add the code for the female models and now it does not work when i click "continue' on the first page.  Am i doing something wrong?
thanks
I figured out that I just had not completed the code.  Can you please still answer the comment above
posted at 11:05PM CST, ID: 21067496
Also - One big issue that I just realized is occurring.

Please notice that in Internet explorer 6 on page 3 you are able to select the "Shot" (Long, Medium, Head) AND you are also able to select the "Size" (Large, Medium, Small), but in Firefox you can only select the "Shot". Nothing happens when you click on a "Size".

Can someone please help me understand what is causing that to fail?

Please see: http://g3crm.com/expert/div13.htm (does not work here)
and
http://g3crm.com/expert/3div.htm (it worked here for some reason???)

Thanks very much.
ASKER CERTIFIED SOLUTION
Avatar of Jeremy Daley
Jeremy Daley
Flag of United States of America image

Link to home
membership
Create an account to see this answer
Signing up is free. No credit card required.
Create Account
that is a sweet program.  Thanks!!!!!!!