The Lodge is members-only design/dev videos and Office Hours.

Next Office Hours Session: "Implementing an SVG Icon System" Nov 30 - 6:00 PM Eastern

image fade

  • # April 29, 2008 at 7:04 pm

    Hi. Thought I’d see if anyone can help me here. I have a site that I’m using jQuery and some javascript to fade between two images when the mouse is hovered over it. I also have it so that when the picture is clicked, it takes the user to an image gallery for that picture. This all works just fine and dandy in firefox, but not in IE7. The fade is occurring, but you cannot click on the image at all. Nada. I’m hoping it’s an easy fix, but we’ll see.

    Here’s a demo:

    If you check it in both firefox and IE you’ll notice what I’m saying. Thanks to anyone who takes a look.

    # April 30, 2008 at 12:06 am

    This reply has been reported for inappropriate content.

    It looks like you are going to have to have to do something with this chunk:


    I’m pretty sure what is happening here is that the rendered size of the anchor element is 0x0px. Anchors are by default inline elements, and with nothing inside except for an absolutely positioned element, it’s not getting any size to it and thus is unclickable. Firefox is being cool about it and understands what you are trying to do but IE isn’t. Perhaps you can tag on a unique class to that anchor element which you can use to make it display as a block and set a width and height to it, which should make the region clickable.

    # April 30, 2008 at 1:00 am

    thanks. I’ll give it a try and let you know what happens. I appreciate the help. (I’m getting back into the computer thing after about 6 years out, so I’m trudging through).

    # April 30, 2008 at 1:33 am

    well, no deal. I tried applying some width and height and a block display to the anchor element, and then also tried it to the span that’s created. Might I say I hate IE? Any other ideas? :D

    # April 30, 2008 at 9:13 am

    This reply has been reported for inappropriate content.

    Since you are using jQuery anyway, maybe you can integrate something like this "block clickable" example here: … kable.html

    Basically stealing the href attribute from the anchor link and applying it to the parent.

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed