Pop up div with grayed out background

Hi,

I have a div that pops up to alert some folks when they log in to our
site. I have a second div that grays out the background except for
the pop up div.

Here is my CSS:

<style type="text/css">
#popup {
position: absolute;
left: 420px;
top: 200px;
z-index: 1001;
visibility: hidden;
border: solid;
border-color: #7BC041;
}
#grayBG {
position: absolute;
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;
overflow: hidden;
padding: 0;
margin: 0;
background-color: #000;
filter: alpha(opacity=50);
opacity: 0.5;
z-index: 1000;
}
</style>
......

<div id="grayBG"></div>

<div id="popup" style="">
Pop up code
</div>

There is some JavaScript that is called to change the visibility.

All of this works great in Firefox but in IE 7, the gray div is in the
upper right corner and very small. It does not cover the whole page.
It does not stretch over the whole screen.

How can I do this in IE? I have tried adding attributes like width:
100%; and height: 100%; to no avail.

Please help! Naturally, most of the people viewing this will use IE!

Thanks very much.

Kevin

On Mar 13, 12:47 pm, "Beauregard T. Shagnasty"
<a.nony.m... (AT) example (DOT) invalid> wrote:

KDawg44 wrote:
I have a div that pops up to alert some folks when they log in to our
site. I have a second div that grays out the background except for
the pop up div.

Here is my CSS:

code snipped

There is some JavaScript that is called to change the visibility.

..and what is it?

Please help! Naturally, most of the people viewing this will use IE!

..and less and less of them every day.

Provide the URL to your best effort, that has the complete page.

--
-bts
-Friends don't let friends drive Vista

Unfortunately, I cannot provide the URL because it is an authenticated
site.

The JavaScript is being called correctly on both browsers because both
divs are visible on both browsers, its just that the gray div is not
stretching across the screen in IE 7.

On Mar 13, 12:47 pm, "Beauregard T. Shagnasty"
<a.nony.m... (AT) example (DOT) invalid> wrote:

KDawg44 wrote:
I have a div that pops up to alert some folks when they log in to our
site. I have a second div that grays out the background except for
the pop up div.

Here is my CSS:

code snipped

There is some JavaScript that is called to change the visibility.

..and what is it?

Please help! Naturally, most of the people viewing this will use IE!

..and less and less of them every day.

Provide the URL to your best effort, that has the complete page.

--
-bts
-Friends don't let friends drive Vista

By the way, I love your vista quote! I tend to lean toward the
standard windows saying of:

"Failure is not an option. It comes bundled with Windows."

On Mar 13, 1:17 pm, "Beauregard T. Shagnasty"
<a.nony.m... (AT) example (DOT) invalid> wrote:

KDawg44 wrote:
"Beauregard T. Shagnasty" wrote:
Provide the URL to your best effort, that has the complete page.

Unfortunately, I cannot provide the URL because it is an
authenticated site.

Do you mean visitors must log in to the main page? Set up a test at
something like: http://example.com/test/grayout.html

The JavaScript is being called correctly on both browsers because
both divs are visible on both browsers, its just that the gray div is
not stretching across the screen in IE 7.

I doubt if you will receive much help unless you provide all the parts.

Then again, maybe #grayBG won't stretch because it has no size .. no
area, being absolutely position at zero.

position: absolute;
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;

--
-bts
-Friends don't let friends drive Vista

How do I specify it to fill the screen? I have tried width:100%; and
height:100%; with no change (removed bottom & right).

Beauregard T. Shagnasty wrote:

KDawg44 wrote:

"Beauregard T. Shagnasty" wrote:
Provide the URL to your best effort, that has the complete page.
Unfortunately, I cannot provide the URL because it is an
authenticated site.

Do you mean visitors must log in to the main page? Set up a test at
something like: http://example.com/test/grayout.html

The JavaScript is being called correctly on both browsers because
both divs are visible on both browsers, its just that the gray div is
not stretching across the screen in IE 7.

I doubt if you will receive much help unless you provide all the parts.

Then again, maybe #grayBG won't stretch because it has no size .. no
area, being absolutely position at zero.

position: absolute;
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;

Specifying all of top, bottom, left and right as 0 will make it stretch
to fit its positioning parent in a standards-compliant browser.

The question is, what is its positioning parent?

If the gray div is directly in the body of the document, you would need
to make sure the body element (and usually the html element as well) are
taking up 100% width and height. Unfortunately, this will probably
screw up everything else on your site.

The simplest solution here is probably to use javascript (since you are
already relying on it) to determine the window's width and height and
make your gray div match.

Jeremy

On Mar 13, 2:36 pm, Jeremy <jer... (AT) pinacol (DOT) com> wrote:

Beauregard T. Shagnasty wrote:
KDawg44 wrote:

"Beauregard T. Shagnasty" wrote:
Provide the URL to your best effort, that has the complete page.
Unfortunately, I cannot provide the URL because it is an
authenticated site.

Do you mean visitors must log in to the main page? Set up a test at
something like: http://example.com/test/grayout.html

The JavaScript is being called correctly on both browsers because
both divs are visible on both browsers, its just that the gray div is
not stretching across the screen in IE 7.

I doubt if you will receive much help unless you provide all the parts.

Then again, maybe #grayBG won't stretch because it has no size .. no
area, being absolutely position at zero.

position: absolute;
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;

Specifying all of top, bottom, left and right as 0 will make it stretch
to fit its positioning parent in a standards-compliant browser.

The question is, what is its positioning parent?

If the gray div is directly in the body of the document, you would need
to make sure the body element (and usually the html element as well) are
taking up 100% width and height. Unfortunately, this will probably
screw up everything else on your site.

The simplest solution here is probably to use javascript (since you are
already relying on it) to determine the window's width and height and
make your gray div match.

Jeremy

Thanks for the response. Since this is working exactly as desired in
Firefox, I am assuming that whole "standards compliant browser" thing
is the issue (Internet Exploder 7).

I will look into how to find the window size using javascript and give
that a try. Thanks.

KDawg44 wrote:

Specifying all of top, bottom, left and right as 0 will make it stretch
to fit its positioning parent in a standards-compliant browser.
snip

Jeremy

Thanks for the response. Since this is working exactly as desired in
Firefox, I am assuming that whole "standards compliant browser" thing
is the issue (Internet Exploder 7).

I will look into how to find the window size using javascript and give
that a try. Thanks.

This should work in IE7. Did you specify a doctype in your markup?

Jeremy

On 2008-03-13, Jonathan N. Little <lws4art (AT) central (DOT) net> wrote:

Jeremy wrote:
Beauregard T. Shagnasty wrote:

Then again, maybe #grayBG won't stretch because it has no size .. no
area, being absolutely position at zero.

position: absolute;
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;


Specifying all of top, bottom, left and right as 0 will make it stretch
to fit its positioning parent in a standards-compliant browser.

No it won't. Blocks don't auto expand when set with dimensions other
that "auto", what you describe is display: table-cell.

No that is what position: absolute blocks do-- top, bottom, left, right
all 0 should peg it to the four corners of its container (assuming you
have left width and height as auto).

If you dimension a block as 0 width and height that will be the size.
You will see the content because it will break out when at the default
overflow of "visible"

Yes.

Ben C wrote:

On 2008-03-13, Jonathan N. Little <lws4art (AT) central (DOT) net> wrote:
Jeremy wrote:
Beauregard T. Shagnasty wrote:

position: absolute;
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;

Specifying all of top, bottom, left and right as 0 will make it stretch
to fit its positioning parent in a standards-compliant browser.
No it won't. Blocks don't auto expand when set with dimensions other
that "auto", what you describe is display: table-cell.

No that is what position: absolute blocks do-- top, bottom, left, right
all 0 should peg it to the four corners of its container (assuming you
have left width and height as auto).

Dang! misread it. Yes

"position: absolute; top: 0; right: 0; bottom: 0; left: 0"

would make and "overlay" to the parent block if the parent is set
"position: relative".
--
Take care,

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