Navi-Leiste im IE6 nach unten verschoben/zerhackt + Hover im IE6 läuft nicht

S

Steve2010

Grünschnabel
Hallo liebe Forum-Gemeinde,

ich bin mit meinem Problem langsam am verzweifeln. Habe mit meinem bescheidenen CSS Grundwissen nachfolgende Seite erstellt: http://www.foto-solutions.de/Visionfood/Website2
Läuft in Opera, FF + IE8 tadellos - HTML + CSS sollten valide sein.

Im IE7 ist jetzt die Klappnavi leicht verschoben, damit kann ich aber noch gut leben. Der IE6 jedoch verschiebt mir die Navi um ca. 10-15 px nach unten, den 5. Menüpunkt (kontakt) setzt er in eine zweite Zeile. Ich habe mich an CC's versucht, kriege es aber einfach nicht hin.

Das Zweite ist der Hover-Effekt. Natürlich weiß ich, dass der IE6 den nicht kennt. Aber auch hier komme ich weder mit Suckerfish (wie bzw. wo wird das Script eingebaut?) noch mit Stu Nicholls weiter.

Ich wäre euch wirklich sehr dankbar, wenn ihr mir helfen könnten. Da ich mir an diesem beiden Punkten seit Wochen die Zähne ausbeiße.

Hier der relevante Code (Doctype Strict - ohne XML):

HTML: 
<link rel="stylesheet" media="screen" href="CSS/layout.css" />
	
	
	<!--[if IE 6]>
    <link rel="stylesheet" type="text/css" href="ie6.css" />
	<![endif]-->


	<!--[if IE 7]>
    <style type="text/css">@import url(ie7.css);</style>
    <![endif]-->

	
	<!--[if lt IE 8]>
	<script src="http://ie7-js.googlecode.com/svn/version/2.0(beta3)/IE8.js" 
	type="text/javascript">
	</script>
	<![endif]-->
	
		
	<title>
			Visionfood Gewürze und Extrakte
	</title>
	
	</head>
	
	<script type="text/javascript" src="javahover.js"></script>
	
		<body>

	<div id="branding">
		<a href="/index/"><h1>Visionfood</h1></a>
	</div>
	
	
		<blockquote class="info">
		<p>Gewürze und Extrakte</p>
		</blockquote>
	<!-- Branding Ende -->
	

	<div id="navi">
		<h2>Navigation</h2>
			
			<div id="navbar">
			
			<ul>
				<li><a href="/" id="current">home</a></li>
			  	<li><a href="/qualität/">qualität</a></li>
			 	<li><a href="/leistungen/">leistungen</a></li>
			 	
			 	<li><a href="/produkte/">produkte</a>
			 		<ul><!-- öffnet die Klappnavi von Sortiment -->
			 		
			 			<li><a href="/gewürze/">gewürze</a></li>
	               		<li><a href="/extrakte/	">extrakte</a></li>
	               		<li><a href="/bio-produkte/	">bio-produkte</a></li>
	               		<li><a href="/sonstige produkte/ ">sonstige produkte</a></li>
	                        
	            	</ul><!-- schließt die Klappnavi von Sortiment -->
	            </li>
			 	
			 	<li><a href="/kontakt/">kontakt</a></li>
			</ul>
			</div><!--Ende Navbar-->	
			
	</div>
	<!--Ende Navi-->


Hier das CSS
Code: 
@import url("norm.css");

body {
	position: relative;
	background: url(../images/Background-Verlauf.jpg) repeat-x;
	background-position: 0px 100px;
	margin: 0 auto;
	text-align:center;
	width: 950px;
	top: 5px;
	font-size: 100.01%;
	font-family: Arial, Tahoma, "Lucida Sans", "Lucida Grande", "Lucida Sans Unicode", sans-serif;
	}


#branding {
	background: url(../images/VisionfoodLogo3.jpg) no-repeat;
	text-indent:-9999px;
	position: relative;	
	left: 25px;
	top: 15px;
	width: 950px;
	height: 60px;
	}


blockquote.info {
	text-indent: -9999px;
	height:0;
	}


/*--Definiert den Navi Div--*/
#navi {
	background: url(../images/TeaandPepper950x250mNB2.jpg) no-repeat left top;
	border-left: solid 1px #cbdce4;
	border-right: solid 1px #cbdce4;
	position: relative;
	top: 35px;
	width: 948px;
	height: 230px;
	font-family: Arial, Tahoma, "Lucida Sans", "Lucida Grande", "Lucida Sans Unicode", sans-serif;
	font-variant: small-caps;
	font-size: 0.8em;
	letter-spacing:0.1em;
	}


#navbar {
	margin: 0;
	padding: 0;
	height: 1em;
	}
	
#navbar li {
	list-style: none;
	float: left;
	width: 20%;
	}
	
#navbar li a {
	display: block;
	padding: 4px 0px;
	height: 19px;
	width: 190px;
	color: #ffffff; 
	text-decoration: none; 
	}

#navbar li a:hover, #navbar li a#current {
	background-color: #e1ffd2;
	color: #2a6e91;
	font-weight: bold;
	font-size: 1.1em;
	}

#navbar li ul {
	display: none;
	width: 10em;
	}

#navbar li:hover ul, #navbar li.hover ul {
	display: block;
	position: absolute;
	margin: 0;
	padding: 0;
	}
	
#navbar li:hover li, #navbar li.hover li {
	float: none;
	} 
	
#navbar li:hover li a, #navbar li.hover li a {
	background-color: #e1ffd2;
	color: #2a6e91;
	height: 19px; 
	border-top: 1px solid #6ea876;
	}

#navbar li li a:hover {
	font-weight: bold;
	font-size: 1.1em;
	}


Viele Grüße
Steve
 
Im HTML-Code stimmen die angegebenen Pfade zu "ie6.css", "ie7.css" und "javahover.js" überhaupt nicht, denn diese Dateien liegen, wie "layout.css", gleichermaßen im Verzeichnis "CSS".
 
Zuletzt bearbeitet:
HI,
HTML + CSS sollten valide sei
Zum Vergrößern anklicken....
Sollten oder sind? ;)
Also dein Html kann schonmal nicht valide sein da sich
Javascript: 
<script type="text/javascript" src="javahover.js"></script>
zwischen </head> und <body> befindet. Das gehört in den Head-Bereich.
Dann gehört der H1-Tag vor das a-Element und nicht hinein. Den H ist ein Block Level-Element und a ein Inline-Element. Das gilt natürlich für alle h-Elemente und auch für p-Elemente.
Welches du auch schließen solltest.
Also soviel zur Validität.

Was das hovern betrifft so kann das der IE6 schon aber nur auf a-Elementen.
Um das Problem zu umgehen könntest du ja trotzdem auf deinen li:hover Klassen noch ein a:hover dazu nehmen. Dann funktioniert das hovern halt nur auf deiner Schrift aber das Menü geht trotzdem auch im IE auf.
Was ich jetzt nicht weiß ist ob du dem a dann noch eine Höhe zuweisen musst für das Dropdown-Menü. Eventuell kann es sein dass die Unterpunkte sonst direkt wieder verschwinden wenn du von der Schrift gehst.

Viele Grüße
 
Zuletzt bearbeitet von einem Moderator:
Hallo Spicelab,

darf echt nicht wahr sein! Manchmal sieht man echt vor lauter Wald die Bäume nicht mehr. Danke dir vielmals.

Damit habe ich die Anordnung der Boxen korrigieren können. Hast du noch einen Tipp, weshalb er mir den 5. Navi-Punkt umbricht in die nächste Zeile nimmt? Auch wenn ich im ie6-script die Breite verringere, es hilft nicht.

Viele Grüße
Steve
 
Hallo JFS,

thanx für die Antwort und die Fehlerhinweise. Gebe zu, die W3C Validierung hatte ich letzte Woche gemacht, bevor ich mich an das Java-Script, das ich eigentlich umgehen wollte, rangemacht hatte und nochmal einiges verändert hatte. Habe eben auch nochmal (nach einigen) Korrekturen validiert. Ähem ... werde mal schnell noch die Unsauberkeiten beseitigen.

Jetzt müsste ich nur noch das Problem lösen, dass mir der 5. Nav-punkt umbricht und die Links alle noch etwas nach unter rutschen.

Viele Grüße
Steve
 
CSS: 
#navbar li {
        list-style: none;
        float: left;
        /*width: 20%;*/* entfällt*/
        }

#navbar li a {
        display: block;
        padding: 4px 0px;
        height: 19px;
        width: 189.6px; /* 948px / 5 = 189.6px - und nicht 190px */
        color: #ffffff;
        text-decoration: none;
        }

Der im Javascript angegebene ID-Bezeichner "navbar" wird nicht im <div> sondern <ul> aufgerufen.
 
Entferne einfach <h2>Navigation</h2> vor der Navigation, dessen Inhalt du mit text-indent:-9999px verschwinden lässt, denn daran beißt sich offensichtlich der IE6 die Zähne aus, und verrückt die Navigation nach unten.

Deine IE6-spezifische absolute Positionsangabe top:35px für #navi ergibt dann stattdessen top:95px, womit zuzüglich deiner top:5px-Regel für <body> das Menü wie gewünscht 100px vom oberen Fensterrand gemessen ausgerichtet wird.

Ebenso müssen alle relativen top-Werte der nachfolgenden <div>'s für den IE6 angepasst werden, da sie zu weit oben sitzen, und das Hintergrundbild teilweise überdecken.
 
Zuletzt bearbeitet:
Jan-Frederik Stieler hat gesagt.:
Hallo,
du solltest deine Beiträge editieren wenn du auf einen Beitrag von dir direkt antwortest.
Gruß
Zum Vergrößern anklicken....
Aber nicht, wenn seither eine halbe Stunde ins Lande gezogen ist, und seiner zeitlich letzten Aktivität zufolge, Steve meine vorletzte Antwort registriert hat, womit er meine zwischenzeitlich neu gewonnenen Erkenntnisse auf diesem Wege nicht unmittelbar registrieren würde. Oder wird man neuerdings darüber per Email informiert, wenn ein Beitrag im abonnierten Thema editiert wurde, so wie bei einem neu eingetroffenen Beitrag?
 
Zuletzt bearbeitet:
Euch beiden schon mal herzlichen Dank!

Bin leider erst wieder morgen Abend zu Hause. Werde dann alles gleich einarbeiten. Das was ich bisher schon berücksichtigt hatte, hat auf Anhieb funktioniert. Auf alle Fälle habt ihr mir schon sehr geholfen. Diese Probleme haben mir in den letzten Wochen jede Menge grauer Haare eingebracht.

Euch noch einen schönen Abend.

Viele Grüße
Steve
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück