CSS Menu problem

Discussion in 'HTML' started by Ingo Schmidt, Mar 26, 2007.

  1. Ingo Schmidt

    Ingo Schmidt Guest

    Hi everyone!

    I created a menu purely based on CSS. The basic functionality is there,
    but I do have so many problems with the different browsers and I have
    absolutely no idea where to start looking. I hope someone here can help
    me. Here is a sample of the site:

    http://www.der-ingo.de/test/css-menu/rev1/index.php.htm

    The problems I encounter are these:

    Firefox 1.5.0.11:
    - Menu entries are not full width. I don't see why.


    Firefox 2.0.0.3:
    - Go to menu "Gruppenkalender", scroll right down, place the mouse 1 or
    2 pixels below "Uni" and then click. How can I prevent this? How is this
    even possible?


    Internet Exploder 5 and 6:
    Everything is totally f*cked up. Haven't looked into it, probably needs
    its own CSS file. Do not bother.


    Internet Exploder 7:
    The vertical scrollbar seems to be displayed inside the block element,
    causing a horizontal slider to be shown, too. How can I prevent this?


    Opera 9.10:
    - A horizontal scrollbar is always shown. You can scroll 1 pixel with
    it. Great. How do I prevent this?
    - Sometimes, not always, the menu already closes, even I am still
    hovering over the horizontal scrollbar.
    - In the Menu "Gruppen" or "Gruppenkalender" try to select the very last
    entry ("Uni"). What on earth is going on here?


    I am totally stuck. According to W3C Validator everything is 100% valid
    HTML and CSS.
    Any hints how I can get the browsers to do what I want? Is it at all
    possible to do a menu like this? JavaScript is absolutely not an option!

    Am I doing something horribly wrong or are the browsers just so messed up?!


    Cheers, Ingo =;->
    Ingo Schmidt, Mar 26, 2007
    #1
    1. Advertising

  2. Ingo Schmidt

    John Hosking Guest

    Ingo Schmidt wrote:
    > Hi everyone!


    Hi Ingo!

    > I created a menu purely based on CSS. The basic functionality is there,


    Do you mean basic drop-down *menu* functionality, or is the code
    supposed to do some other, unnamed tricks? Because if something is
    supposed to happen with the long list of Gruppe link divs, I don't see
    the connection. Likewise, the form seems unrelated. Neither the form nor
    the links seem functional, so either they shouldn't be on your
    simplified test page or I'm too simple to see the relevance (likely!).

    > but I do have so many problems with the different browsers and I have
    > absolutely no idea where to start looking. I hope someone here can help
    > me. Here is a sample of the site:
    >
    > http://www.der-ingo.de/test/css-menu/rev1/index.php.htm


    Hmm, php or htm? Can't decide; I'll do both. ;-)

    > The problems I encounter are these:
    >
    > Firefox 1.5.0.11:
    > - Menu entries are not full width. I don't see why.


    I don't see what you mean. Full width of what? I don't see any clipping.
    >
    >
    > Firefox 2.0.0.3:
    > - Go to menu "Gruppenkalender", scroll right down, place the mouse 1 or
    > 2 pixels below "Uni" and then click. How can I prevent this? How is this
    > even possible?


    I prevented it (whatever it is) by not having FF 2 on this machine. No
    idea how "it" could be possible.

    Firefox 1.0.7: Drop-downs appear when when I hover over "Benutzer",
    "Gruppen", "Persönliche Kalender", or "Gruppenkalender", but disappear
    when I stop hovering over those items. That is, the menus vanish when I
    try to use them.

    > Internet Exploder 5 and 6:
    > Everything is totally f*cked up. Haven't looked into it, probably needs
    > its own CSS file. Do not bother.


    Problably needs its own HTML too. Do you know that IE pre-7 does not
    support :hover on elements besides <a>? So your design using hovered
    divs (e.g., .dropmenu:hover) won't work for these browsers.

    IE6: Horizontal scrollbar on the page always present.


    > Internet Exploder 7:


    It's "Explorer". With an R instead of a D.

    > Opera 9.10:
    > - A horizontal scrollbar is always shown. You can scroll 1 pixel with
    > it. Great. How do I prevent this?
    > - Sometimes, not always, the menu already closes, even I am still
    > hovering over the horizontal scrollbar.
    > - In the Menu "Gruppen" or "Gruppenkalender" try to select the very last
    > entry ("Uni"). What on earth is going on here?


    Opera 7.23: Drop-downs appear when when I hover over "Gruppen" or
    "Gruppenkalender" not when I hover over "Benutzer" or "Persönliche
    Kalender". No vertical scrollbar for the over-long drop-downs.
    Horizontal scrollbar on the page always present.

    This might be related to the width:10000px you've placed on the
    #navigationbar. I've only got 1280 pixels on my little screen. :-(

    Netscape 7.1: Frame *outlines* of drop-downs appear when when I hover
    over "Benutzer", "Gruppen", "Persönliche Kalender", or
    "Gruppenkalender", but the actual menu items do *not* appear. There's
    just an empty outline (with vert. scrollbars for 2 & 4) where a
    drop-down list might be. The invisible items are clickable though!

    > I am totally stuck. According to W3C Validator everything is 100% valid
    > HTML and CSS.


    Which only means you've got valid syntax.

    > Any hints how I can get the browsers to do what I want? Is it at all
    > possible to do a menu like this? JavaScript is absolutely not an option!
    >
    > Am I doing something horribly wrong or are the browsers just so messed up?!


    Between the two of us, we have tested nine browsers, and your page works
    in zero of them. What conclusions should we reasonably draw here? :p

    I would have started with a menu from Listamatic
    http://css.maxdesign.com.au/listamatic/ and then, as needed, modified
    this or that. One feature of the Listamatic site is a table of
    compatibilities for the techniques used. Maybe start over, there?

    HTH. Viel Glück!
    --
    John
    John Hosking, Mar 26, 2007
    #2
    1. Advertising

  3. Ingo Schmidt

    Ingo Schmidt Guest

    Hi John!

    First of all, thanks for looking into it :)

    > Do you mean basic drop-down *menu* functionality, or is the code
    > supposed to do some other, unnamed tricks?


    No, it is just about the menu. All I want is the menu to be displayed
    properly and to be usable.
    All the links are stripped of their functionality, because it is not
    needed to demonstrate the issues I have.

    > Likewise, the form seems unrelated. Neither the form nor
    > the links seem functional, so either they shouldn't be on your
    > simplified test page or I'm too simple to see the relevance (likely!).


    All functionality except the menu was stripped from the site. I was too
    lazy to put some fake content there, that is all.

    > Hmm, php or htm? Can't decide; I'll do both. ;-)


    The original site was php. When it was saved, it got this extension. I
    was too lazy to change it.

    > I don't see what you mean. Full width of what? I don't see any clipping.


    Menu entries are placed in a div of class "menubox". Usually the width
    of each menu entry is as wide as the width of the menubox div. This is
    true for FF 1.0.7 and FF 2, but not FF 1.5. So what am I to think of that?!

    > I prevented it (whatever it is) by not having FF 2 on this machine. No
    > idea how "it" could be possible.


    Very funny ;-)
    Ok, let's describe for those without FF 2.
    If you click on a link in the menu, FF 2 will draw some "focus box"
    around that link (link has property "display:block;"). This box now
    triggers the scrollbars (horizontal and vertical) to be drawn. I wonder why.
    This has the negative side effect that on the spot where you had
    clicked, there is now the horizontal scrollbar, and the click, that was
    originally *on the link*, now seems to go on the scrollbar and thus has
    no effect.
    I really do wonder how this is possible, since Firefox DID notice that
    the click was actually on the link. Or why else would it have drawn this
    "focus box"?

    > Firefox 1.0.7: Drop-downs appear when when I hover over "Benutzer",
    > "Gruppen", "Persönliche Kalender", or "Gruppenkalender", but disappear
    > when I stop hovering over those items. That is, the menus vanish when I
    > try to use them.


    Ok, I think I know how I can fix this. Haven't tried it with that an old
    browser.

    > Problably needs its own HTML too. Do you know that IE pre-7 does not
    > support :hover on elements besides <a>? So your design using hovered
    > divs (e.g., .dropmenu:hover) won't work for these browsers.


    Oh crap! No, I didn't know. Well, I have to say, I am ready to exclude
    these browsers. At least for now. Once it works on decent browsers, I
    may consider a workaround for IE 5 + 6, too.

    > It's "Explorer". With an R instead of a D.


    Yeah, but my naming comes closer to what it actually does, don't you
    think? ;-)

    > This might be related to the width:10000px you've placed on the
    > #navigationbar. I've only got 1280 pixels on my little screen. :-(


    Oh, this was only in there as a test, since "width:100%;" failed, I
    think. But why should this affect the menu? #navigationbar is fixed and
    thus its width shouldnt really, matter, should it?

    > Netscape 7.1: Frame *outlines* of drop-downs appear when when I hover
    > over "Benutzer", "Gruppen", "Persönliche Kalender", or
    > "Gruppenkalender", but the actual menu items do *not* appear. There's
    > just an empty outline (with vert. scrollbars for 2 & 4) where a
    > drop-down list might be. The invisible items are clickable though!


    Interesting... Haven't even thought about NetScape. Thanks for testing.
    I will have to look into this browser then, too... Good lord...

    > Which only means you've got valid syntax.


    Yes, I only mentioned this to prevent people from having to check this
    and make them look into the real problem not some kind of
    maybe-teeny-tiny CSS violation ;-)

    > Between the two of us, we have tested nine browsers, and your page works
    > in zero of them. What conclusions should we reasonably draw here? :p


    My reasoning was this:
    My page actually does work fine in FF2, IE7 and Opera 9.10, *except* for
    very minor, but nevertheless annoying, glitches.
    So I thought, this can't be that wrong, it just needs some minor (and in
    case of IE6 or older browsers major) tweaking.
    What tweaking this would have to be I didn't find out since I am not a
    CSS expert. That's why I came here.

    > I would have started with a menu from Listamatic
    > http://css.maxdesign.com.au/listamatic/ and then, as needed, modified
    > this or that. One feature of the Listamatic site is a table of
    > compatibilities for the techniques used. Maybe start over, there?


    Had I known this page, I would have looked there. However, I only found
    exactly ONE such list as I need it on this page. It is the PureCSS hover
    list. That one does not work correctly in ANY of the Microsoft browsers.

    I still think my approach has a chance. It does need some tweaking, I am
    sure. I just need some hints as to which tweaks these may be.

    > HTH. Viel Glück!


    Danke :)

    Cheers, Ingo =;->
    Ingo Schmidt, Mar 27, 2007
    #3
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Paul F. Johnson

    css menu problem

    Paul F. Johnson, Sep 29, 2003, in forum: HTML
    Replies:
    4
    Views:
    470
    Toby A Inkster
    Sep 29, 2003
  2. Chris Leonard

    CSS Menu Lists Problem

    Chris Leonard, Oct 26, 2003, in forum: HTML
    Replies:
    2
    Views:
    476
    Chris Leonard
    Oct 27, 2003
  3. Neo Geshel
    Replies:
    81
    Views:
    2,882
    diecleartype
    Jul 10, 2006
  4. Chancel

    menu problem / Cool menu

    Chancel, Sep 25, 2003, in forum: Javascript
    Replies:
    0
    Views:
    136
    Chancel
    Sep 25, 2003
  5. Replies:
    1
    Views:
    203
    Randy Webb
    Feb 19, 2006
Loading...

Share This Page