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 ! Naturally, most of the people viewing this will use IE!

Thanks very much.

Kevin

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 ! 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

On Mar 13, 12:47 pm, "Beauregard T. Shagnasty"
<a.nony.m...@example.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 ! 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...@example.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 ! 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."

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 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

On Mar 13, 1:17 pm, "Beauregard T. Shagnasty"
<a.nony.m...@example.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 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).

KDawg44 wrote:

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

Your #grayBG div was empty. I'm thinking it collapses to the size of its
content.

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

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 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