Css only lightbox

My company uses lightboxes in several sites and up until recently we didn’t have to worry about IE6. (I am now missing those days)

This is what we have been using to this point.


.absoluteContainer
{
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background-color: Transparent;
}
.lightBox_fill
{
	position: fixed;
	top: 0%;
	left: 0%;
	width: 100%;
	height: 100%;
	background-color: black;
	z-index: 1001;
	-moz-opacity: 0.6;
	opacity: 0.6;
	filter: alpha(opacity=60);
}
.lightBox_content
{
	position: relative;
	margin: auto;
	width: 500px;
	height: auto;
	top: 50px;
	left: auto;
	padding: 20px;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	background-color: white;
	z-index: 1002;
	overflow: auto;
}

/* background stuff */
.backgroundguy
{
	width: 100px;
	height: 100px;
	background-color: Olive;
}


	<div class="backgroundguy">
		blah</div>
	<div class="absoluteContainer">
		<div class="lightBox_content">
			lightbox content yo.
		</div>
		<div class="lightBox_fill">
			&nbsp;</div>
	</div>

It works great in all browsers I have tested except IE6, it doesn’t do anything.

A point in the direction we should take would be awesome! Thanks in Advance!

Nate

p.s.
We don’t need javascript to show it, and I am aware of the IE6 <select> bug.

Hi,
A couple of problems here. For starters IE6 does not support fixed positioning, I would just feed it AP instead and let it go at that.

IE6 has trouble with height:100% on AP elements also. I would probably give good browser top/bottom:0; instead of height:100% and then feed IE6 an expression to calculate the parent height.

Something like this should get you working in IE6

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>CSS Lightbox</title>

<style type="text/css">

body {
    margin:0;
    padding:0;
}
.absoluteContainer,
.lightBox_fill {
    position: absolute;
    top:0;left:0;bottom:0;
    width: 100%;
    /*height: 100%; */
    background: transparent;
}
.lightBox_fill {
    position:fixed;/*reset to fixed*/
    background: #000;
    z-index:1001;
    -moz-opacity: 0.6;
    opacity: 0.6;
    filter: alpha(opacity=60);
}
.lightBox_content {
    position: relative;
    margin: auto;
    width: 500px;
    top: 50px;
    padding: 20px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    background:#FFF;
    z-index:1002; 
    overflow: auto;
}

/* background stuff */
.backgroundguy {
    width: 100px;
    height: 100px;
    margin:10px;
    background: olive;
}
</style>

<!--[if IE 6]>
<style type="text/css">
html,body {
    height:100%; /*reference height for .absoluteContainer*/
}
.lightBox_fill,
.absoluteContainer {
    position:absolute;/*IE6 does not support fixed positioning*/
    height:expression(this.parentNode.offsetHeight);/*IE6 does not understand top and bottom on AP elements*/
}
</style>
<![endif]-->

</head>
<body>

    <div class="backgroundguy">blah</div>
    
    <div class="absoluteContainer">
        <div class="lightBox_content">
            lightbox content yo.
        </div>
        <div class="lightBox_fill">&nbsp;</div>
    </div>

</body>
</html>

It is very close, but it only works if absoluteContainer’s parent is the window.
Side note: I have never used… scratch that… never SEEN the use of expression in a style sheet! Worlds of possibilities just opened to me, thank you!

height:expression(document.body.offsetHeight); allows for absoluteContainer to be nested deeper than the root.

Thank you very much for the help Rayzur!

Nate

Don’t get too excited about expressions :). Only IE understands it, and only IE6 really needs it, but it is slow and it depends on the user having JS enabled (since that’s what expressions really are) :slight_smile:

Hi,

I did something similar a few years ago that may be of interest. The only js was to toggle the class on and off.

http://www.pmob.co.uk/search-this/popup-fade2.htm

It’s a little bit quirky :slight_smile:

Here is mine. http://www.visibilityinherit.com/code/pure-css-lightbox.php