At http://03.infocopa.com/programmes/efficacite.html , you'll find a little
"note" icon in the second paragraph, right after "dans le monde". In
Firefox, hovering over the icon displays a footnote, as a block positioned
right next to the icon. In IE, unfortunately, the hover doesn't work.
I know that IE only supports :hover on links, so I coded as follows:
<p>Le Projet ESPACE est reconnu [blah blah] dans le monde. <a
class="inline-footnote" href="" onClick="return false"><span>Les projets
ESPACE sont établis [blah blah] et l’Afrique.</span></a> En tant que
tel, il a été beaucoup étudié.</p>
The link contains a span with display: none. When hovering, a different rule
changes the span's display to block:
a.inline-footnote {
position : relative; /* set anchor for absolutely-positioned popup */
padding-left : 16px; /* room to display icon as background-image */
}
a.inline-footnote span {
display : none;
}
a.inline-footnote:hover span {
position : absolute;
left : 16px;
top : 0;
display : block;
width : 12em;
padding : 0.5em;
border-width : 1px;
font-size : 0.75em;
line-height : 1.1em;
}
It validates and works fine in Firefox. As I said, in IE the hover has no
effect. Thanks for any suggestions.
______________________________________________________________________
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
