CSS Question | Tech Off

JParrish

I figured there's got to be a couple CSS experts on here Smiley

I'm using a CSS based popup.. that relies on an anchor tag.. with a span inside of the anchor tag. Here's the css that drives the popups:

        a.popup{
            position:relative; /*this is the key*/
            z-index:24; background-color:#ccc;
            color:#000;
            text-decoration:none;
        }

        a.popup:hover{z-index:25; background-color:#ff0}

        a.popup span{display: none}

        a.popup:hover span{ /*the span will display just on :hover state*/
            display:block;
            position:absolute;
            top:auto; left:15px; bottom:15px; width:350px; height: auto;
            border:1px solid #0cf;
            background-color:#cff; color:#000;
            text-align: center;
            overflow: auto;
        }

The corresponding HTML looks like this:

<a class="popup" href="#">Mouse Over<span>Popup Text</span></a>

This works well in both IE and Firefox. My problem is that if instead of "Mouse Over" I want to have a small image which triggers the hover, in IE it displays the image correctly but in Firefox the image is being hidden along with the span, even though the image is not contained within the span.

I don't really know if this is a quirk of Firefox, or if that behavior is expected and IE is not conforming. Any help would be appreciated, I'm not sure where to turn with this problem. Thanks!

JParrish

Strangely.. I stripped this out of the page it is in.. and placed it in a blank HTML document.. and it does work in FF.. with the IMG.. so I guess I just have to start the deductive process and try to find out what is breaking it. Sad

stevo_
Human after all

Theres a couple of things wrong with what you are doing aswell, for one - you are abusing the anchor tag to get a hover, this is done undoubtedly because ie6 only supports hovering on anchors and nothing else.

I'm not sure how you are placing an image in the anchor, but if you are doing it with an img tag, this is also wrong, it should be a css background image because its a stylistic image, not an actual image resource that the site (document) is displaying.

JParrish

In reply to stevo_

#Dec 2nd, 2008 @ 1:01 PM

I didn't write this.. but are you suggesting that I create a div of fixed size with the background image.. use that for the :hover and then what.. position the span inside the div and follow the same convention of "div.popup span{display: none}"?

stevo_
Human after all

In reply to JParrish

#Dec 2nd, 2008 @ 1:16 PM

No, it won't work in ie6 and you'll need to fix ie6 then by using javascript to capture mouse events on the elements. I was simply pointing out that doing this with an anchor is technically wrong.. and so if you ever have a requirement for accessibility or otherwise, then you should know what to avoid (popups factor into accessibility anyway anyway).

If the popup sits over the anchor, then you can use the background-image of it.

JParrish

In reply to stevo_

#Dec 2nd, 2008 @ 1:22 PM

Yea I worked in a gov position for almost 6 years, so I know all about 508, it's not a concern for my particular project but I appreciate the input. I've found a DHTML balloon tooltip that is much nicer since it can re-position itself based on edges.. etc. Cheers