It seems you can only scroll if the pointer is over the content, for example try hovering the pointer over a blank part of the page (i.e. not over text, links etc) and you’ll find that the scroll wheel doesn’t work.

I’ve found this in IE 6 & 8, so I presume would be the case in other versions of IE.

This is the last fix I need to overcome before implementing this on my site, so any help would be greatly received.

Kind regards

I’ve found that it works sporadically, a fix for this would be much appreciated

The only thing that didn’t validate in the CSS was the rgba value … so I pretended I didn’t see it and moved on.

I have asked people to look at my site and it appears to be working on Firefox and Safari, but not on Internet Explorer (does anything work on IE?). Apparently, the links aren’t working. I know you put in a fix for Explorer, so I’m thinking I probably blew it somewhere.

Anyway, thanks … the rest of the class gave up and did javascript galleries. I didn’t … which makes me better than them. Or more stupid than them. I just don’t know enough about web design yet to know which.

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!

unexpected results in Firefox using the mouse’s scroll wheel. Whilst the browsers scroll bars will scroll the faded background content, the scroll wheel moves the overlay and black filter down the page :S

might try usin this for embedding flash video’s…

Thanks!

Thanks!

The above quote was taken from the Conclusion of this article… It was just an experimental bit of fun, it was not created to solve the accessibility issues of lightboxes or to replace lightboxes.

I certainly wouldn’t use this solution for any of my projects as there are many issues with it, including those that you’ve mentioned =)