CSS Menu problem

[Ingo Schmidt]

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 =;->

 

[John Hosking]

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?

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!

 

[Ingo Schmidt]

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?

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 =;->