<tr> moves down

why, when I check the box to make the other label/input ox appear does the <tr> seem to move about 5px?

In what browser?
I get no shift in FF/Linux.

The markup has quite a lot of weird syntax faults in it but I could not see a rendering difference until I turned on JavaScript…

CLASSIC example of not just “table for nothing”, but also using a H2 for what should be a LEGEND…

Surprising since you are stacking label and input properly, so what do you need the table for? Much less what’s up with the DIV for nothing around it?

YEAH! What Shadow said…

but, I am not going into that. I see the drop as well. Your TR is the height of a simple text + check box , until the face book option is checked… at this point your js changing the display of the content of the adjacent TD ( the one with FaceBook Page)…

I didn’t delve into your code. But what I would do is instead of changing the display from :none to :block ( or whatever) try using the visibility: property INSTEAD. That way the space the input/label item takes will still be there even when the input/label are hidden…

hope that helps

ok im trying to make the <span> visible only when the check mark is checked

dresden_phoenix hit it on the head – stop doing display:none and display:block, and instead set visibility:hidden; – of course you appear to be relying on a mootools library for that show hide which isn’t just making it hard to maintain/edit, it’s also bloating out the page for NOTHING.

visibility:hidden elements still ‘exist in flow’ – which is to say that the space they would occupy on screen would still be there even though they aren’t drawn.

Of course the invalid markup of those REL attributes on the spans is a real head scratcher… span doesn’t HAVE REL… the lack of “for” on some of those labels is kinda odd, and Of course all that mooTools for nothing is over-complicating matters too.

I’m out the door for a dinner date in like 20 minutes, but I’ll try to remember to revisit this when I get back; I’ll toss together how I’d handle that… Which step one will involve telling mootools where to shove it.

“usableforms” – absolute riot of the name when it has the exact opposite effect :smiley:

//////thanks, I figured the usableforms.js was the problem (and ?I took a look at the script and im afraid to touch anything)
Is this something I should use?

Thanks for the patience…

or like