zurück zur Startseite
  


Zurück XHTMLforum > Webentwicklung (außer XHTML und CSS) > Javascript & Ajax
Seite neu laden IE6 Submenü Problem - WICHTIG!

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 20.11.2008, 08:15
creativ.handwerk
neuer user
Thread-Ersteller
 
Registriert seit: 10.11.2008
Ort: 94357 Konzell
Beiträge: 79
infernalshade befindet sich auf einem aufstrebenden Ast
Standard GELÖST: IE6 Submenü Problem - WICHTIG!

Hallo Leute!

Erstmal der Code, dann sag ich euch was passiert:

Das Navigationsmenü:
HTML-Code:
<div class="mod_navigation block" id="nav">
<ul class="level_1">
<li class="active submenu first"><span class="active submenu first">BIO WAGYU</span><ul class="level_2">
<li  class="active first"><span class="active first">Bio Wagyu</span></li>
<li  class="last"><a href="ueber-wagyu.html" title="Über Wagyu" class="last" onClick="this.blur();"><span>Über Wagyu</span></a></li>
</ul>
</li>
<li  class="submenu"><a href="ueber-uns.html" title="Über uns" class="submenu" onClick="this.blur();"><span>ÜBER UNS</span></a><ul class="level_2">

<li  class="first"><a href="ueber-uns.html" title="Über uns" class="first" onClick="this.blur();"><span>Über uns</span></a></li>
<li  class="last"><a href="ueber-schergengrub.html" title="Über Schergengrub" class="last" onClick="this.blur();"><span>Über Schergengrub</span></a></li>
</ul>
</li>
<li><a href="gallerie.html" title="Gallerie" onClick="this.blur();"><span>GALLERIE</span></a></li>
<li><a href="referenzen.html" title="Referenzen" onClick="this.blur();">KUNDEN REFERENZEN</a></li>
<li><a href="links.html" title="Links" onClick="this.blur();"><span>LINKS</span></a></li>
<li  class="last"><a href="kontakt.html" title="Kontakt" class="last" onClick="this.blur();"><span>KONTAKT</span></a></li>
</ul>
</div>
Das CSS (Ich weis, der Code ist ziemlich durcheinander und evtl falsch, das kommt aber vom rumprobieren das ich schon die ganze Zeit mache!):
HTML-Code:
#nav
{
	left:-575px;
	top:40px;
	position:absolute;
	font-size:11px;
	z-index:999;
	*top:50px;
	overflow:visible !important;
}

#nav a,
#nav span
{
	display:block;
}

#nav ul
{
	list-style-type:none;
}


#nav li
{
	width:86px;
	margin-right:2px;
	text-align:center;
	background-image:url("tl_files/wagyu/img/nav-button-bg.jpg");
	background-repeat:no-repeat;
	float:left;
}

#nav li a
{
	color:#ffffff;
}

#nav li a:hover
{
	color:#ffa9ac;
}

#nav span.active
{
	color:#ffa9ac;
}

#nav ul ul
{
	visibility:hidden;background:#333333;position:absolute;top:44px;
	*border:5px solid green;
}

* html #nav ul ul
{
	margin-left:-50%;
}

*+html #nav ul ul
{
	margin-left:-100px;
}

#nav li:hover ul
{
	visibility:visible;
}

#nav ul ul li
{
	background:none;margin-left:-35px;margin-right:30px;width:116px;
	*margin-left:0px;*margin-right:0px;
}

#nav ul ul li span,
#nav ul ul li a
{
	text-align:left;float:left;line-height:20px;
}
Ok, also das Untermenü klappt wunderbar auf im Firefox und Co anhand diesen CSS-Stilen:
HTML-Code:
#nav ul ul
{
	visibility:hidden;background:#333333;position:absolute;top:44px;
	*border:5px solid green;
}
und
HTML-Code:
#nav li:hover ul
{
	visibility:visible;
}
Jedoch nicht im IE6! Aus diesem Grund hab ich bisher immer dieses Javascript verwendet, das es auch im IE6 zum funktionieren bringt:
HTML-Code:
/* IEFIX */
if(window.ie6 || window.ie7)
{	
        window.addEvent('domready',function(){
		$$('#nav li').each(function(el,cnt){
			if(el.getParent().hasClass('level_1') && el.getElement('ul'))
			{
				el.submenue = el.getElement('ul');
				
                                el.addEvent('mouseover',function(){
					this.submenue.setStyles({
						'visibility': 'visible'
					});
				});
				el.addEvent('mouseout',function(){
					this.submenue.setStyles({
						'visibility': 'hidden'
					});
				});
			}
		});
	})
}
Das Script funktioniert auch ganz gut, nur folgendes passiert mir jetzt beim IE6:

Wenn ich mit der Maus über den TEXT-Hyperlink fahre erscheint das Submenü, aber sobald ich nur 1px ausserhalb des Hyperlink-Textes bin verschwindet das Submenü wieder!

Das gleiche Script hab ich z.b. auch auf dieser Seite verwendet. Dort ist es so wenn ich über das <li> fahre (und nicht über den Hyperlink-Text) erscheint das Submenü und das schließt sich erst wieder wenn ich einmal mit der Maus im Submenü war und es dann wieder verlasse...

Was mach ich falsch, was hab ich anders gemacht!?

Bitte helft mir, die Seite ist sehr wichtig und sollte heute noch fertig werden!
Wär super wenn mir da jemand helfen könnte...

Grüße,
infernalshade

Geändert von infernalshade (20.11.2008 um 14:06 Uhr)
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 20.11.2008, 08:59
{ display: random;}
XHTMLforum-Kenner
 
Registriert seit: 08.09.2004
Ort: Stuttgart
Beiträge: 5.039
andir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblick
Standard

Zitat:
Das gleiche Script hab ich z.b. auch auf dieser Seite verwendet. Dort ist es so wenn ich über das <li> fahre (und nicht über den Hyperlink-Text) erscheint das Submenü und das schließt sich erst wieder wenn ich einmal mit der Maus im Submenü war und es dann wieder verlasse...
Funktioniert in meinem IE6 nicht. Ist allerdings die Standalone-Variante, was Probleme mit dem JS Code bedeuten könnte. Da hovert übrigens auch nicht das gesamte li im IE6, sondern nur der Link.

Was mir daher als erstes einfällt, ist, dass Du nav a und nav span nicht 100% Breite gegeben hast ( oder pos. relative)

Das hilft auch beim IE 6 den hoverbaren Bereich über den Inhalt des li's auszudehnen.

Ansonsten schau Dir doch mal folgendes Klappemnü mit suckerfish an:

Son of Suckerfish Dropdowns | HTML Dog
__________________
Grüsse Andreas- auch mal wieder da...

Design isn't about the tools, it's about creating the best experience for the user. A design should be based on usability, accesibility, aesthetics, but never on floats, lists or background images. ( by Cameron Adams)
Wiedergelesen: > hier und hier

[Foren-Links] Dein Post? Klar, DAS vorher gelesen? Hilft. ## User-Landkarte
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 20.11.2008, 09:12
creativ.handwerk
neuer user
Thread-Ersteller
 
Registriert seit: 10.11.2008
Ort: 94357 Konzell
Beiträge: 79
infernalshade befindet sich auf einem aufstrebenden Ast
Standard

Achja, hab vergessen was zu sagen:

Das stimmt das bei der Hotel-Seite das Sub nur aufklappt wenn man über den Text fährt - das ist bei mir genauso - jedoch geht das erst dann wieder weg (also das Sub) sobald ich mindestens EINMAL im Subfeld (Also ich <ul> <ul>) war und es wieder verlasse!

Der Unterschied zwischen der jetzigen Site und der Hotel-Seite ist folgender:

Bei der Hotelseite fährt man im IE6 über den Hyperlink-Text und das Menü klappt auf und geht erst weg wenn man das Submenü mit der Maus einmal "befahren" hat und dann wieder rausfährt aus dem Submenü

Bei der jetzigen Seite geht beim überfahren des Hyperlink-Textes ebenfalls das Submenü auf, jedoch geht das sofort wieder weg wenn ich von dem Text runterkomme!

@VuuRWerK: Ja aber wieso funktionierts bei der Hotel-Seite?!
Mit Zitat antworten
  #4 (permalink)  
Alt 20.11.2008, 10:38
creativ.handwerk
neuer user
Thread-Ersteller
 
Registriert seit: 10.11.2008
Ort: 94357 Konzell
Beiträge: 79
infernalshade befindet sich auf einem aufstrebenden Ast
Standard

So ich habs genau so gemacht wie auf dem Suckerfish Tutorial, deren Script funktioniert fast so wie meins.

Leider besteht aber mit der Suckerfish Methode DAS GLEICHE Problem weiterhin Komisch ist das...
Mit Zitat antworten
  #5 (permalink)  
Alt 20.11.2008, 11:10
creativ.handwerk
neuer user
Thread-Ersteller
 
Registriert seit: 10.11.2008
Ort: 94357 Konzell
Beiträge: 79
infernalshade befindet sich auf einem aufstrebenden Ast
Standard

Hab was rausgefunden...
Wenn ich auf das #nav li einen border lege, dann geht das Submenü auch bei überfahren des Borders auf! Dann also bei Überfahren des Textes und des Borders...dazwischen nicht...Wenn ich mehr weis meld ich mich wieder, vllt kann ich anderen mit dieser (Mit Sicherheit schon bald gefundenen) Erkenntnis helfen
Mit Zitat antworten
  #6 (permalink)  
Alt 20.11.2008, 13:58
creativ.handwerk
neuer user
Thread-Ersteller
 
Registriert seit: 10.11.2008
Ort: 94357 Konzell
Beiträge: 79
infernalshade befindet sich auf einem aufstrebenden Ast
Standard

hatte ich auch probiert, bringt nix, jedoch komm ich der lösung näher:

ich hatte vorher als schatten der navi-leiste einen absolute positionierten layer dahinter, also hinter dem navigations-balken...der beinhaltet eine transparente png-grafik mit dem schatten und DAS passt dem IE anscheinend nicht...weis gott warum...ganz hauts noch nicht hin aber ich halt euch aufm laufenden!

EDIT:
Ok ich habs rausgefunden

Hier die Lösung für die, die das gleiche oder ein ähnliches Problem wie ich haben:

- Die Navigation darf NICHT aus dem Eltern-Element rausragen (z.b. durch position:absolute), die Navigation muss stets innerhalb des Elternelements sein
- Hinter der Navigation darf KEIN anderer Layer liegen, der absolute positioniert wurde (Selbst dann nicht, wenn dieser einen niedrigeren z-index hat)

Viel Glück!

Und auf jeden Fall vielen Dank Leute für eure Lösungvorschläge, super Forum hier!

Grüße,
infernalshade

Geändert von infernalshade (20.11.2008 um 14:05 Uhr)
Mit Zitat antworten
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
Problem mit position, top, left + width im IE6 andinator CSS 2 28.10.2009 00:08
z-index Problem mit Select-Feldern im IE6 hinkel11 CSS 13 03.10.2009 18:21
IE6 Darstellungs problem einer Grafik Anni CSS 1 09.09.2009 14:28
Text-Zeichen im IE6 wiederholen sich – Problem... rg69 (X)HTML 2 05.06.2008 14:36
IE6 Problem, Rechte spalte (content) wird zu weit rechts angezeigt... kux CSS 20 02.06.2008 12:30


Alle Zeitangaben in WEZ +2. Es ist jetzt 17:19 Uhr.