CSS Forum

**godspeed** · 02-07-2008, 03:19 PM

Hello all. I am trying to create a script that will pop-up an image and darken the rest of the page. The darkened background is a separate DIV that overlays the entire page. I have it working in FF, but not in IE6/win. Here's my code:

Code:

<html>
<head>
<title>Test Page</title>
<link rel="stylesheet" type="text/css" media="all" href="popup/popup.css" />
</head>
<body>
     <div id='pop'></div>
</body>
</html>

Code:

#pop {
    position:absolute;
    height:100%;
    width:100%;
    top: 0px;
    left: 0px;
    background:#000;
    filter:alpha(opacity=36);
    -moz-opacity:0.36;
    opacity:0.36;
}

This should create a DIV that covers the whole page. Works in FF, as I stated above. But in IE it shows a wide but short rectangle at the top of the page. I can get around this by adding the following CSS:

Code:

html, * {
     margin:0 0 0 0;
}

body {
     height:100%;
}

But I don't want this. I don't want to alter the CSS for anything major since I plan to use the code on multiple sites that each have unique CSS, some with custom html and body CSS values.

Is there any way to keep the DIV positioned as absolute (I need that as well), not change the html or body CSS, and have it cover the whole page in IE6?

Any help is appreciated.
Thanks in advance,
-Tim

**LadynRed** · 02-07-2008, 03:48 PM

Why not just use LightBox ?

http://home.comcast.net/~ahavriluk/lightboxEx/doc/

**wayfarer07** · 02-10-2008, 02:35 AM

It sounds like what you're trying to do is make a modal pop-up. I always hand-code these, although Lady's suggestion is still a good one. You might want to start by using fixed positioning on the semi-transparent div instead of absolute positioning.

**godspeed** · 02-11-2008, 02:28 PM

I'm not using LightBox because I want to do it myself, and thus will be able to change it up easily (once it's finished).

The point of absolute positioning is that the partially transparent DIV is supposed to take up the entire screen / website so that it looks like it faded everything out behind it.

-Tim

**godspeed** · 02-11-2008, 02:36 PM

Ah ok, I see what you mean about setting it fixed.

But, when I set it fixed it works like a charm in Firefox. But in IE6/Win it places this overlay at the bottom of the page and does not move when the user scrolls.

Any ideas?

-Tim

**jim.thornton** · 02-11-2008, 02:41 PM

I think that you problem is that IE does not accept height at 100%.

Set a fixed height. You could probably use some javascript to determine the resolution of the monitor and then set the height to the same value or something. Then, you could actually setup the javascript as a behavior so that only IE will run it.

Just a thought!

**LadynRed** · 02-11-2008, 08:50 PM

No, IE accepts 100% height, but it does NOT recognize position: fixed.

**Mooofasa** · 02-12-2008, 05:56 AM

LadynRed's suggestion is the best one god. There is nothing wrong with using snippets, and they are often made so that you can easily edit them. Why reinvent the wheel?

Personally, I prefer ThickBox which works on the jQuery framework.

To get a position: fixed in IE6 you need to use a hack.

Code:

* html #TB_overlay { /* ie6 hack */
     position: absolute;
     height: expression(document.body.scrollHeight > document.body.offsetHeight ? document.body.scrollHeight : document.body.offsetHeight + 'px');
}

The above was taken from the ThickBox CSS.

**jim.thornton** · 02-13-2008, 12:28 AM

So... Is it FF that doesn't accept 100% height?

**davemies** · 02-13-2008, 04:05 AM

er, again: why not use lightbox or thickbox and customise it?

i mean someone's already sorted out how to do it so why not use what they've used, or at least look at how they've done it and that should answer your questions on how to do it.

**Mooofasa** · 02-13-2008, 10:59 AM

Both accept height 100%.

**jim.thornton** · 02-13-2008, 01:10 PM

Confused... Maybe I should be starting a new thread, but LadynRed. If you take a look at this thread: http://www.webmaster-talk.com/css-fo...n-firefox.html in one of the posts someone told me that height: 100% causes problems in IE.

Is this no longer the case??

**Mooofasa** · 02-13-2008, 02:07 PM

The only post that says height 100% causes problems in IE is your own.