CSS Question

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

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!

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.

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.

stevo_ said:

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 said:

stevo_ said:

*snip*

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_ said:

JParrish said:

*snip*

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.

Next time try...http://msdnforumsucks.com/forums/

Adamus34 said:

Next time try...http://msdnforumsucks.com/forums/

Adamus34 said:

Next time try...http://msdnforumsucks.com/forums/

W3bbo said:

Adamus34 said:

*snip*

"We have 4 registered users"

Ya, real popular.