Do you have a question? Post it now! No Registration Necessary. Now with pictures!
- Posted on
- CSS Menu problem
- Ingo Schmidt
March 26, 2007, 10:02 am
rate this thread
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:
The problems I encounter are these:
- Menu entries are not full width. I don't see why.
- 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
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?
- 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
Am I doing something horribly wrong or are the browsers just so messed up?!
Cheers, Ingo =;->
Re: CSS Menu problem
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!).
Hmm, php or htm? Can't decide; I'll do both. ;-)
I don't see what you mean. Full width of what? I don't see any clipping.
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.
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.
It's "Explorer". With an R instead of a D.
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!
Which only means you've got valid syntax.
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!
Re: CSS Menu problem
First of all, thanks for looking into it :-)
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
All functionality except the menu was stripped from the site. I was too
lazy to put some fake content there, that is all.
The original site was php. When it was saved, it got this extension. I
was too lazy to change it.
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?!
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
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
Ok, I think I know how I can fix this. Haven't tried it with that an old
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.
Yeah, but my naming comes closer to what it actually does, don't you
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?
Interesting... Haven't even thought about NetScape. Thanks for testing.
I will have to look into this browser then, too... Good lord...
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 ;-)
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.
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.
Cheers, Ingo =;->
- » Possible to change appearance of radio button with css?
- — Next thread in » HTML Markup Language