[Erledigt] IE Quirks Modus und Menu

chunky · 07.02.2010, 19:37

Es ist ja mittlerweile üblich, Menus mit Unordered Lists horizontal nebeneinander zu programmieren.
Funktioniert prima. Aufgrund einer Debug-Nachricht des Zend Caches wird meine Seite jedoch im Internet Implorer mit dem sog. Quirks Modus gerendert (weil noch vor dem Doctype die Debug-Nachricht ausgegeben wird).

Kennt jemand einen CSS/HTML-Code für ein unordered lists Menu, der auch im IE Quirks Modus noch funktioniert?

Mein Code sieht so aus:

Code:

/*** menu ***/
#menu-container{
	height:28px;
	background-color:#eaeaea;
	width:100%;
}
.menu-item{
	padding-left:20px;
	padding-right:20px;
	color:#2f2f2f;
	font-family: Arial Narrow,Arial,Verdana,sans-serif;
	font-size:16px;
	text-transform:uppercase;
}
#menu li
{
	display: inline;
	list-style-type: none;
	list-style:none;
	display: table-cell;
	vertical-align:middle;
	height:28px;
}
#menu li:hover
{
	color:#FFFFFF;
	background-color:#666666;
	background-image:url('img/menu-updates.jpg');
}

#menu .home:hover
{
	background-color:#666666;
	background-image:url('img/menu-updates1.jpg');
	color:#FFFFFF;
}
#menu .seite2:hover
{
	background-color:#666666;
	background-image:url('img/menu-updates2.jpg');
	color:#FFFFFF;
}

#menu li a,#menu li a:visited
{
	color:#2f2f2f;
	text-decoration: none;
}
#menu li a:hover,#menu li a:visited:hover
{
	color: #FFFFFF;
	text-decoration: none;
}
/*** menu ***/

<div id="menu-container" align="left">
		<ul id="menu">
			<li class="menu-item" id="home">
				<a href="/index.html">Home</a>
			</li>
			<li class="menu-item" id="seite2">
				<a href="/seite2.html">Seite 2</a>
			</li>
		</ul><!-- /menu -->
</div><!-- /menu-container-->

Jetzt wo ich den CSS-Code hier einfüge fallen mir die :hover Tags auf.
Könnte darin das Darstellproblem des IE-Quirk Modus liegen?

nikosch · 07.02.2010, 19:38

Was genau geht denn nicht? Horizontale Darstellung? Mouseover?

chunky · 07.02.2010, 19:42

Ja, die horizontale Darstellung funktioniert nicht.
Die Menüeinträge werden untereinander dargestellt (jedoch ohne bullet points).
Auch werden einige Div-Container auf der Seite nicht mit der richtige Höhe dargestellt.

Wenn die Debug-Nachricht nicht ausgegeben wird, dann funktioniert es.
Es liegt also am "Quirks Mode".

nikosch · 07.02.2010, 19:48

Das Problem liegt wohl hier:

Code:

	display: inline;
	list-style-type: none;
	list-style:none;
	display: table-cell;

display: table-cell; ist Quatsch. Weglassen, dann greift auch display: inline; wieder.

chunky · 07.02.2010, 19:59

Danke für den Hinweis, Nikosch!

Das hat wirklich an dem display:table-cell gelegen.
Das hatte ich eingefügt, weil es mir den Text in dem Menueintrag vertikal zentriert hat.
Gibt es eine andere Möglichkeit, den Listeneintrag vertikal zu zentrieren? Ich möchte eigentlich nur ungern ein Padding oder Margin im Menu verwenden...

Und kannst du in diesem Code vielleicht auch das Problem finden?

Code:

<style type="text/css">
.footerbar{
	height:3px;
	background-color:#999999;
}
</style>

//html:
<div class="footerbar"></div>

Dieser Div-Container wird im Quirks Modus nämlich nicht mit der richtigen Höhe angezeigt. Gibt es im Quirks Modus kein "height"-Attribut für Div-Container?
Der footerbar Div-Container scheint im Quirks Modus so etwa Text-Höhe zu haben...

nikosch · 07.02.2010, 20:14

Benutz mal Firebug und sieh nach, ob irgendwas das Setting überschreibt.

Zitat:

Gibt es eine andere Möglichkeit, den Listeneintrag vertikal zu zentrieren?

Macht nicht so richtig Sinn, weil Du den li's ja keine Breite zuordnest. Ansonsten sollte text-align:center funktionieren.

chunky · 07.02.2010, 20:59

Das Menu konnte ich mit deiner Hilfe mittlerweile reparieren.
Den li Elementen habe ich eine line-height zugeordnet.

Der leere Div-Container verursacht immer noch Probleme im Quirks Modus.

Wenn ich probeweise ein Spacer-Bild einbaue, dann wird der Div-Container so angezeigt, wie er sein soll (nämlich mit 3 Pixel Höhe).

Code:

<div class="footerbar"><img src="/img/spacer.gif" width="1" height="1" alt="" /></div>

Den Spacer will ich natürlich wieder loswerden...

Der leere Div-Container wird offensichtlich mit Texthöhe dargestellt.
Ein "line-height:3px;" für die footerbar-Klasse hat leider nicht geholfen.

nikosch · 07.02.2010, 21:02

Was sagt Firebug?

chunky · 07.02.2010, 21:29

Firebug hat keine Überschreibungen gemeldet.
Ich habe gerade eben eine Lösung gefunden:

Code:

	font-size: 0px;

für den footerbar-Div verhindert, dass dieser von Internet Explorer auf Texthöhe vergrößert wird.

feeela · 10.02.2010, 16:27

Zitat:

Zitat von chunky

Code:

<style type="text/css">
.footerbar{
	height:3px;
	background-color:#999999;
}
</style>

//html:
<div class="footerbar"></div>

Ich denke overflow dürfte dein Freund sein:

Code:

<style type="text/css">
.footerbar{
	height:3px;
	background-color:#999999;
	overflow: hidden;
}
</style>

//html:
<div class="footerbar"></div>

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Thema bewerten
Thema bewerten:

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Javascript Menu wird falsch positioniert	Das_S	Trash	0	03.01.2010 17:40
PHP Pulldown / Dropdown menu	djsky	PHP Tipps 2009	11	29.11.2009 21:09
Frage.: Dymanisches Datum im Drop Down Menü möglich?	badboygoofy	JavaScript, Ajax und mehr	1	24.07.2009 14:34
menu in einer xhtml seite	stripes	PHP Tipps 2009	31	04.01.2009 14:26
horizontales Menü	Fritz73	Scriptbörse	9	26.05.2008 22:26
Menü das mitscrollt	mristau2k5	HTML, Usability und Barrierefreiheit	3	04.06.2006 18:50
Menu navigation	marcels	PHP Tipps 2007	1	16.11.2005 18:47
wie gehts schöner/besser?	AliceD	HTML, Usability und Barrierefreiheit	1	06.09.2005 08:59
Menü aus MySQL Datenbank ausgelesen		PHP Tipps 2005	9	02.06.2005 17:11
PHP Menu mit 2 untermenus		PHP Tipps 2005	3	23.05.2005 00:04
so scrollen das menü usw. dableibt		PHP Tipps 2005	10	21.05.2005 21:15
Menü auf php-Seite		PHP Tipps 2005	20	01.02.2005 20:24
über ein menü eine datenbankabfrage --> ergebnisse auflis		PHP Tipps 2004-2	1	18.11.2004 17:42
[Erledigt] Wie erstelle ich ein Upload Menü mit mehreren Menüpunkten ?		PHP Tipps 2004	3	22.08.2004 14:19
[Erledigt] PopDown Menü fast fertig!!		HTML, Usability und Barrierefreiheit	3	27.07.2004 00:11


Mister Ad PHP Code Flüsterer Registriert seit: 21.08.2005 Beiträge: 4682 PHP-Kenntnisse: Fortgeschritten

07.02.2010, 19:38
nikosch moderatives Dielektrikum Registriert seit: 21.05.2008 Beiträge: 34.189 PHP-Kenntnisse: Fortgeschritten	Was genau geht denn nicht? Horizontale Darstellung? Mouseover? __________________ -- One pixel is still too big. Please make it smaller. ASAP. Initiative Mittelstand. Die wichtigste Gestaltungsregel im Screendesign ist Pi mal Daumen des Arbeitgebers. --

07.02.2010, 19:42
chunky Erfahrener Benutzer Registriert seit: 19.01.2010 Beiträge: 324 PHP-Kenntnisse: Anfänger	Ja, die horizontale Darstellung funktioniert nicht. Die Menüeinträge werden untereinander dargestellt (jedoch ohne bullet points). Auch werden einige Div-Container auf der Seite nicht mit der richtige Höhe dargestellt. Wenn die Debug-Nachricht nicht ausgegeben wird, dann funktioniert es. Es liegt also am "Quirks Mode".

07.02.2010, 19:48
nikosch moderatives Dielektrikum Registriert seit: 21.05.2008 Beiträge: 34.189 PHP-Kenntnisse: Fortgeschritten	Das Problem liegt wohl hier: Code: display: inline; list-style-type: none; list-style:none; display: table-cell; display: table-cell; ist Quatsch. Weglassen, dann greift auch display: inline; wieder. __________________ -- One pixel is still too big. Please make it smaller. ASAP. Initiative Mittelstand. Die wichtigste Gestaltungsregel im Screendesign ist Pi mal Daumen des Arbeitgebers. --

07.02.2010, 19:59
chunky Erfahrener Benutzer Registriert seit: 19.01.2010 Beiträge: 324 PHP-Kenntnisse: Anfänger	Danke für den Hinweis, Nikosch! Das hat wirklich an dem display:table-cell gelegen. Das hatte ich eingefügt, weil es mir den Text in dem Menueintrag vertikal zentriert hat. Gibt es eine andere Möglichkeit, den Listeneintrag vertikal zu zentrieren? Ich möchte eigentlich nur ungern ein Padding oder Margin im Menu verwenden... Und kannst du in diesem Code vielleicht auch das Problem finden? Code: <style type="text/css"> .footerbar{ height:3px; background-color:#999999; } </style> //html: <div class="footerbar"></div> Dieser Div-Container wird im Quirks Modus nämlich nicht mit der richtigen Höhe angezeigt. Gibt es im Quirks Modus kein "height"-Attribut für Div-Container? Der footerbar Div-Container scheint im Quirks Modus so etwa Text-Höhe zu haben...

07.02.2010, 20:59
chunky Erfahrener Benutzer Registriert seit: 19.01.2010 Beiträge: 324 PHP-Kenntnisse: Anfänger	Das Menu konnte ich mit deiner Hilfe mittlerweile reparieren. Den li Elementen habe ich eine line-height zugeordnet. Der leere Div-Container verursacht immer noch Probleme im Quirks Modus. Wenn ich probeweise ein Spacer-Bild einbaue, dann wird der Div-Container so angezeigt, wie er sein soll (nämlich mit 3 Pixel Höhe). Code: <div class="footerbar"><img src="/img/spacer.gif" width="1" height="1" alt="" /></div> Den Spacer will ich natürlich wieder loswerden... Der leere Div-Container wird offensichtlich mit Texthöhe dargestellt. Ein "line-height:3px;" für die footerbar-Klasse hat leider nicht geholfen.

07.02.2010, 21:02
nikosch moderatives Dielektrikum Registriert seit: 21.05.2008 Beiträge: 34.189 PHP-Kenntnisse: Fortgeschritten	Was sagt Firebug? __________________ -- One pixel is still too big. Please make it smaller. ASAP. Initiative Mittelstand. Die wichtigste Gestaltungsregel im Screendesign ist Pi mal Daumen des Arbeitgebers. --

07.02.2010, 21:29
chunky Erfahrener Benutzer Registriert seit: 19.01.2010 Beiträge: 324 PHP-Kenntnisse: Anfänger	Firebug hat keine Überschreibungen gemeldet. Ich habe gerade eben eine Lösung gefunden: Code: font-size: 0px; für den footerbar-Div verhindert, dass dieser von Internet Explorer auf Texthöhe vergrößert wird.