Grow your CSS skills. Land your dream job.

csshover in ie6 (solved)

  • # December 11, 2008 at 2:33 am

    hey chris i have a question for you are anyone familar with the issue,
    basicly im having an issue with using hover in ie6 (excluding anchor links). after extensive searching, i found and article where chris mentions a fix using csshover.htc, and gives a link to the arthors page.
    after following the link and following the arthor instructions, after a few hours i finally got the fix to work in ie6 (im a newbie). basicly what i did was added the

    Code:
    body {behavior: url(csshover.htc);}

    to my css and saved the csshover.htc file in my root folder. this is what is kinda working for me now. the reason i was having so much trouble before was because i was insistant on saving the file in my theme folder with the actual css file.

    which leads me to my problem. i am using wordpress and it seem that this hack is working in ie6 but only on the home page of my site (rollover is in the header). when i click on any of the pages, then try to click my rollover header, it doesnt work.

    any suggestions, anyone.

    # December 12, 2008 at 3:46 pm

    Is there not any one familar with this issue? I’ve been searching all over and have even contacted the author of the fix.
    Again I’m just trying to get a hover image I’m in my header to work on pages other than my home page, and in ie6. I’m using wordpress.

    # December 12, 2008 at 4:18 pm

    I’ve had trouble getting csshover.htc to work in the past. Here’s an alternative method I recently used:

    First, create an IE6-only stylesheet and link to it in your <head>:

    Code:

    In that stylesheet, add a selector like this, which contains any non-anchor element that you want to use the hover effect on:

    Code:
    li, div.box {
    behavior: expression(
    this.onmouseover = new Function(“this.className += ‘ hover'”),
    this.onmouseout = new Function(“this.className = this.className.replace(‘ hover’,”)”),
    this.style.behavior = null
    );
    }

    So in the above example, any time the user hovers over a list item or a div with the class "box", a class "hover" will be applied to that element.

    Now just style your hover however you want, only using .hover (the class) instead of :hover:

    Code:
    li {color: #000;}
    li.hover {color: #666}

    This is essentially what csshover.htc does anyway, but I’ve had this method work for me when csshover.htc hasn’t in the past (I don’t know why). Give it a try.

    # December 12, 2008 at 9:57 pm

    daguy, thanks for replying,

    Im wondering if i can use the method that you described to target my #header id (instead of the class box or a list). The background of the header id is where i have my image located at, that im trying to use as a rollover (sprite).
    is this possible? i tried to make a few changes to the ie6.css file, but im afraid that there is still much im learning.
    if your familar with how this might work, i would appreciate any instructions and will surely try it.

    thanks again.

    # December 12, 2008 at 10:14 pm

    One thing you should look into using is Dean Edwards IE7 script:
    http://dean.edwards.name/IE7/

    Forces IE6 to behave a lot smarter, allowing for :hover’s on elements that it normally wouldn’t work on (among many many other fixes).

    # December 13, 2008 at 2:30 am

    thanks chris,
    that dean edwards code did it with ease.

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".