Grow your CSS skills. Land your dream job.

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: http://www.campcreekrecords.com/hoverTest/hover_Test.html

    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

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

    Code:

    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

    Since you are using jQuery anyway, maybe you can integrate something like this "block clickable" example here:
    http://www.webdesignerwall.com/demo/jqu … 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.

*May or may not contain any actual "CSS" or "Tricks".