Using <div> to cover page contents

[lilOlMe]

I'm using Ajax to help make my webpage appear to be smoother.

When a control has submitted, I would like to prevent any controls within that control from resubmitting until the request has completed.

Because my forum has many buttons on it, it would take a long time to disable each one upon submitting the forum (using JavaScript).

So instead, I plan on using a <div> that will "shield" my buttons and prevent the user from clicking any button under that <div>.

My problem is that I can't seem to get this <div> to display over the content.

Eg (simplified example)

<div id="theContainerOfMyControls">
    <div id="theButtonShieldingDiv" style="background-color:black; position:absolute; height:100%; width:100%; display:none;"></div>
   <!-- a bunch of other <div>s containing buttons are here that I need to "cover up" -->
</div>
 

So, basically I set the display of the "theButtonShieldingDiv" from "none" to "block" when the page is submitted to the server.

This will cover the entire contents of the screen that's being displayed; however, when the user scrolls down, the section previously hidden is not covered by the <div>...making it still possible for the user to submit the page more than once.

Is there a way to make the "theButtonShieldingDiv" span the contents of "theContainerOfMyControl" instead of the whole page?

(Basically I'd like to use "position:relative" but I'm not having luck with this)

If this isn't possible, is there a way to make sure that the <div> is 100% of the content instead of 100% of the page content being displayed?

Any suggestions are welcome!

Thanks a lot
-LilOlMe

[drhowarddrfine]

I have to think about this (as I'm walking out the door) but I just closed a thread a few minutes ago that I think is related. Check that one out. "How to place a div on top of another div"

[lilOlMe]

I have to think about this (as I'm walking out the door) but I just closed a thread a few minutes ago that I think is related. Check that one out. "How to place a div on top of another div"

I saw the thread that you just closed.
It still doesn't help me.

I learned that the "position:absolute" does work relative to it's parent container but only if you don't set the top, bottom, left, or right css attributes.

I'm still experiencing a problem with the "covering" <div> not becoming height:100% of the containing <div>...it only goes to the bottom of the browser and when you scroll down the rest of the page is still visible.

Thanks for your help,

-LilOlMe

[Death Slaught]

Try giving your division a z-index of 100.

Hope it helps, Thanks,
{\_/}
(' . ')
(")[DEATH](")
(")(")