|
|
Posted by Jonathan N. Little on 11/05/07 17:56
VUNETdotUS wrote:
> On Nov 4, 11:11 pm, "rf" <r...@invalid.com> wrote:
>> "VUNETdotUS" <vunet...@gmail.com> wrote in message
>>
>> news:1194234703.239651.40020@y42g2000hsy.googlegroups.com...
>>
>>
>>
>>> On Nov 3, 11:59 pm, "rf" <r...@invalid.com> wrote:
>>>> "VUNETdotUS" <vunet...@gmail.com> wrote in message
>>>> news:1194154270.287801.272110@19g2000hsx.googlegroups.com...
>>>>> Why IE6 shows absolutely positioned links under div, even if z-index
>>>>> or order is applied?
>>>>> Please, suggest a fix:
>>>>> http://www.vunet.us/wic/test/ztop.asp-mouseover My Test link
>>>> For IE you must specify the z-index for both the ul *and* the li that
>>>> contains it.
>>>> --
>>>> Richard.
>>> ok. a bit more playing with z-index and we are done. it is fixed.
>> I was just about to tell you so :-)
>>
>> Does not work at all in IE7 though.
Your csshover.htc seems a bit complicated. I have a simpler version that
I adapted from Vladdy...demonstrated on a mouseover effect on the images
of this page:
http://www.littleworksstudio.com/CSTC2007.php
The Canadian Scottish Terrier Club 2007 Fundraiser
All you have to do is add the MS proprietary CSS property
behavior: url(IEFixes.htc);
on whatever element that you want to hover, you can restrict it to just
the class subset of elements to the HTC doesn't scan the whole DOM
UL.menu { behavior: url(IEFixes.htc); }
then for whatever your hovered element is add the special .hover class
for IE
UL.menu:hover,
UL.menu.hover { ...}
The file IEFixes.htc:
<public:component>
// For MSIE use JScript to attach JS functions to compensate
// for missing pseudo-class support
// from Vladdy http://www.vladdy.net/Demos/IEPseudoClassesFix.html
// updated for html4.01 jnl 3/06
<public:attach event="onmouseover" onevent="DoHover()">
<public:attach event="onmouseout" onevent="RestoreHover()">
<public:attach event="onmousedown" onevent="DoActive()">
<public:attach event="onmouseup" onevent="RestoreActive()">
<script type="text/jscript">
function DoHover(){
element.className += ' hover';
}
function DoActive(){
element.className += ' active';
}
function RestoreHover(){
element.className = element.className.replace(/\shover\b/,'');
}
function RestoreActive(){
element.className = element.className.replace(/\sactive\b/,'');
}
</script>
</public:component>
--
Take care,
Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com
[Back to original message]
|