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

On Mar 13, 2:36 pm, Jeremy <jer...@pinacol.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 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 Mar 13, 3:03 pm, Jeremy <jer...@pinacol.com> wrote:
> 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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/
TR/xhtml11/DTD/xhtml11.dtd">

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

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<meta http-equiv="content-language" content="en-us">
<title>template</title>

<style type="text/css">
..example1 {
position: absolute; left: 0; top: 100px; width: 0; height: 0;
color: blue; background-color: yellow;
}
..example2 {
position: absolute; left: 100px; top: 100px; width: 0; height: 0;
color: red; background-color: yellow; overflow: hidden;
}
..example3 {
position: absolute; left: 200px; top: 100px; width: 100px; height: 20px;
color: green; 10px; background-color: yellow;
}
</style>

</head>
<body>

<div class="example1">
You will see blue text but no yellow background with overflow visible
</div>
<div class="example2">
You will see no red text but no yellow background with overflow hidden
</div>
<div class="example3">
You will see green text and some yellow background with a width and
height setting but the text will break out
</div>

</body>
</html>




--
Take care,

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

On 2008-03-13, Jonathan N. Little <lws4art@central.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@central.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

KDawg44 wrote:
> On Mar 13, 3:03 pm, Jeremy <jer...@pinacol.com> wrote:
>> 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
>
> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/
> TR/xhtml11/DTD/xhtml11.dtd">
>

Hrm. IE7 seems to recognize that doctype and use the correct box model.
I'm not sure why your code isn't working, but a simple test case using
that doctype works fine.

If the gray div:
1) is the last element before </body>
2) is absolutely positioned with top, left, bottom, and right set to 0
3) has no width or height defined in CSS

then I think it should work even in IE7. Of course, there's no way any
of us could you thoroughly debug without seeing your document.

Jeremy

KDawg44 schrieb:
> On Mar 13, 3:03 pm, Jeremy <jer...@pinacol.com> wrote:
>> This should work in IE7. Did you specify a doctype in your markup?
>
> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/
> TR/xhtml11/DTD/xhtml11.dtd">

The appropriate internet media type (MIME type) for XHTML 1.1 is
application/xhtml+xml. IE cannot handle this. IE can handle text/html
which is not appropriate for XHTML 1.1.

So why are you using XHTML 1.1?
--
Johannes Koch
In te domine speravi; non confundar in aeternum.
(Te Deum, 4th cent.)