http://banjundrama.wordpress.com/2009/12/16/fhaluj/

Also, this is how I did it. I might be fully wrong. Please help me!

XHML and CSS Lightbox

html {
font-size: 75%;}
html, body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;}
body {
background-color: #f8f8f8;
font-family: arial, helvetica, sans-serif;
color: #777;
text-align: center;
font-size: 1.0833em;
line-height: 1.6923em;}
a {
color: #09F;}
h2 {
font-weight: normal;}
p {
margin: 0 0 1.6923em 0;}
#container {
width: 100%;
height: 100%;}
position: absolute;
top: 0;
left: 0;
overflow: auto;
#header,
#content,
#footer {
text-align: left;
width: 870px;
margin: 0 auto;
padding: 40px;}
#header,
#footer {
background-color: #eee;}
#header h1 {
margin: 0;}
#header p {
margin: 5px 0 0;}
#content {
background-color: #fff;}
/* ———————————————————- */
/* LIGHTBOXES
/* ———————————————————- */
#lightboxes {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
list-style-type: none;
text-align: left;}
overflow: hidden;
#lightboxes li {
width: 100%;
height: 9999px;
position: relative;
background: rgba(0,0,0,.5);}
#lightboxes .box {
position: absolute;
width: 400px;
height: 400px;
left: 50%;
top: 50px;
border: 10px solid #999;
margin-left: -230px;
background-color: #fff;
padding: 20px;}
#lightboxes h3 {
font-weight: normal;
font-size: 1.8461em;
margin: 0 0 0.4583em 0;}
#lightboxes a.close {
position: absolute;
top: 20px;
right: 20px;
display: block;
width: 20px;
line-height: 20px;
text-align: center;
background-color: #ddd;
text-decoration: none;
font-weight: bold;
color: #999;
font-size: 1.2em;}
#lightboxes a.close:hover {
background-color: #999;
color: #fff;}
#lightboxes #close {
background-color: transparent;
z-index: -1;}

html {
overflow-y: auto;}
#lightboxes {
position: relative;}
#lightboxes .ie-bg {
background: #000;
position: absolute;
z-index: -1;
width: 100%;
height: 100%;
filter: alpha(opacity=75);}

A valid XHTML and CSS Lightbox (no JavaScript)
by Jenna Smith

Click any of the links below to see it in action
Lorem ipsum dolor sit amet, consectetur about us adipiscing elit.
Donec massa lorem, elementum et mollis non, viverra a est. Proin nunc orci, tristique at egestas et,
interdum ac ipsum. Nulla more info vulputate erat ac gravida. Mauris facilisis, leo ac condimentum commodo,
justo eros molestie dolor, a posuere orci tortor sed lacus. Suspendisse dictum, magna eu posuere tempor,
augue diam tempor lacus, sed hendrerit nulla ante quis justo. Aliquam eget tellus risus.

Copyright 2009 Jenna Smith

About

Duis eros nibh, tempor sed ultricies eget, malesuada id nunc. Praesent a purus non
risus dignissim placerat et eu dolor. Maecenas rutrum odio vitae libero sagittis a faucibus metus tincidunt.
Praesent bibendum sagittis elit, nec convallis enim tincidunt quis.

Duis eros nibh, tempor sed ultricies eget, malesuada id nunc. Praesent a purus non
risus dignissim placerat et eu dolor. Maecenas rutrum odio vitae libero sagittis a faucibus metus tincidunt.
Praesent bibendum sagittis elit, nec convallis enim tincidunt quis.

x

More stuff

Duis eros nibh, tempor sed ultricies eget, malesuada id nunc. Praesent a purus non
risus dignissim placerat et eu dolor. Maecenas rutrum odio vitae libero sagittis a faucibus metus tincidunt.
Praesent bibendum sagittis elit, nec convallis enim tincidunt quis.

x

I wonder if it shows! Please do help me (:
Thanks!

Let me know….thanks.

So thanks a lot. Maybe I can use this as a fallback for a javascipt popup some other place

in the main style section change #lightboxes {…} overflow: auto; to overflow: hidden;

this is already set to hidden in the IE specific styling.

Thank you so much for the write-up!