Problem w/ lightbox 2.0 in IE

[finkdawg5]

1) Script Title: Lightbox image viewer 2.0

2) Script URL (on DD):
http://www.dynamicdrive.com/dynamici...box2/index.htm

3) Describe problem:

My site is simply a cookie-cutter site of an open source web design... template at http://www.oswd.org/design/preview/id/2426

My site is at http://www.newtonfiremuseum.org/

I've implemented lightbox 2.0 to show a few graphics. Was working great with firefox 2.0 (with the exception of a horizontal scroll bar appearing momentarily, but i can live with that i guess), but when I checked out my site in IE it's got some serious problems. I didn't change anything with the lightbox code, just implemented it like the instructions say. Anyone know why this would be happening?

[jscheuer1]

The simple answer is if you want to use lightbox with IE 6, get rid of this:

<!--[if IE 6]>
<link rel="stylesheet" href="fix.css" type="text/css" />
<![endif]-->

It will make the page more normal in IE 6 but, IE 6 really doesn't support that type of scrolling, at least not in the way that it is done in that template which, by the way, is far from standard or common as regards its use of the html and body elements in IE 6. I would bet that it would mess up quite a few scripts for IE 6.

[finkdawg5]

I removed the code, but it's still got some issues. If there are going to be all these compatibility issues, would you recommend scrapping the template altogether and going with another?

[jscheuer1]

Yes, that is what I was saying more or less. It (the template) is a bit over the top. It basically is trying to get IE 6 to act as though it supports the fixed value for the position property which, it does not. If one wanted to implement an effect like this it might be able to be done in a way that did not conflict with scripts that get some of their information from the body element. However, if possible, it would require that a second 'body' be made from a container division that spanned the entire page. This is basic css as far as IE 6 goes (you cannot mess with the body or html elements too much and expect the rest of the page to behave as before). Once this container division (or possibly even divisions) were implemented, other browsers would need to be able to either ignore them or, better yet, use them as well in the effect.

So, if you could find a template that has this effect without styling the body or html elements in this manner, go for it. But, I suspect that would not be possible (it appears to require that the html element be stripped of scroll bars using overflow:hidden). It is a great template if there are no scripts of the nature indicated (like lightbox) involved.

Find a template (with or without this effect) that doesn't have anything more complex for the body's css than margin and padding property settings and that has no css for the html element directly.

[finkdawg5]

*sigh*... thought i had found a good one there. I just don't have the time these days to come up with a design on my own, and it's much more difficult than you would imagine to find a template to fit what you had in mind. Thanks very much for you help though, I'd rather find these things out sooner than later!

Anyone know of any decent (free) template sites?

[jscheuer1]

Check out this page:

http://css-discuss.incutio.com/?page=FrontPage

scroll down to:

CssLayouts

and also look at its link:

http://css-discuss.incutio.com/?page=CssLayouts

It has some discussion of the pros and cons of various layouts. As a general rule (for lightbox) avoid fixed layouts and I would think that many (if not all) of the absolute layouts as well. Still, if there is a wide selection of fixed layouts, you might find one innovative enough to both suit your purposes and accommodate lightbox in IE. The float layouts are the safest though.