Displaying articles with tag

Fun With Sprites

Posted by matt, Wed Aug 23 09:48:00 UTC 2006

or: More IE Hell

Well, I may be in an anti-IE rut, but this is where I’ve been tearing my hair out lately… Once again, I’ve developed a site top-to-bottom on my Mac, and am only now testing it in IE. Fortunately, IE really only seems to require CSS tweaks (i.e. lots of ”* html” selectors), but I just ran into a problem that is particularly intriguing.

I’m using CSS sprites as a way around the usual image slicing required for rollovers. It usually works great, but it didn’t work so well on my latest site. I’m doing the usual:


div#nav a:hover img, div#nav a.sel img { margin-top: -40px; }

This simply pulls the image up behind the mask created by the containing anchor set for overflow:hidden. This “masks” the image, and allows you to pull it up by half it’s height to do the rollover. Pretty slick.

However, in IE for some reason it doesn’t want to re-draw the image, so it appears that the :hover state never gets fired. However, on pages that have the “sel” class applied to the active nav element, the pullout works fine. Bear in mind that this doesn’t require a re-draw, because it’s already there when the page is initially rendered. So… why won’t IE re-draw in response to the :hover?

Well, to be honest, I’m not sure. I’ve done some experimenting with how the nav bar is positioned to see if it’s a page layout issue, but that doesn’t seem to be it. The code is almost identical to previous times I’ve done this, so I’m somewhat at a loss. However, I did find a workaround:


div#nav a:hover { border: 0px solid black; }

The non-border border seems to trigger a re-draw in IE, and then the rollovers work just fine. I’m going to continue investigating what might be causing this particular instance, but for now this solves the issue.

5 comments | Filed Under: General General Tech | Tags:

IE Suckerfish Hell

Posted by matt, Sun Jul 30 16:55:00 UTC 2006

So, we’ve got a pretty new client site that I finished work on this weekend, and I experienced the curse of all Mac-based web developers: you can’t test in IE. So, I’d been developing and testing in Firefox and Safari, all in XHTML 1.0 Strict, hoping that whatever I was doing wasn’t so whacky that I’d have problems later. Overall, the whole site was pretty straightforward…until the end.

The designer (our own Bill Edmonson) had designed some slick looking dropdown menus:

As you’ll notice, there’s some space between the menu items. I’m a big fan of suckerfish dropdowns, mainly because of the pretty markup, and also because they’re pretty easy to create. So, in this instance, all you need to do is add some margin to your LI’s to create the spacing between the nav elements.

This works brilliantly in all the standards-complient browsers (SCBs), because the transparent space between the items is still “contained” within the UL that is the subnav. Thus the onmouseout shouldn’t get fired in IE, because you’re over the menu even when you’re not over an individual item. In the SCBs, you’re still hovering the contents of the parent LI, so the menu will stay open.

No problem. Except that IE fires onmouseout prematurely, because it treats the lack of a background (the transparent space between the nav elements) as if it’s “punched out” of the parent UL. Thus, the menu closes as soon as your mouse wanders over one of the gaps, which you will immediately do as soon as you try to select anything but the top element.

The solution? A transparent GIF background on the parent UL. Thus, a menu with the following html:

Would have the following background to eliminate the problem, excluding all of the usual suckerfish stuff, which can be had at ALA:


  ul#nav ul { background: url(/images/common/spacer.gif) };

This has the effect of filling the background, but it’s still transparent, so you still get the desired effect. However, IE treats the element as if it were “opaque”, instead of “punched out”. Thus, onmouseout only fires when it should, and not when you mouseover one of the gaps.

1 comment | Filed Under: Design | Tags: