"a href" issue in IE with CSS image roll-over feature...

Discussion in 'CSS' started by thinkwide, Jan 9, 2007.

  1. #1
    Happy New Year.

    ISSUE: I am having an issue with IE and an attempted implementation of using CSS to show a pop-up image from a roll-over thumbnail. Working document is here: http://flashflight.com/popup_example.html (CSS is in this doc too)

    DESIRE: have the thumbnail image allow a roll-over state and not actually link to anything and simply trigger the pop-up and work in all browsers. I have this function currently working but using JavaScript which I am trying to replace. [http://store.flashflight.com/product_info.php?products_id=33]

    Thanks for any insight.

    Kindly,
    Jeff
     
    thinkwide, Jan 9, 2007 IP
  2. InnovativeWebNola

    InnovativeWebNola Peon

    Messages:
    23
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    0
    #2
    Well I think I realize the issue here. From what you're saying, you don't want the thumbnail img tags to be enclosed in "a" tags (as links). IE will only understand the pseudo-eclass :hover if its used in conjunction with "a" tags. Therefore if you try to implement :hover with any other element, say a div perhaps, then most likely all browsers but IE will recognize this and allow the popup. The fix for this requires Javascript unfortunately. If you wanted 100% browser compatibility and use only CSS, you would have to wrap the thumbnail in an "a" tag and make sure the :hover pseudo-class is associated with it and no other element. I hope this helps.
     
    InnovativeWebNola, Jan 15, 2007 IP
  3. InnovativeWebNola

    InnovativeWebNola Peon

    Messages:
    23
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    0
    #3
    Or, if you don't want it to link to anything, and don't mind having the thumbnail wrapped with an "a" tag, simply link it to #, if you don't mind keeping the "a" tag there.

    Example:

    
    <a href="#"><img src="image.gif" /></a>
    
    Code (markup):
    This article here might also help you; an alternative way of dealing with the hover pseudo element using Javascript:

    http://lawrence.ecorp.net/inet/samples/css-ie-hover.shtml
     
    InnovativeWebNola, Jan 15, 2007 IP