Re: [css-d] CSS popup not popping in IE

[Duncan Hill]

On Tue, 10 Jun 2008 19:36:45 +0100, Nancy E. Sosna Bohm  
<[EMAIL PROTECTED]> wrote:

> This pure-css popup works in FireFox, but not IE.
> http://tinyurl.com/6xkooa
>
> The css is:
>
> div#popup a span {display:none;}
> div#popup a:hover span {display: block;
>    position: absolute; top: 150px; left:330px; width: 300px;
>    padding: 5px; margin: 10px; z-index: 100;
>    color:#000000; background-color:ffffcc;
>    font: 10px arial; text-align:left;border:1px solid #000000;
>   }
>
> The html is:
>
> <div id="popup">
> some text here
> <a name="#" >
> <u>roughly half</u>
> <span>
> footnote-ish text here
> </span>
> </a>
> remainder of some text here
> </div>
>
> When you mouse over the word "roughly," the footnote-ish text pops up.
> Why doesn't it work in IE?
>
> TIA,
> Nancy

IE6 doesn't play well with the pseudo classes :hover etc. on anything but  
the 'a' anchor tag.
You can easily bring it into line with the help of a little piece of  
javascript compliments of Suckerfish.
http://www.htmldog.com/articles/suckerfish/hover/
This code works for your example, you will see there is a change to your  
rule for the hover.
The script works well as an external file and I usually call it with a  
conditional comment aimed at 'lt IE 7'

<style type="text/css">
/*<![CDATA[*/
div#popup a span {
   display: none;
}
div#popup a:hover span, div#popup a.sfhover span {
   display: block;
   position: absolute;
   top: 150px;
   left: 330px;
   width: 300px;
   padding: 5px;
   margin: 10px;
   z-index: 100;
   color: #000000;
   background-color: ffffcc;
   font: 10px arial;
   text-align: left;
   border: 1px solid #000000;
}
/*]]>*/
</style>
<script type="text/javascript">
/*<![CDATA[*/
sfHover = function() {
        var sfEls = document.getElementById("popup").getElementsByTagName("a");
        for (var i=0; i<sfEls.length; i++) {
                sfEls[i].onmouseover=function() {
                        this.className+=" sfhover";
                }
                sfEls[i].onmouseout=function() {
                        this.className=this.className.replace(new RegExp(" 
sfhover\\b"), "");
                }
        }
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
/*]]>*/
</script>

Duncan
______________________________________________________________________
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/