zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden dynamisches CSS menü funktioniert in IE nicht!

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 21.07.2011, 16:56
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 21.07.2011
Beiträge: 9
riseup befindet sich auf einem aufstrebenden Ast
Unglücklich dynamisches CSS menü funktioniert in IE nicht!

Hallo zusammen,
ich habe für unseren Online-Shop ein dynamisches Menü mit CSS erstellt, welches sowohl nach unten als auch zur seite ausklappt, das klappt alles auch wunderbar, solange ich die Seite im Firefox, oder einem andern Browser, als den IE lade.

Irgendwie versuche ich nun schon seit gestern, dieses Menü für den IE8 und möglichst noch für den IE7 kompatibel zu bekommen. Leider bin ich weder durch googlen noch bei der Suche in diversen Foren nicht fündig geworden, bzw konnte ich die aufgeführten Lösungsansätze so nicht umsetzen, weil ich Sie nicht so ganz verstehe.

Nun bin Ich maximal verwirrt und weiß nicht mehr so ganz weiter, habe mir HTML und CSS selber beigebracht und bin nicht so der Oberchecker.

Ich wäre euch sehr dankbar, wenn mir jemand auf die Sprünge helfen könnte

Hier wäre der HTML-Code:

HTML-Code:
<head>

<title>navigation links</title>
<link rel="stylesheet" type="text/css" href="nav_neu_shop_links.css">

<script type="text/javascript">
if(window.navigator.systemLanguage && !window.navigator.language) {
  function hoverIE() {
    var LI = document.getElementById("nav").firstChild;
    do {
      if (sucheUL(LI.firstChild)) {
        LI.onmouseover=einblenden; LI.onmouseout=ausblenden;
      }
      LI = LI.nextSibling;
    }
    while(LI);
  }

  function sucheUL(UL) {
    do {
      if(UL) UL = UL.nextSibling;
      if(UL && UL.nodeName == "UL") return UL;
    }
    while(UL);
    return false;
  }

  function einblenden() {
    var UL = sucheUL(this.firstChild);
    UL.style.display = "block"; UL.style.backgroundColor = "silver";
  }
  function ausblenden() {
    sucheUL(this.firstChild).style.display = "none";
  }

  window.onload=hoverIE;
}
</script>

</head>

<body>

<ul id="nav">
	
	<li class="level_2">
		<a class="kategorie_link" href="http://www.printer-care.de/shop/drucker-co-/farblaserdrucker-de_DE651680.html">
		
			Drucker & Co.
		
		</a>
		
	<ul class="sub">
		
		<li class="top new">
		
			<a href="http://www.printer-care.de/shop/drucker-co-/farblaserdrucker-de_DE651680.html" class="new_child">

				Farblaserdrucker
			
			</a>
		
			<ul style="width: 420px;">
			
				<li class="title">
				
					<a href="http://www.printer-care.de/shop/drucker-co-/farblaserdrucker-de_DE651680.html">Alle Hersteller</a>
			
				</li>
			
				<li>
				
				<a href="http://www.printer-care.de/shop/drucker-co-/farblaserdrucker/brother-de_DE651713.html">Brother</a>
				
				</li>
			
				<li>
			
					<a href="http://www.printer-care.de/shop/drucker-co-/farblaserdrucker/epson-de_DE4864624.html">Epson</a>
				</li>
				
				<li>
			
					<a href="http://www.printer-care.de/shop/drucker-co-/farblaserdrucker/hp-de_DE651724.html">Hewlett-Packard</a>
			
				</li>
			
				<li>
				
					<a href="http://www.printer-care.de/shop/drucker-co-/farblaserdrucker/konica-minolta-de_DE651687.html">Konica Minolta</a>
				
				</li>
					
				<li>
			
					<a href="http://www.printer-care.de/shop/drucker-co-/farblaserdrucker/kyocera-de_DE651721.html">Kyocera</a>
				
				</li>
				
				<li>
				
					<a href="http://www.printer-care.de/shop/drucker-co-/farblaserdrucker/oki-de_DE651729.html">Oki</a>
				
				</li>
				
				<li>
				
					<a href="http://www.printer-care.de/shop/drucker-co-/farblaserdrucker/ricoh-de_DE1179333.html">Ricoh</a>
				
				</li>
				
				<li>
			
					<a href="http://www.printer-care.de/shop/drucker-co-/farblaserdrucker/samsung-de_DE651733.html">Samsung</a>
				
				</li>

			</ul>
	
		</li>
	
		<li class="level_2">
	
			<a href="http://www.printer-care.de/shop/drucker-co-/s-w-laserdrucker-de_DE651682.html" class="new_child">
			
				Laserdrucker
			
			</a>
	
			<ul style="width: 420px;">
	
				<li class="title">
					
					<a href="http://www.printer-care.de/shop/drucker-co-/s-w-laserdrucker-de_DE651682.html">Alle Hersteller</a>
				
				</li>
		

				<li>
				
					<a href="http://www.printer-care.de/shop/drucker-co-/s-w-laserdrucker/brother-de_DE651715.html">Brother</a>
				
				</li>
				
				<li>
				
					<a href="http://www.printer-care.de/shop/drucker-co-/s-w-laserdrucker/canon-de_DE651739.html">Canon</a>
				
				</li>
				
				<li>
				
					<a href="http://www.printer-care.de/shop/drucker-co-/s-w-laserdrucker/epson-de_DE4878661.html">Epson</a>
				
				</li>
				
				<li>
				
					<a href="http://www.printer-care.de/shop/drucker-co-/s-w-laserdrucker/hp-de_DE651723.html">HP</a>
				
				</li>
				
				<li>
				
					<a href="http://www.printer-care.de/shop/drucker-co-/s-w-laserdrucker/kyocera-de_DE651722.html">Kyocera</a>
				
				</li>
				
				<li>
				
					<a href="http://www.printer-care.de/shop/drucker-co-/s-w-laserdrucker/lexmark-de_DE651728.html">Lexmark</a>
				
				</li>
				
				<li>
				
					<a href="http://www.printer-care.de/shop/drucker-co-/s-w-laserdrucker/oki-de_DE651731.html">Oki</a>
				
				</li>
				
				<li>
				
					<a href="http://www.printer-care.de/shop/drucker-co-/s-w-laserdrucker/ricoh-de_DE1395730.html">Ricoh</a>
				
				</li>
				
				<li>
				
					<a href="http://www.printer-care.de/shop/drucker-co-/s-w-laserdrucker/samsung-de_DE651735.html">Samsung</a>
				
				</li>

			</ul>
		
		</li>
	
	</ul>	
		
</body>
und hier die dazugehörige CSS:

Code:
#nav {
    height: 30px;
    list-style: none outside none;
    margin: 0;
    padding: 0;
    position: relative;
    width: 172px;
    z-index: 500;
}

#nav li a.kategorie_link {
    background: none repeat scroll 0 0 #CCCCCC;
    color: #323232;
    cursor: pointer;
    display: block;
    float: left;
    font-size: 12px;
    font-weight: bold;
    height: 30px;
    line-height: 30px;
    padding: 0 10px;
    text-decoration: none;
    width: 150px;
}
#nav li:hover a.kategorie_link, #nav li.hover a.kategorie_link {
    background: none repeat scroll 0 0 #CCCCCC;
    position: relative;
}
#nav li a.kategorie_link span {
    background: url("") no-repeat scroll -995px -339px transparent;
    display: block;
    float: left;
    height: 29px;
    width: 15px;
}
#nav li:hover a.kategorie_link span, #nav li.hover a.kategorie_link span {
    background: url("") no-repeat scroll -520px -147px transparent;
    display: block;
    float: left;
    height: 29px;
    width: 15px;
}
#nav li.level_2, #nav li.new {
    background: url("") repeat-x scroll 0 29px #4B4B4B;
    border-bottom: 1px solid #FFFFFF;
    display: block;
    float: left;
    width: 170px;
}
#nav li.new {
    background: url("") no-repeat scroll 100% 100% #4B4B4B;
}
#nav li:hover, #nav li.hover {
    position: relative;
}
#nav li:hover ul.sub, #nav li.hover ul.sub {
    background: none repeat scroll 0 0 #323232;
    border-top: 1px solid #FFFFFF;
    left: 0;
    padding: 0;
    top: 30px;
    width: 170px;
}
#nav li:hover ul.sub li, #nav li.hover ul.sub li {
    color: #000000;
    display: block;
    float: left;
    font-weight: normal;
    height: 29px;
    position: relative;
    width: 170px;
}
#nav li:hover ul.sub li li, #nav li.hover ul.sub li li {
    border-top: 1px solid #DDDDDD;
    height: 29px;
    margin: 0 10px;
}
#nav li ul.sub li li.title {
    color: #4B4B4B;
    display: block;
    font-size: 12px;
    font-weight: bold;
    height: 42px;
    margin: 0;
    width: 100%;
}
#nav li:hover ul.sub li.title, #nav li.hover ul.sub li.title {
    border: 0 none;
}
#nav li:hover ul.sub li a, #nav li.hover ul.sub li a {
    color: #323232;
    display: block;
    height: 29px;
    line-height: 29px;
    overflow: hidden;
    padding: 0 10px;
	font-size: 12px;
    text-decoration: none;
    width: 170px;
}
#nav li ul.sub li a.new_child {
    background: none repeat scroll 0 0 transparent;
    border-bottom: 1px solid #FFFFFF;
    color: #FFFFFF;
	font-size: 12px;
    font-weight: normal;
    overflow: visible;
}
#nav li:hover ul.sub li a:hover, #nav li.hover ul.sub li a.hover {
    background: none repeat scroll 0 0 transparent;
	font-size: 12px;
    text-decoration: underline;
    z-index: 1;
}
#nav li:hover ul.sub li a.new_child:hover, #nav li.hover ul.sub li a.new_child:hover {
    background: url("") no-repeat scroll 0 -1px transparent;
    color: #FFFFFF;
    text-decoration: none;
    width: 150px;
    z-index: 9999;
}
#nav li:hover li:hover ul, #nav li.hover li.hover ul {
    background: none repeat scroll 0 0 #FFFFFF;
    border: 1px solid #A0A0A0;
    left: 170px;
    padding: 20px;
    position: absolute;
    top: -35px;
    width: 1px;
}
#nav ul, #nav li:hover ul ul, #nav li.hover ul ul {
    left: -9999px;
    list-style: none outside none;
    margin: 0;
    padding: 0;
    position: absolute;
    top: -9999px;
    z-index: 1;
}
#nav li:hover ul ul, #nav li.hover ul ul {
    position: relative;
}
#nav li:hover li:hover a.new_child, #nav li.hover li.hover a.new_child {
    background: url("../img/navigation/arrow_hover.png") no-repeat scroll 0 -1px transparent;
    color: #FFFFFF;
    position: absolute;
    width: 150px;
    z-index: 99999;
}
Vielen Dank im Vorraus!
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 22.07.2011, 14:30
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 24.06.2010
Beiträge: 528
K.Roland wird schon bald berühmt werden
Standard

Hallo,

habe mal so bei mir getestet ab IE 7 alles i.o.


Code:
html, body, ul, li, a, span { 
   margin: 0; padding: 0; 
}
html {
   height: 100%;
}
body {
   font: 100.1% Verdana, Geneva, Arial, Helvetica, sans-serif;
   text-align: center; /* fuer IE 5 */
}	
ul#nav {
    height: 30px;
    list-style: none outside none;
    position: relative;
    width: 172px;
    z-index: 500; 
    text-align: left;
}
Gruß,
Roland
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 10.08.2011, 14:40
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 21.07.2011
Beiträge: 9
riseup befindet sich auf einem aufstrebenden Ast
Standard

Hallo Roland,

erstmal vielen Dank für deine Antwort, leider kann ich erst jetzt schreiben, da ich die letzten zwei Wochen im Urlaub war und hier dann erstmal das Tagesgeschäft aufarbeiten musste!

Habe den von dir getesteten Code nun so ziemlich an jeder möglichen Stelle probiert einzufügen, aber immer noch ohne Erfolg! Ich verstehe auch ehrlich gesagt nicht so ganz, an welcher Stelle du ihn eingefügt hast???

Könntest du mir, falls das nicht zuviel Aufwand macht, nochmal den gesamten Code (CSS und HTML), welchen du erfolgreich getestet hast, posten?

Vielleicht verstehe ich dann auch wo der Fehler in meinem Code liegt

Grüße Micha
Mit Zitat antworten
  #4 (permalink)  
Alt 10.08.2011, 17:49
Neuer Benutzer
neuer user
 
Registriert seit: 07.06.2011
Beiträge: 22
zatec befindet sich auf einem aufstrebenden Ast
Standard

Du schreibst einfach an den Anfang deiner CSS-Datei folgendes:

Code:
body, * {
     margin: 0;
     padding: 0;
}
Damit resetest du nicht nur den body, sondern es werden durch den Universalselektor * auch alle Elemente innerhalb des bodys angesprochen. Margin und padding von JEDEM Element wird somit auf 0 gesetzt, wodurch es zu einer einheitlicheren Darstellung deiner Seite in unterschiedlichen Browsern kommt.

Danach fügst du dem Selektor #nav die Definition

Code:
text-align: left;
hinzu.

MfG
Mit Zitat antworten
  #5 (permalink)  
Alt 10.08.2011, 22:49
Benutzerbild von Praktikant
Semantikbremse.
XHTMLforum-Kenner
 
Registriert seit: 22.04.2008
Beiträge: 4.985
Praktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz sein
Standard

Mit dem Selector * im CSS werden nicht nur Elemente in <body> angesprochen, sondern generell alle Elemente, die einen Style erhalten können. Also auch <html> und <body>. Die explizite Angabe des Bodys wird damit also überflüssig.
__________________
Rettet die Erde.... sie ist der einzige Planet mit Schokolade!
Mit Zitat antworten
  #6 (permalink)  
Alt 11.08.2011, 17:44
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 21.07.2011
Beiträge: 9
riseup befindet sich auf einem aufstrebenden Ast
Standard

ok, das mit dem selektor * habe ich verstanden!

Aber irgendwie ändert das nichts daran, daß mein IE das nicht richtig darstellt, kann es sein, daß der IE aufgrund seiner Einstellungen Probleme mit der Darstellung bzw. der Funktion hat. Habe allerdings nichts am IE selber verändert, da ich Ihn nicht benütze

ich poste nochmal die geänderte css, den html code habe ich seither nicht verändert (hätte ich das tun sollen?)

Code:
* {
     margin: 0;
     padding: 0;
}

#nav {
    height: 30px;
    list-style: none outside none;
    position: relative;
    width: 172px;
    z-index: 500;
	text-align: left;
}

#nav li a.kategorie_link {
    background: none repeat scroll 0 0 #CCCCCC;
    color: #323232;
    cursor: pointer;
    display: block;
    float: left;
    font-size: 12px;
    font-weight: bold;
    height: 30px;
    line-height: 30px;
    padding: 0 10px;
    text-decoration: none;
    width: 150px;
}
#nav li:hover a.kategorie_link, #nav li.hover a.kategorie_link {
    background: none repeat scroll 0 0 #CCCCCC;
    position: relative;
}
#nav li a.kategorie_link span {
    background: url("") no-repeat scroll -995px -339px transparent;
    display: block;
    float: left;
    height: 29px;
    width: 15px;
}
#nav li:hover a.kategorie_link span, #nav li.hover a.kategorie_link span {
    background: url("") no-repeat scroll -520px -147px transparent;
    display: block;
    float: left;
    height: 29px;
    width: 15px;
}
#nav li.level_2, #nav li.new {
    background: url("") repeat-x scroll 0 29px #4B4B4B;
    border-bottom: 1px solid #FFFFFF;
    display: block;
    float: left;
    width: 170px;
}
#nav li.new {
    background: url("") no-repeat scroll 100% 100% #4B4B4B;
}
#nav li:hover, #nav li.hover {
    position: relative;
}
#nav li:hover ul.sub, #nav li.hover ul.sub {
    background: none repeat scroll 0 0 #323232;
    border-top: 1px solid #FFFFFF;
    left: 0;
    padding: 0;
    top: 30px;
    width: 170px;
}
#nav li:hover ul.sub li, #nav li.hover ul.sub li {
    color: #000000;
    display: block;
    float: left;
    font-weight: normal;
    height: 29px;
    position: relative;
    width: 170px;
}
#nav li:hover ul.sub li li, #nav li.hover ul.sub li li {
    border-top: 1px solid #DDDDDD;
    height: 29px;
    margin: 0 10px;
}
#nav li ul.sub li li.title {
    color: #4B4B4B;
    display: block;
    font-size: 12px;
    font-weight: bold;
    height: 42px;
    margin: 0;
    width: 100%;
}
#nav li:hover ul.sub li.title, #nav li.hover ul.sub li.title {
    border: 0 none;
}
#nav li:hover ul.sub li a, #nav li.hover ul.sub li a {
    color: #323232;
    display: block;
    height: 29px;
    line-height: 29px;
    overflow: hidden;
    padding: 0 10px;
	font-size: 12px;
    text-decoration: none;
    width: 170px;
}
#nav li ul.sub li a.new_child {
    background: none repeat scroll 0 0 transparent;
    border-bottom: 1px solid #FFFFFF;
    color: #FFFFFF;
	font-size: 12px;
    font-weight: normal;
    overflow: visible;
}
#nav li:hover ul.sub li a:hover, #nav li.hover ul.sub li a.hover {
    background: none repeat scroll 0 0 transparent;
	font-size: 12px;
    text-decoration: underline;
    z-index: 1;
}
#nav li:hover ul.sub li a.new_child:hover, #nav li.hover ul.sub li a.new_child:hover {
    background: url("") no-repeat scroll 0 -1px transparent;
    color: #FFFFFF;
    text-decoration: none;
    width: 150px;
    z-index: 9999;
}
#nav li:hover li:hover ul, #nav li.hover li.hover ul {
    background: none repeat scroll 0 0 #FFFFFF;
    border: 1px solid #A0A0A0;
    left: 170px;
    padding: 20px;
    position: absolute;
    top: -35px;
    width: 1px;
}
#nav ul, #nav li:hover ul ul, #nav li.hover ul ul {
    left: -9999px;
    list-style: none outside none;
    margin: 0;
    padding: 0;
    position: absolute;
    top: -9999px;
    z-index: 1;
}
#nav li:hover ul ul, #nav li.hover ul ul {
    position: relative;
}
#nav li:hover li:hover a.new_child, #nav li.hover li.hover a.new_child {
    background: url("../img/navigation/arrow_hover.png") no-repeat scroll 0 -1px transparent;
    color: #FFFFFF;
    position: absolute;
    width: 150px;
    z-index: 99999;
}
vielen dank nochmal für eure hilfe bis hierhin (kann man sich hier für antworten bedanken?), sollte keiner eine Lösung haben, werde ich dem Chef wohl sagen, daß er besser einen Programmierer beauftragen soll
Mit Zitat antworten
  #7 (permalink)  
Alt 11.08.2011, 18:12
Benutzerbild von Praktikant
Semantikbremse.
XHTMLforum-Kenner
 
Registriert seit: 22.04.2008
Beiträge: 4.985
Praktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz sein
Standard

Ich sehe gerade, in dem oben angegebenen HTML fehlt noch ein DocType. Das versetzt den IE in den Quicksmode und der macht gerne Probleme.

Ganz oben eingeben:
HTML-Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
__________________
Rettet die Erde.... sie ist der einzige Planet mit Schokolade!
Mit Zitat antworten
  #8 (permalink)  
Alt 11.08.2011, 18:29
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 21.07.2011
Beiträge: 9
riseup befindet sich auf einem aufstrebenden Ast
Standard

WOW!

Jetzt funktioniert es tatsächlich, lag wohl wirklich an dem DOCTYPE, jetzt frag ich mich aber ... hätte es nach Einbindung in den Shop nicht auch funktioniert, da in der übergeordneten HTML-Datei auch ein DOCTYPE steht

Vielen Dank für euren Einsatz
Mit Zitat antworten
  #9 (permalink)  
Alt 11.08.2011, 19:17
Benutzerbild von Praktikant
Semantikbremse.
XHTMLforum-Kenner
 
Registriert seit: 22.04.2008
Beiträge: 4.985
Praktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz sein
Standard

Wahrscheinlich würde es funktionieren. Es gibt bei HTML übrigens keine Ober- oder Unterordnung der Dateien.
__________________
Rettet die Erde.... sie ist der einzige Planet mit Schokolade!
Mit Zitat antworten
Sponsored Links
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
CSS Menü MadBall CSS 3 21.03.2010 04:04
CSS Menü zickt rum /IE6/IE7/FF GizmotroniX CSS 3 11.07.2007 09:14
dtd und css in php funktioniert im IE nicht!!! da-lick CSS 17 09.06.2007 16:44
CSS Menü Problem dieBille CSS 4 22.02.2006 16:43
problem mit dem css menü nevermind CSS 72 11.10.2005 17:31


Alle Zeitangaben in WEZ +2. Es ist jetzt 09:03 Uhr.