Small CSS problem that shows up in IE 6

[monodistortion]

It took me a little while to pin this problem down but here’s how to reproduce it.

In IE 6 click on a Slimbox image link that is part of a set. Hover the mouse pointer over one side and wait for the animation to finish. Then click the mouse without moving it. The "prev" or "next" image is tiled over half of the image.

It seems like IE 6 doesn’t change the link to the :hover state until you move the mouse. When you click the mouse your slimbox2_autoload.js.php JavaScript generates the in-line CSS for the background image but the default for background images is "repeat" so the background is tiled over the div.

I fixed the CSS in my slimbox2.css by changing line 45 to:
#lbPrevLink:hover, #lbPrevLink:active
and line 53 to:
#lbNextLink:hover, #lbNextLink:active

Christophe’s original CSS has a similar problem, except that "prev" and "next" don’t appear at all, since he doesn’t use javascript to put the CSS in-line.

[malcalevak]

Thanks for bringing this to my attention. If I’m understanding it correctly, it looks like jQuery apparently sees the hover regardless of if the browser reports it.

Anyway, I’ll implement this fix in the next release.

You may also wish to bring this to Christophe’s attention (if you haven’t already). While not displaying the image beats displaying it tiled, it’s a simple enough fix.

[monodistortion]

Hi Greg,
I ran into a similar problem yesterday while testing a website with Safari.

Here’s how to reproduce the problem. In Safari (mine is v3.2.2 for Windows) click on a Slimbox image link that is part of a set. Move the mouse a little so the "prev" or "next" image appears. Let go of the mouse and use the left or right arrow key to go to the next or previous image. One side of the image will be tiled with the "prev" or "next" image.

It looks like this is another side effect of adding the localized CSS inline with jQuery.

To fix this I changed the slimbox2.css like this:
#lbPrevLink {
background: transparent no-repeat 0 15%;
left: 0;
}

#lbNextLink {
background: transparent no-repeat 100% 15%;
right: 0;
}

This actually makes the other lines for :hover and :active redundant so I took those out.

[malcalevak]

Thanks for bringing this to my attention. I don’t have Safari to test, nor am I especially good at CSS, but hopefully those changes will resolve any and all issues related to tiling and not inhibit the full functionality of the plugin.

I’ve implemented these as well as a new German/Deutsch translation in the latest dev build available on the wordpress site.

I’ll hopefully get a chance to code a few more things and do a formal release soon as well.

Thanks for the assist.

[Author]

Posts