Not signed in (Sign In)

SkillShare - A place to discuss Web Standards and Web Design topics

Categories

Vanilla 1.1.5a is a product of Lussumo. More Information: Documentation, Community Support.

CSS & HTML: Problem with horizontal dropdown menu

Bottom of Page

1 to 4 of 4

  1.  
  1.  permalink
    Hi there,

    I have a navigation with text replaced by images.

    http://www.improve-holding.de/workspace/navi/navigation.html

    In FF it looks great, in IE 6/7 it doesn't work.

    If I comment the line 'text-indent: -9999px' out, it seems to work in IE, but the link-text is now visible.

    Any idea how to solve this? Or links to other navigation-styles like this?

    Thanks,

    regards, Eric
  2.  permalink
    Uups, I forgot: The submenu doesn't appear in IE (Über uns, Kontakt).
    • CommentAuthork3liutZu
    • CommentTimeJan 24th 2008
     permalink
    have hasLayout active on the li elements

    This is a good hack for setting hasLayout to true. Or you could set a height/width or there are a number ofother options regarding this.
    Setting display: inline-block; to an element triggers hasLayout, and then you can reset the display property, but hasLayout remains active


    css:

    ul#navigation li { display: inline-block; }
    ul#navigation li { display: inline; }
    • CommentAuthork3liutZu
    • CommentTimeJan 24th 2008
     permalink
    oh, another thing, IE doesn't suppor the :hover pseudoclass on any other element besides < a >. So you will need to have js emulate this for you

    example:


    var li = document.getElementById('navigation').getElementsByTagName('li');
    for (var i=0;i<=li.length;i++){
        li[i].onclick = IEhover(li[i]);
    }


    function IEhover(elem){
        if (elem.className == 'active') elem.className = ''
        else elem.className = 'active';
    }


    This should be called on load

1 to 4 of 4

  1.  
Add your comments
    Username Password
  • Format comments as (Help)
 
Back to Discussions Top of Page