Making Lytebox Work in IE8 - Close, Previous & Next

Update: There is another solution that is a touch cleaner and probably gets more to the root of the issue available here: http://nederveld.wordpress.com/2009/07/02/lytebox-and-internet-explorer-8/

Here at Guild Launch we've been using a wonderful streamlined version of Lightbox called Lytebox. We use it primarily because it's a much smaller download than the other Lightboxes and Lightbox 2 and doesn't require any external libraries such as Prototype or Scriptaculous.

This version hasn't seen much development in the last year or so though. It just works.... until IE8 came out. With the release of IE8 some problems cropped up. Namely, the Close, Previous and Next buttons wouldn't show. After a lot of playing around and testing different things I've found the solution. So without further ado here is how to get Lytebox working in IE8 again.

One thing to keep in mind, this fix is specific to us and removes some of the customization that Lytebox has in its CSS. If you know what you are doing you can adapt the fix to your own customization. We've been using the "Grey" theme so I just tweaked those settings:

Before The Changes

In the current lytebox.css there are these lines for the previous buttons in the Grey theme:

#lbPrev { width: 49%; height: 100%; background: transparent url(images/blank.gif) no-repeat; display: block; left: 0; float: left; }
#lbPrev.grey:hover, #lbPrev.grey:visited:hover { background: url(images/prev_grey.gif) left 15% no-repeat; }

And these for the Next button in the Grey theme:

#lbNext { width: 49%; height: 100%; background: transparent url(images/blank.gif) no-repeat; display: block; right: 0; float: right; }
#lbNext.grey:hover, #lbNext.grey:visited:hover { background: url(images/next_grey.gif) right 15% no-repeat; }

And this for the Close button:

#lbClose { width: 64px; height: 28px; float: right; margin-bottom: 1px; }
#lbClose.grey { background: url(images/close_grey.png) no-repeat; }

The Problem

The crux of the problem is that IE8 isn't recognizing the "Grey" class being applied to the ID by the script. Instead of directly figuring out why that is I just merged the classes together since we always use the Grey theme.

The Fix

For the Previous:

#lbPrev { width: 49%; height: 100%; background: transparent url(images/blank.gif) no-repeat; display: block; left: 0; float: left; }
#lbPrev:hover, #lbPrev:visited:hover { background: url(images/prev_grey.gif) left 15% no-repeat; }

For the Next:

#lbNext { width: 49%; height: 100%; background: transparent url(images/blank.gif) no-repeat; display: block; right: 0; float: right; }
#lbNext:hover, #lbNext:visited:hover { background: url(images/next_grey.gif) right 15% no-repeat; }

And for the Close:

#lbClose { width: 64px; height: 28px; float: right; margin-bottom: 1px; background: url(images/close_grey.png) no-repeat;}

Why does this work?

Basically I just made an end run around IE8 not rendering the Grey class properly and just made the button be always the Grey set. If you are using one of the other themes just make the same changes using that theme's images.

So, now you have Lytebox working in IE8 the way it should.

Enjoy!
Stephen