Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7

Thread: hover.htc

  1. #1
    New to the CF scene
    Join Date
    May 2007
    Location
    Berlin G
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    hover.htc

    Hello fellow coders,

    I am trying to jump start the hover behaviour for IE6 so I can put some nice clean drop down menus on a site for a friend and am having trouble. I really don't know what I am doing wrong. The test menu can be seen at http://mrmusichead.com/test

    It works nicely in IE7 and Firefox but nothing works in IE6

    I have put the following in my dropstyle.css file: (all placed in the root folder with the hover.htc file and index)

    Code:
    .hover {behavior:url(hover.htc)}
    and then used the the class .hover on my list items.....

    I also tried spanning the whole UL with that class but to no avail.

    Does anyone have any tips or ideas?

    I am pulling my hair out and getting ready to do nasty things to Microsoft like maybe boycotting their products or worse....

    Thanks in advance

    $

  • #2
    Senior Coder koyama's Avatar
    Join Date
    Dec 2006
    Location
    Copenhagen, Denmark
    Posts
    1,246
    Thanks
    1
    Thanked 5 Times in 5 Posts
    You are trying to use a behavior as a replacement for the li:hover pseudo class which is not supported in IE6.

    I wouldn't say that I have much experience with behaviors, but it appears that you are using the technique from this page.

    From that page it should be clear what is missing in your document. For your hover.htc to function right you would have to add a non-standard attribute to you li:
    Code:
    <li class="hover" classover="over">...</li>
    .hover is used to select elements that should get the behavior attatched, an .over is used to specify styles for the hovered state.

    Besides that, you would need to increase specificity for one of your selectors. Add the red part:
    Code:
    #menu li:hover ul, #menu li.over ul { /* lists nested under hovered list items */
    	display: block; 
    }
    With all that said, I think that there are better menus available. Unfortunately, I must leave it someone else to suggest you a better one since I don't have much experience with this.

  • #3
    Regular Coder kewlceo's Avatar
    Join Date
    Mar 2006
    Location
    California, US
    Posts
    484
    Thanks
    1
    Thanked 3 Times in 3 Posts
    Take a look at this solution: Whatever:Hover.
    Last edited by kewlceo; 05-20-2007 at 02:16 AM.
    UBERHOST.NET
    Shared, reseller, semidedicated hosting and dedicated server plans.
    DirectAdmin • Installatron • Money-Back Guarantee • 24/7 Support
    Providing "Service Above All Else" since 2005.

  • #4
    New to the CF scene
    Join Date
    May 2007
    Location
    Berlin G
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    seems to work but......

    Excellent, thanks for the tips, adding the over bit really sorted it out. Now the secondary lists drop down in IE6 but one little problem is as soon as you mouseover them, they stop being a block and they all jump over to display inline under the list except to the right where they run out of space. The test menu is here.

    In IE7 I just needed to play around with the position in a conditional statement, Mozilla of course is grand but IE6 as expected has packed up and made me wonder yet again why I am trying this solution.

    Anybody have any ideas why the heck that is working the way it is? Don't know if it has to do with the float of the menu items or???

    frustrated yet again but maybe I am starting to see the light at the end of the tunnel.

    Thanks again

    $

  • #5
    New to the CF scene
    Join Date
    May 2007
    Location
    Berlin G
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    same in IE7

    Uh Oh, it seems to be doing the same in IE7 now too.

    When I had the Suckerfish Java in the ehader it did it and stopped as soon as it was removed, now it seems the hover.htc file is causing this strange behavior.....

    Is it me or am I wasting my time?

    $

  • #6
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Why are you even using a behavior file? You are making this harder than it has to be. Read this http://alistapart.com/articles/dropdowns/
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #7
    Senior Coder koyama's Avatar
    Join Date
    Dec 2006
    Location
    Copenhagen, Denmark
    Posts
    1,246
    Thanks
    1
    Thanked 5 Times in 5 Posts
    Quote Originally Posted by scubadollar View Post
    Now the secondary lists drop down in IE6 but one little problem is as soon as you mouseover them, they stop being a block and they all jump over to display inline under the list except to the right where they run out of space.
    This is due to a bug in IE6. For an auto-width absolutely positioned element IE6 generally arrives at wrong results for the calculated width. I think that IE6 bases its calculations on nearest block-level ancestor instead of the nearest positioned block-level ancestor. Furthermore, in case this ancestor block is an auto-width float, IE6 takes the width of this element as if it was non-floated. It is this bug that gives you the problem.

    Your affected elements are the secondary ul elements. They are auto-width and absolutely positioned while having an auto-width floated parent (the primary li elements).

    If you compare what you have with the example from the article that Aero posted you will notice that the li elements are given an explicit width. Doing this would solve your problem too. But I agree with Aero that you probably should get rid of that behavior.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •