You are here: Pixo Point Support Forum » General Category » Slimbox2 plugin »  (Moderator: malcalevak)Small CSS problem that shows up in IE 6

Author Topic: Small CSS problem that shows up in IE 6  (Read 1233 times)

monodistortion

  • Newbie
  • *
  • Posts: 9
    • WWW
Small CSS problem that shows up in IE 6
« on: January 24, 2009, 11:59:04 PM »
  • Reply with quote
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.
Logged

malcalevak

  • Moderator
  • Sr. Member
  • *****
  • Posts: 282
Re: Small CSS problem that shows up in IE 6
« Reply #1 on: January 25, 2009, 06:53:15 PM »
  • Reply with quote
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.
Logged

monodistortion

  • Newbie
  • *
  • Posts: 9
    • WWW
Re: Small CSS problem that shows up in IE 6
« Reply #2 on: February 17, 2009, 12:17:51 AM »
  • Reply with quote
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.
Logged

malcalevak

  • Moderator
  • Sr. Member
  • *****
  • Posts: 282
Re: Small CSS problem that shows up in IE 6
« Reply #3 on: February 17, 2009, 08:47:10 PM »
  • Reply with quote
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.
Logged
 

+ Quick Reply

With Quick-Reply you can write a post when viewing a topic without loading a new page. You can still use bulletin board code and smileys as you would in a normal post.

Warning: this topic has not been posted in for at least 120 days.
Unless you're sure you want to reply, please consider starting a new topic.

Note: this post will not display until it's been approved by a moderator.
Name: Email:

Powered by SMF 2.0 RC3 | SMF © 2006–2010, Simple Machines LLC | DSv4 Design by DzinerStudio