SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Member
    Join Date
    Feb 2007
    Posts
    21
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Flyouts in IE 6 - Suckerfish hack

    Here's my test page:
    http://test.catapult-creative.com

    I followed this tutorial for the box model stuff:
    http://www.tanfa.co.uk/css/examples/menu/tutorial-v.asp

    Here's the Suckerfish hack I used:
    http://www.alistapart.com/articles/dropdowns/

    PROBLEM:
    I'm using the "suckerfish" DOM scripting technique of manually adding an appropriate class to the <li>s via onmouseover/onmouseout, but I'm not getting the actual flyouts -- just the hovers on the first-order list items. I'm sure this has something to do with box model issues, but hacking those in IE 6 has never been my strong suit.

    COMPATIBILITY
    Works as expected in Firefox 2 and 3, Safari 3, Opera, and IE 7.

    Wizards of CSS, please illuminate if you can!

    Beer's on me if you're in DC...

  2. #2
    Design Your Site Team bronze trophy Erik J's Avatar
    Join Date
    May 2007
    Location
    Countryside, Sweden
    Posts
    3,407
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It is simply a matter of specificity, add #nav to this selector:
    Code:
    #nav li:hover ul, #nav li.over ul {
    	display: block;
    }
    Happy ADD/ADHD with Asperger's

  3. #3
    SitePoint Member
    Join Date
    Feb 2007
    Posts
    21
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hey thanks for the help! Interesting that #nav is required in IE 6 but not in the other browsers. I didn't think there would be any rule super-ceding this one, since I targeted it from an ID -- any idea how exactly IE 6 is handling specificity differently?

  4. #4
    Design Your Site Team bronze trophy Erik J's Avatar
    Join Date
    May 2007
    Location
    Countryside, Sweden
    Posts
    3,407
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It is not handling it differently here.

    The specificity was:
    "#nav ul ul" is ranking: 100, 1, 1, This rule removes the sublist.
    "#nav li:hover ul" is ranking: 100, 1, 10, 1, This selector specificity has more weight, but IE6 doesn't hover on li.
    "li.overl ul" is ranking: 1, 10, 1, The weight is lesser than for the above selector, in IE6 list is still removed.

    Code:
    #nav ul ul {
    	display: none;
    	position: absolute;
    	top: 0;
    	left: 100&#37;;
    	width: 100%;
    }
    
    #nav li:hover ul, 
    li.over ul { /* need more specificity to override */
    	display: block;
    }
    Happy ADD/ADHD with Asperger's


Tags for this Thread

Bookmarks

Posting Permissions

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