Navi-Leiste im IE6 nach unten verschoben/zerhackt + Hover im IE6 läuft nicht @ tutorials.de: Tutorials, Forum & Hilfe

Steve2010 · 07.08.10 15:55

Hallo liebe Forum-Gemeinde,

ich bin mit meinem Problem langsam am verzweifeln. Habe mit meinem bescheidenen CSS Grundwissen nachfolgende Seite erstellt: 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-Code:

<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

spicelab · 07.08.10 16:28

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".

**Jan-Frederik Stieler** · 07.08.10 16:52

HI,

HTML + CSS sollten valide sei

Sollten oder sind?

Also dein Html kann schonmal nicht valide sein da sich[javascrip]<script type="text/javascript" src="javahover.js"></script>
[/javascript] 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

Steve2010 · 07.08.10 17:17

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

Steve2010 · 07.08.10 17:25

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

spicelab · 07.08.10 17:26

Code 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.

spicelab · 07.08.10 17:54

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.

**Jan-Frederik Stieler** · 07.08.10 18:37

Hallo,
du solltest deine Beiträge editieren wenn du auf einen Beitrag von dir direkt antwortest.
Gruß

spicelab · 07.08.10 18:59

Zitat von Jan-Frederik Stieler

Hallo,
du solltest deine Beiträge editieren wenn du auf einen Beitrag von dir direkt antwortest.
Gruß

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?

Steve2010 · 07.08.10 20:49

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

**Jan-Frederik Stieler** · 07.08.10 21:29

Hi,
ich meinte eigentlich nicht dich, Spicelab, sondern Steve2010. Bezogen war dass auf die Beiträge von 17:17 und 17:25 Uhr.

Viele Grüße

spicelab · 07.08.10 21:48

Zitat von Jan-Frederik Stieler

Hi,
ich meinte eigentlich nicht dich Spicelab sondern Steve2010. Bezogen war dass auf die Beiträge von 17:17 und 17:25 Uhr.

Viele Grüße

Achso

Da wollte Steve sich wohl mit den gesonderten Beiträgen persönlich an uns beide wenden

Steve2010 · 08.08.10 20:01

Seht es mir nach. Bin noch neu im Forum.

Viele Grüße
Steve

**Jan-Frederik Stieler** · 08.08.10 20:28

Natürlich. Ich wollte dich damit eigentlich auch auf die Funktion hinweisen

.

Gruß

Steve2010 · 08.08.10 20:54

Zitat von Steve2010

Seht es mir nach. Bin noch neu im Forum.

Viele Grüße
Steve

... und schon megabegeistert. Leute ich kann euch sagen, bin ich happy, dass ich diese Nüsse Dank eurer Hilfe geknackt habe.
Ach ja ... CSS + HTML sind jetzt valide ...

(gerade geprüft)

tut orials.de	tut verbinden	tut dir helfen	tut kooperieren
©2000-2012 tutorials.de Alle Rechte vorbehalten	tut informieren » Impressum » Nutzungsregeln » Netiquette » Team » Redaktion	» Tutorials » Videotutorials » Showroom » Events & Contests » Chat » RSS-Feed » Blogs	» der-webdesigner.net » DesignerInAction » Design Nation » Directorforum » Flashhilfe » PHP-Resource » PHPwelt » PSD-Tutorials

Themen-Optionen

Anzeige

Ähnliche Themen

Navi-Leiste richtet sich nicht richtig aus

CSS-Container nach unten verschoben

navi nach unten verschieben

Rechte Tabellenspalte komisch nach unten verschoben

Navi rutscht im IE nach unten

Stichworte

E-Mail:

Abonnieren Abbestellen