✔ Menüproblem

cctnt · 4. Dezember 2006

Guten Tag.

Ich habe ein kleines Problem mit meinem Hover menü.

und zwar wird es im Internet explorer nicht richtig angezeigt.

hier ist mal der link zur seite: http://www.johnhornsby.com/gmc/index.php

hier ist der css code

PHP:

#menu {
	width: 188px;
	background: #eee;
	left:0;
	top: 193px;
	height: 220px;
	z-index: 3;
}

#menu ul {
list-style: none;
margin: 0;
padding: 0;
}

#menu a, #menu h2 {
font: bold 11px/16px arial, helvetica, sans-serif;
display: block;
border-width: 1px;
border-style: solid;
border-color: #ccc #888 #555 #bbb;
margin: 0;
padding: 2px 3px;
}

#menu h2 {
color: #fff;
background: #000;
text-transform: uppercase;
}

#menu a {
color: #000;
background: #efefef;
text-decoration: none;
}

#menu a:hover {
color: #a00;
background: #fff;
}

#menu li {
	position: relative;
	left: 0;
	z-index: 1;
}

#menu ul ul ul {
position: absolute;
top: 0;
left: 100%;
width: 100%;
}

div#menu ul ul ul,
div#menu ul ul li:hover ul ul
{display: none;}

div#menu ul ul li:hover ul,
div#menu ul ul ul li:hover ul
{display: block;}

Im Firefox funktioniert es ohne Probleme.

Kann mir vielleicht wer helfen?

Maik · 4. Dezember 2006

Der IE (5, 5.5 & 6.0) unterstützt die :hover-Pseudoklasse ausschliesslich für das a-Element -> a:hover

In dem CSS-Menü werden die Submenüs aber über li:hover eingeblendet, womit die genannten IE-Versionen nichts anfangen können.

Entweder schaust du dir als Alternative Stu Nicholls CSS-Multi-Level-Menus an, oder du setzt Javascript ein, um dem IE unter die Arme zu greifen, wie beispielsweise in dem Suckerfish DropDown Menu.

Nachtrag: Du solltest dich aber auch mal mit dem Grundgerüst einer HTML-Datei beschäftigen und auf ein valides (= gültiges) Markup in dem Dokument achten -> http://validator.w3.org/check?uri=http://www.johnhornsby.com/gmc/index.php.

cctnt · 10. Dezember 2006

Danke.

Ich hab jetzt mein menü nach den links entsprechend umgestaltet. jetzt hab ich nur noch das problem, das im IE das menü anders ausschaut als im firefox oda anderen browsern.

hier mal der link

http://www.gamedevelopmentcenter.de/skv/

kann mir mehr weiterhelfen?

Maik · 10. Dezember 2006

Vermutlich liegt es einfach daran, dass dem Dokument noch immer eine Doctype-Deklaration fehlt, weshalb der IE im Quirksmodus läuft und daher das Boxmodell nicht unterstützt.

Zudem weist das Dokument noch immer nicht das Grundgerüst einer HTML-Datei auf.

Und bitte beachte die Netiquette bzgl. der Groß- und Kleinschreibung.

cctnt · 10. Dezember 2006

Ich versteh zwar nicht ganz warum das nicht beachten der Gross/kleinschreibung gegen ne Netiquette verstossen aber wenn ihr euch davon angegriffen fühlt bitte ich werds versuchen.

Hab jetzt den Doctype vermerk eingebaut und jetzt funktioniert es fast.

Im Internet Explorer is das Menü immer noch breiter als es soll. Ich hab zwar die CSS werte schon umgestellt aber es will einfach nicht mehr kleiner werden.

Jemand hierzu eine Idee?

Maik · 10. Dezember 2006

@Netiquette: Einfach lesen -> http://www.tutorials.de/netiquette.html

@Topic: Entferne den rotmarkierten Conditional Comment für den IE, denn der hat da nichts zu suchen

Code:

<!--[if IE]>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<![endif]-->

und probier es mal mit diesem Stylesheet:

Code:

* html ul#Navigation a, * html ul#Navigation span {
    width: 9em;
    voice-family:"\"}\"";  /* ab hier ignoriert IE 5.x die nachfolgenden Deklarationen */
    voice-family: inherit;
    width: 7em;  /* (IE 6 in standards-compliant mode) */
  }

cctnt · 10. Dezember 2006

Ich hab das mit dem IF IE deswegen gemacht weil mit einfügtem Doctype Firefox rumzickt.

Hab den css code reingetan hat sich aber nichts verändert.

Vielleicht hilft es wenn ich den gesamten menücss code anhänge

PHP:

/* Vertikale Navigation */
  div#Tmenu {
    font-size: 94%;
    width: 10.5em;
    padding: 0.8em;
    border: 1px solid white;
    background-color: #eee;
  }
  * html div#Tmenu {
    width: 8.0em;
    w\idth: 8.0em;  /* (IE 6 in standards-compliant mode) */
  }
  ul#Navigation {
    margin: 0; padding: 0;
    text-align: center;
  }

  ul#Navigation li {
    list-style: none;
    position: relative;
    margin: 0.4em; padding: 0;
  }
  * html ul#Navigation li {
    margin-right:1.5em;  /* Platz fuer Link-Verbreiterung im IE reservieren */
    margin-bottom:0;
  }

  ul#Navigation li ul {
	margin: 0;
	padding: 0;
	position: absolute;
	top: 0;
	left: 9.3em;
  }
  *+html ul#Navigation li ul {
    left: 8.8em;  /* (IE 7 in standards-compliant mode) */
  }
  ul#Navigation li ul li {
    margin: 0; padding-left: 1.4em;
  }

  ul#Navigation a, ul#Navigation span {
    display: block;
    width: 7em;
    font-family: "Trebuchet MS", "Century Gothic", Helvetica, Arial, sans-serif;
    text-decoration: none; font-weight: bold;
    padding: 0.2em 1em;
    border: 1px solid #900;
    border-left-color: #c96; border-top-color: #c96;
    color: white; background-color: #c00;
  }
  * html ul#Navigation a, * html ul#Navigation span {
    width: 9em;
    w\idth: 7em;  /* (IE 6 in standards-compliant mode) */
  }
  ul#Navigation a:hover, ul#Navigation span, li a#aktuell:hover {
    border-color: #c96;
    border-left-color: #900; border-top-color: #900;
    background-color: #e00;
  }
  li a#aktuell {
    border-right-color: #300; border-bottom-color: #300;
    background-color: #900;
  }
  ul#Navigation li ul span {
    border-color: #900; border-left-color: #c96;
    color: #900; background-color: white;
  }
  ul#Navigation li a:active {
    color: black; background-color: #f00;
  }

/* dynamisches Ein-/Ausblenden */
  ul#Navigation li ul {
    display: none;
  }
  ul#Navigation li:hover>ul {
    display: block;
  }
  ul#Navigation>li:hover>a {
    width: 8.2em;
    background: #e00 url(pfeil.gif) no-repeat center right;
  }

/* dynamisches Ein-/Ausblenden der JavaScript-generierten Klasse im IE */
  * html ul#Navigation li.hoverIE {
    margin-right:0;  /* reservierten Platz freigeben */
    margin-bottom:-1.15em;  /* Fehlerkorrektur, ggfls. anpassen */
  }
  * html ul#Navigation li.hoverIE ul {
    display: block;
  }
  * html ul#Navigation li .hoverIE {
    width: 10.3em;
    w\idth: 8.2em;  /* (IE 6 in standards-compliant mode) */
    }

Maik · 10. Dezember 2006

cctnt hat gesagt.:
Hab den css code reingetan hat sich aber nichts verändert.

Bist du dir sicher, dass du ihn auch vollständig übernommen hast?

Vergleiche nochmal meinen vorgeschlagenen CSS-Code mit deinem Stylesheet.

cctnt · 10. Dezember 2006

Sorry hatte noch das alte im speicher

hier das richtige stylesheet

PHP:

/* Vertikale Navigation */
  div#Tmenu {
    font-size: 94%;
    width: 10.5em;
    padding: 0.8em;
    border: 1px solid white;
    background-color: #eee;
  }
  * html div#Tmenu {
    width: 8.0em;
    w\idth: 8.0em;  /* (IE 6 in standards-compliant mode) */
  }
  ul#Navigation {
    margin: 0; padding: 0;
    text-align: center;
  }

  ul#Navigation li {
    list-style: none;
    position: relative;
    margin: 0.4em; padding: 0;
  }
  * html ul#Navigation li {
    margin-right:1.5em;  /* Platz fuer Link-Verbreiterung im IE reservieren */
    margin-bottom:0;
  }

  ul#Navigation li ul {
	margin: 0;
	padding: 0;
	position: absolute;
	top: 0;
	left: 9.3em;
  }
  *+html ul#Navigation li ul {
    left: 8.8em;  /* (IE 7 in standards-compliant mode) */
  }
  ul#Navigation li ul li {
    margin: 0; padding-left: 1.4em;
  }

  ul#Navigation a, ul#Navigation span {
    display: block;
    width: 7em;
    font-family: "Trebuchet MS", "Century Gothic", Helvetica, Arial, sans-serif;
    text-decoration: none; font-weight: bold;
    padding: 0.2em 1em;
    border: 1px solid #900;
    border-left-color: #c96; border-top-color: #c96;
    color: white; background-color: #c00;
	}
	* html ul#Navigation a, * html ul#Navigation span {
    width: 9em;
    voice-family:"\"}\"";  /* ab hier ignoriert IE 5.01 & 5.5 nachfolgende Deklarationen */
    voice-family: inherit;
    width: 7em;  /* (IE 6 in standards-compliant mode) */
  }
  ul#Navigation a:hover, ul#Navigation span, li a#aktuell:hover {
    border-color: #c96;
    border-left-color: #900; border-top-color: #900;
    background-color: #e00;
  }
  li a#aktuell {
    border-right-color: #300; border-bottom-color: #300;
    background-color: #900;
  }
  ul#Navigation li ul span {
    border-color: #900; border-left-color: #c96;
    color: #900; background-color: white;
  }
  ul#Navigation li a:active {
    color: black; background-color: #f00;
  }

/* dynamisches Ein-/Ausblenden */
  ul#Navigation li ul {
    display: none;
  }
  ul#Navigation li:hover>ul {
    display: block;
  }
  ul#Navigation>li:hover>a {
    width: 8.2em;
    background: #e00 url(pfeil.gif) no-repeat center right;
  }

/* dynamisches Ein-/Ausblenden der JavaScript-generierten Klasse im IE */
  * html ul#Navigation li.hoverIE {
    margin-right:0;  /* reservierten Platz freigeben */
    margin-bottom:-1.15em;  /* Fehlerkorrektur, ggfls. anpassen */
  }
  * html ul#Navigation li.hoverIE ul {
    display: block;
  }
  * html ul#Navigation li .hoverIE {
    width: 10.3em;
    w\idth: 8.2em;  /* (IE 6 in standards-compliant mode) */
    }

Maik · 11. Dezember 2006

Versuch es mal mit diesem Stylesheet:

Code:

/* Vertikale Navigation */
  div#Tmenu {
    font-size: 94%;
    width: 10.5em;
    padding: 0.8em;
    border: 1px solid white;
    background-color: #eee;
  }

  * html div#Tmenu {
    width: 12.1em;
    voice-family:"\"}\"";  /* ab hier ignoriert IE 5.x die nachfolgenden Deklarationen */
    voice-family: inherit;
    width: 10.5em;  /* (IE 6 in standards-compliant mode) */
  }

  ul#Navigation {
    margin: 0; padding: 0;
    text-align: center;
  }

  ul#Navigation li {
    list-style: none;
    position: relative;
    margin: 0.4em; padding: 0;
  }

  * html ul#Navigation li {
    margin-right:1.0em;  /* Platz fuer Link-Verbreiterung im IE reservieren */
    margin-bottom:0;
  }

  ul#Navigation li ul {
        margin: 0;
        padding: 0;
        position: absolute;
        top: 0;
        left: 9.3em;
  }

  *+html ul#Navigation li ul {
    left: 8.8em;  /* (IE 7 in standards-compliant mode) */
  }

  ul#Navigation li ul li {
    margin: 0; padding-left: 1.4em;
  }

  ul#Navigation a, ul#Navigation span {
    display: block;
    width: 7em;
    font-family: "Trebuchet MS", "Century Gothic", Helvetica, Arial, sans-serif;
    text-decoration: none; font-weight: bold;
    padding: 0.2em 1em;
    border: 1px solid #900;
    border-left-color: #c96; border-top-color: #c96;
    color: white; background-color: #c00;
   }

   * html ul#Navigation a, * html ul#Navigation span {
    width: 9em;
    voice-family:"\"}\"";  /* ab hier ignoriert IE 5.x die nachfolgenden Deklarationen */
    voice-family: inherit;
    width: 7em;  /* (IE 6 in standards-compliant mode) */
  }

  ul#Navigation a:hover, ul#Navigation span, li a#aktuell:hover {
    border-color: #c96;
    border-left-color: #900; border-top-color: #900;
    background-color: #e00;
  }

  li a#aktuell {
    border-right-color: #300; border-bottom-color: #300;
    background-color: #900;
  }

  ul#Navigation li ul span {
    border-color: #900; border-left-color: #c96;
    color: #900; background-color: white;
  }

  ul#Navigation li a:active {
    color: black; background-color: #f00;
  }

/* dynamisches Ein-/Ausblenden */
  ul#Navigation li ul {
    display: none;
  }

  ul#Navigation li:hover>ul {
    display: block;
  }

  ul#Navigation>li:hover>a {
    width: 8.2em;
    background: #e00 url(pfeil.gif) no-repeat center right;
  }

/* dynamisches Ein-/Ausblenden der JavaScript-generierten Klasse im IE */
  * html ul#Navigation li.hoverIE {
    margin-right:0;  /* reservierten Platz freigeben */
    margin-bottom:-1.15em;  /* Fehlerkorrektur, ggfls. anpassen */
  }

  * html ul#Navigation li.hoverIE ul {
    display: block;
  }

  * html ul#Navigation li .hoverIE {
    width: 10.3em;
    voice-family:"\"}\"";  /* ab hier ignoriert IE 5.x die nachfolgenden Deklarationen */
    voice-family: inherit;
    width: 8.2em;  /* (IE 6 in standards-compliant mode) */
    }

und setze zu Testzwecken für den Firefox-Browser diesen Doctype (ohne Conditional Comment) ein:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
          "http://www.w3.org/TR/html4/loose.dtd">
<html>

✔ Menüproblem

cctnt

Erfahrenes Mitglied

Maik

cctnt

Erfahrenes Mitglied

Maik

cctnt

Erfahrenes Mitglied

Maik

cctnt

Erfahrenes Mitglied

Maik

cctnt

Erfahrenes Mitglied

Maik

Neue Beiträge