Korrekte Höhenangabe für <menu>-Element

FinnO · Verfasst: Fr 18.01.13 16:44

Moin,

muss man warme Worte finden, wenn man den ersten Thread in einem Unterforum eröffnet? Mir fallen keine ein.

Ich baue mir gerade ein Dropdown-Menü mit reinem HTML5 und CSS, dabei gehe ich im wesentlichen nach dieser Anleitung vor. Das ganze Menü funktioniert auch wie gewünscht, jedoch wird der <menu>-Tag erstens in unterschiedlichen Browsern unterschiedlich hoch und zweitens höher als das beinhaltete Element gerendert.

Zum selber Angucken und Firebuggen, habe ich die Datei hier hochgeladen.

Hier einmal ein paar Beispiele als Bilder:

Darstellung im Firefox:
menu_ff

Darstellung in Chrome:
menu_ch

Gewünschte Darstellung [Fixe Höhe 34px in Firefox, man beachte: Chrome zeigt keinen Rand mehr an, wenn die Höhe 32px beträgt.]
menu_ff_34px

Hat jemand Ideen, wie ich den grauen Rand wegbekomme?

LG

Einloggen, um Attachments anzusehen!

Christian S. · Beiträge: 20451 Erhaltene Danke: 2264 Win 10 C# (VS 2019)

Wenn ich bei menu ul das display: inline-block deaktiviere, sieht es bei mir in Chrome, Waterfox und IE gut aus.

_________________
Zwei Worte werden Dir im Leben viele Türen öffnen - "ziehen" und "drücken".

FinnO · Verfasst: Sa 19.01.13 15:01

Hallo Christian,

das behebt bei mir das Problem nur in Firefox, nicht jedoch in Chrome. Danke trotzdem schoneinmal für deine Hilfe

LG

Regan · Verfasst: Sa 19.01.13 15:04

Also bei mir sieht das im Chrome (24) perfekt aus:
dropdown

Einloggen, um Attachments anzusehen!

FinnO · Verfasst: Sa 19.01.13 15:49

Moin Regan,

das ist in der Tat merkwürdig. Tatsächlich wird das Element bei mir auch korrekt dargestellt, wenn ich den display-style mit Firebug unter Chrome deaktiviere. Nehme ich die entsprechende Zeile jedoch aus der css-Datei, stellt lediglich Firefox das Element korrekt dar. Verrückt! :shock:

EDIT: ich nehme alles Zurück und behaupte das Gegenteil. Hatte noch den 34px height fix drinne! :oops:

LG

	Mitgliederliste
	Gruppen
	Das Team
	Richtlinien
	Synonyme