zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Problem mit FlyOut Menu im IE7

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 15.03.2010, 11:50
Benutzerbild von quarki69
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 06.01.2007
Beiträge: 102
quarki69 befindet sich auf einem aufstrebenden Ast
Rotes Gesicht Problem mit FlyOut Menu im IE7

Hallo und guten Morgen zusammen!

Ich habe für eine Website ein Menu gebastelt, welches die Hauptmenupunkte in einer Liste enthält, welche jedoch, wegen einer besonderen Schriftart, durch eine Grafik ersetzt werden.
Die Untermenupunkte befinden sich in untergeordneten Listen, werden nur durch das CSS gestaltet und "fliegen" beim überhovern der Überpunkte nach rechts heraus.
Dies alles funktioniert wunderbar; nur nicht im IE7. Dort verschwindet das jeweilige Untermenu, wenn man mit der Maus nicht schnell genug unterwegs ist.

Zwar habe ich nun bereits an mehreren Stellen gelesen, dass genau dieser Bug existiert, komme jedoch absolut nicht dahinter, wieso es sich bei mir so verhält.

Wenn sich jemand die Site online anschauen mag, teile ich den Link dort hin gerne mit. Aber vielleicht reichen ja auch die folgenden Auszüge zur Fehlerfindung aus.

Ganz vielen Dank und schöne Grüße, Mark

Auszug aus dem HTML:

HTML-Code:
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
   	<title>Meine Seite</title>
   	<link href="new.css" rel="stylesheet" type="text/css" />
	  <!--[if lte IE 7]><style type="text/css">
	  		#navigation a {cursor: hand;}
				*html #navigation a:hover {	text-indent: 0;}
				*html #navigation ul ul li {
					margin-top: -1px;
					}
			</style><![endif]-->
		<!--[if lte IE 6]>
  	<style type="text/css">
			body {behavior: url(sidepages/csshover.htc);}
  	</style>
  		<noscript>
				<style type="text/css">
				#navigation ul ul {margin: 0px;}
				</style>
  		</noscript>
		<![endif]-->
		<script type="text/javascript" src="sidepages/jquery-1.2.6.min.js"></script>

...

</head>



<div id="navigation">
		<ul>
			<li id="warum"><a href="fueruns.html">WARUM WIR?<b></b></a></li>
			<li id="wohlfuehl"><a href="wohlfuehl.html">WOHLF&Uuml;LATMOSPH&Auml;RE<b></b></a></li>
			<li id="team"><a href="team.html">TEAM<b></b></a>		
				<ul>
					<li class="first"><a href="doktor1.html">Dr. Eins</a></li>
					<li><a href="doktor2.html">Dr. Zwei</a></li>
					<li><a href="doktor3.html">Dr. Drei</a></li>
					<li><a href="doktor4.html">Dr. Vier</a></li>
					<li><a href="mitarbeiter1.html">Mitarbeiter Eins</a></li>
					<li><a href="mitarbeiter2.html">Mitarbeiter Zwei</a></li>
					<li><a href="mitarbeiter3.html">Mitarbeiter Drei</a></li>
					<li><a href="mitarbeiter4.html">Mitarbeiter Vier</a></li>
					<li><a href="mitarbeiter5.html">Mitarbeiter F&uuml;nf</a></li>
					<li><a href="mitarbeiter6.html">Mitarbeiter Sechs</a></li>
					<li><a href="mitarbeiter 7.html">Mitarbeiter Sieben</a></li>
					<li><a href="mitarbeiter8.html">Mitarbeiter Acht</a></li>
				</ul>
			</li>
			<li id="praxis"><a href="praxis.html">PRAXIS<b></b></a>
				<ul>
						<li class="first"><a href="kontakt.html">Kontakt</a></li>
						<li><a href="anfahrt.html">Anfahrt</a></li>
						<li><a href="ueberuns.html">&Uuml;ber uns</a></li>
						<li><a href="zeiten.html">&Ouml;ffnungszeiten</a></li>
						<li><a href="impressum.html">Impressum</a></li>
					</ul>
				</li>
			<li id="leistung"><a href="leistung.html">LEISTUNGSSPEKTRUM<b></b></a>
				<ul>
						<li class="first"><a href="technik.html">Neueste Technik</a></li>
						<li><a href="implantologie.html">Implantologie</a></li>
						<li><a href="funktionell.html">Funktionelle Behandlung</a></li>
						<li><a href="aesthetik.html">&Auml;sthetische Behandlung</a></li>
						<li><a href="kinder.html">Kinderzahnbehandlung</a></li>
						<li><a href="falten.html">Faltenbehandlung</a></li>
						<li><a href="reinigung.html">Professionelle Zahnreinigung</a></li>
						<li><a href="kiefer.html">Kieferorthop&auml;die</a></li>
						<li><a href="medizin.html">Ganzheitliche Zahnmedizin</a></li>
						<li><a href="kopfschmerz.html">Craniomandibul&auml;re Dysfunktion</a></li>
					</ul>
				</li>
			<li id="service"><a href="service.html">SERVICE<b></b></a>
				<ul>
						<li class="first"><a href="praxisservice.html">Praxisservice</a></li>
						<li><a href="news.html">News</a></li>
				</ul>
			</li>
		</ul>
	</div>
Das entsprechende CSS:

Code:
#menu{
	float:left;
	margin-left: 20px;
	background-color: #fff;
	}
#logo ul li {
	list-style:none;
	line-height: 0.1em;
	font-size: 0.1em;
	}
#logo a {
	height:150px;
	width: 250px;
	background: #fff url(images/logo.png) no-repeat;
	display: block;
	outline: none;
	}

#logo a span {
	display: none;
}
#navigation ul {
	liststyle: none;
	width: 250px;
	height: 144px;
	float: left;
	}
#navigation li {
	list-style: none;
	width: 250px;
	height: 24px;
	}
#navigation a {
	display: block;
	height: 100%;
	position: relative;
	text-decoration: none;
	overflow: hidden;
}

#navigation a b {
	display: block;
	position: absolute;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
	background: url(images/navigation.png) no-repeat;
}

#navigation #warum b {
	background-position: 0px -0px;
}
#navigation #wohlfuehl b {
	background-position: 0px -24px;
}
#navigation #team b {
	background-position: 0px -48px;
}
#navigation #praxis b {
	background-position: 0px -72px;
}
#navigation #leistung b {
	background-position: 0px -96px;
}
#navigation #service b {
	background-position: 0px -120px;
}

#navigation li#warum:hover a b {
	background-position: 0px -144px;
}
#navigation li#wohlfuehl:hover a b {
	background-position: 0px -168px;
}
#navigation li#team:hover a b {
	background-position: 0px -192px;
}
#navigation li#praxis:hover a b {
	background-position: 0px -216px;
}
#navigation li#leistung:hover a b {
	background-position: 0px -240px;
}
#navigation li#service:hover a b {
	background-position: 0px -264px;
}

/* fuer den IE6 */

#navigation li#warum a:hover b {
	background-position: 0px -144px;
}
#navigation li#wohlfuehl a:hover b {
	background-position: 0px -168px;
}
#navigation li#team a:hover b {
	background-position: 0px -192px;
}
#navigation li#praxis a:hover b {
	background-position: 0px -216px;
}
#navigation li#leistung a:hover b {
	background-position: 0px -240px;
}
#navigation li#service a:hover b {
	background-position: 0px -264px;
}


#navigation ul ul {
	position: absolute;
	left: -99999px;
	}
#navigation ul li:hover {
	position:relative;
	}
#navigation ul li:hover ul{
	z-index:12;
	left: 250px;
	top: -1px;
	}
	
#navigation li:hover li a {
	background-color: #fff;
	}
#navigation li li a:hover {
	background-color: #f0f0f0;
	}

#navigation ul ul li a {
	display: block;
	height: auto;
	width: 250px;
	padding: 5px 0 5px 0;
	text-decoration:none;
	color: #000;
	outline: none;
	}

#navigation ul ul li{
	text-align: center;
	font-size: 0.9em;
	border-left: 1px solid #c8c8c8;
	border-right: 1px solid #c8c8c8;
	border-bottom: 1px solid #c8c8c8;
	}
#navigation ul ul li.first{
	border-top: 1px solid #c8c8c8;
	margin-top: 0px;
	}
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 15.03.2010, 15:47
Benutzer
neuer user
 
Registriert seit: 15.03.2010
Beiträge: 35
highpix befindet sich auf einem aufstrebenden Ast
Standard Antwort

du wendest, wenn ich das richtig gesehen habe :hover auf ein LI Element an, der IE kann aber wenn mich nciht alles täuscht :hover nur auf a elemente verarbeiten, versuche mal in Deiner CSS Bedingung Die Angebae z.B. navigation li li:hover gegen navigation li li a:hover zu setzten.

Gruß
HighPix
Markus Leitner
HighPix | Werbeagentur | Medienagentur | Marketingagentur | Grafikdesign | SEO | Suchmaschinenoptimierung
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 15.03.2010, 16:01
Benutzerbild von quarki69
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 06.01.2007
Beiträge: 102
quarki69 befindet sich auf einem aufstrebenden Ast
Lächeln

Hallo highpix und willkommen im Forum!

Vielen Dank für den Hinweis!

Die von Dir genannten Einträge sind ja deshalb zwei mal aufgeführt. Ein weiteres mal unter "/* fuer den IE6 */" ...

Mit Zitat antworten
  #4 (permalink)  
Alt 15.03.2010, 16:09
Benutzer
neuer user
 
Registriert seit: 15.03.2010
Beiträge: 35
highpix befindet sich auf einem aufstrebenden Ast
Standard Antwort

das habe ich schon gesehen, aber scheinbar hast du anweisungen übersehen, die sich im hover noch immer auf ein Li Element beziehen:

#navigation ul li:hover {
position:relative;
}
#navigation ul li:hover ul{
z-index:12;
left: 250px;
top: -1px;
}

#navigation li:hover li a {
background-color: #fff;
}

dies habe ziemlich am Ende Deines CSS unter der /* ie6 Anweisung entdeckt, vielleicht hast du es übersehen und desshalb noch Probs.

Gruß
HighPix
HighPix | Werbeagentur | Medienagentur | Marketingagentur | Grafikdesign | SEO | Suchmaschinenoptimierung
Mit Zitat antworten
  #5 (permalink)  
Alt 15.03.2010, 16:19
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.792
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard

highpix, IE7 kann li:hover.
Das Dropdownmenü wird in keinem Browser mehr funktionieren, wenn pauschal alles auf a:hover umgestellt wird. Die Submenüs sind keine Kinder von a -- und können es auch nicht sein.
Gemäß den Codeschnipseln soll die Unterstützung für IE6 über behavior: url(sidepages/csshover.htc) umgesetzt werden.

quarki69, du bist doch nicht neu hier. Du kennst die Hinweise für Fragende. Was soll das hier also mit den Codesschnipseln?
Mit Zitat antworten
  #6 (permalink)  
Alt 15.03.2010, 16:46
Benutzerbild von quarki69
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 06.01.2007
Beiträge: 102
quarki69 befindet sich auf einem aufstrebenden Ast
Lächeln

highpix, ich hab's an anderer Stelle gefunden! Trotzdem vielen Dank für die freundliche Unterstützung...

Mir ist aufgefallen, dass es sichtbare Lücken zwischen den Listenpunkten der untergeordneten UL gab. Sobald man mit der Maus darüberfuhr verschwand die Liste.

Der Eintrag

Code:
#navigation ul ul li {margin-bottom: -1px;}
hat's behoben!

fricca, das mit den Codeschnipseln tut mir leid, daran habe ich nun wirklich nicht gedacht. Sorry!
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
Css Menu Problem Rapidement CSS 11 16.06.2011 15:38
Seit IE9 Problem mit Superfish Menu theidmann CSS 7 24.05.2011 16:17
Hilfe css Menu center xXcyberXx CSS 5 28.11.2010 20:51
ie 7 - menu css - a:hover behaviour only on text not on the whole box sycorax27 CSS 1 18.06.2007 23:34


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