SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Enthusiast
    Join Date
    Feb 2007
    Posts
    39
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Suckerfish dropdowns vanishing unexpectedly, IE6

    Hello!

    I've been trying to solve this problem literally all day, and will likely need to continue tomorrow...so I thought I'd see if anyone here has experienced something similar, and maybe save myself another day's frustrations.

    I'm using the Son of Suckerfish dropdown menu code to put together a horizontal dropdown navigation system at the top of my screen.

    I've got it working flawlessly in Firefox, Opera, and IE7. In IE6, however, things are different. When I hover over the parent list items, the dropdown does in fact pop up as expected...but when I try to move onto it, it vanishes suddenly.

    There's only one thing about my markup that seems unusual to me; other than that, it's pretty much standard Suckerfish. The unusual part is the source code order...the <ol id="nav"> element occurs very late in the source code, after all the page content...but it needs to appear at the very top of the visually-rendered page. Currently I'm accomplishing this by absolutely positioning it, a la...

    Code:
    #nav {
       position:absolute;
       top:-292px;
    }
    That #nav element is inside a larger relatively positioned <div> which also contains the page content (first in source order, floated to the right) and a sidebar (second in source order, floated to the left).

    I've tried to create a simplified use case for this, but I can't seem to reproduce the error without the complete page. That will probably be my next task tomorrow morning.

    I realize it's a long shot that anyone will be able to debug this without more sample code...but if this sounds even remotely familiar to you, please let me know what you think I ought to try. And if that doesn't work, I'll keep trying to reproduce it with simpler code.

    Thanks for any help you can offer!

    Adam Jensen

  2. #2
    SitePoint Wizard bronze trophy Tyssen's Avatar
    Join Date
    Oct 2005
    Location
    Brisbane, QLD
    Posts
    4,067
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Not going to be able to help without a link to the page.

  3. #3
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,287
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    Suckerfish relies on I think using position: relative on the li's (which screws with IE7 if you take out the Javascript), but I wonder if you can modify Suckerfish (like Suzy did to acomodate IE7) so that the menu itself is position: relative (and in your case, position: absolute), remove position: relative from the li's and instead add a haslayout trigger on the li:hover part (have a seperate declaration and give it something to see, like:
    Code:
    #menu li:hover {
      position: relative;
      z-index: 1;
    }
    (you'd add the sfhover in there too, I just don't use it-- the reason we found Suckerfish not to work in IE7 was when you took the JS out)

    That said, I seem to vaguely remember an IE6 bug with position: absolute and :hover. And I think the answer was, you needed to set Haslayout on the subs as well, because hovering on stuff can change whether something has Layout or not, making stuff disappear.

    There's another related bug (or maybe the same bug) with absolutely positioned things next to floats, and sometimes the absolutely positioned thing needs another container. It would really depend on what you've got in your code.

  4. #4
    SitePoint Enthusiast
    Join Date
    Feb 2007
    Posts
    39
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    @Tyssen:
    I understand; I would have provided a link, but it's a new site and I'm not allowed to publish it until it works in all the major browsers

    @Stomme poes:
    Thanks for your suggestions; I really need to spend some more time researching the magic of hasLayout. Unfortunately it didn't fix the problem yet; it looks like I'm going to need to spend some more time trying to reproduce the bug in simpler code. Regardless, I appreciate your taking the time to make a concrete suggestion.

    I will try to post some concrete reproduce code here shortly; in the meantime, if anyone else has any other suggestions, they're more than welcome.

    Thanks!

  5. #5
    SitePoint Enthusiast
    Join Date
    Feb 2007
    Posts
    39
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    OK, more news. I found the culprit, and it's got nothing to do with anything I expected. Isn't that how it always works, after all?

    I wanted to have semi-transparent backgrounds on the dropdown menus, which necessitated the use of PNG images; in order to ensure that these backgrounds functioned properly in IE6, I put the following in a separate stylesheet (which, via conditional comments, is only used by IE6 and lower):

    Code:
    #nav li ol {
        background-image:none;
        filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true,src='/public/images/mostly-opaque.png',sizingMethod=scale);
    }
    If I remove this code, the menus work correctly (albeit without the background image I wanted). So it would appear that the issue is with the filter property.

    As a quick fix, I'm going to remove the filter and change the background color to solid white; it'll only affect IE6, and it'll give my users a menu they can live with. And if they upgrade to a standards-compliant browser with full transparent PNG support, well, that's better. Graceful degradation, right?

    Meanwhile, if anyone can think of a way to have both my transparent menu backgrounds AND functioning Suckerfish dropdowns, please let me know.

    Thanks again for your help!

  6. #6
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,287
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    Nope, there's just a few things you can't do with transparent PNGs... clicking on them often pukes, as well as tiling the image also pukes. As far as I know this is also a problem with PNGfix (a Javascript used for png's in IE6)

    Depending on what you're using the semi-transparency for, you could maybe fake it with a pixellated gif. If you go to CSS Zen Garden and go to the design called Bonsai Sky (I think the easiest way to find it is with Google), on the right side there's a pixellated gif, making a semi-transparent dark background for white text. The author there decided to give that to all browsers, but you could just as easily
    #nav li ol {
    ...stuff...
    background: url(transparent.png) 0 0 no-repeat;
    }
    and then
    * html #nav li ol {
    background: url(transparent.gif) 0 0 no-repeat;
    }

    In any case, there are quite a few threads around here about clickable transparent png's with PNGfix/filter... maybe someone's come up with a way around it, but so far as I remember, no-one has.


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
  •