✔ background-image - IE6 Navigationsfehler

[hrboy]

Hallo Forum,

Ich habe folgendes Problem:

Ich habe eine Navigation und dazugehörige Navigations- images.
Die images stehen links neben den Navigationspunkten und sind keine list-style-image sondern background-image. In Firefox und anderen Browsern sieht alles gut aus, außer im IE6. Wenn ich zb. auf den Menüpunkt Information klicke, der noch zwei unterpunkte hat, wird das background-image nicht nur links neben der Schrift angezeigt, sondern auch weiter unten irgendwo in der Navigation. Sobald man aber mit der Maus über das image fährt, verschwindet es.
ich hab schon über all gegooglt aber nichts zu meinem Problem gefunden.
Hab es auch schon mit : background:... ; versucht, ohne Erfolg.

Falls noch etwas fehlt, füge ich es natürlich gerne so schnell wie möglich hinzu.

ich würde mich riesig freuen wenn ihr eine Idee habt...
(verzeiht mir falls ich irgendetwas falsch geschrieben habe oderso, das ist die erste Bekanntschafft mit Foren.)

css:

/* FORMATIERUNGEN FÜR NAVIGATION */
.nav { 
	padding-left: 0px; 
	margin-top: 0px; 
	}
.nav li {
	background-image: url(../images/qua_d.png); 
	background-repeat: no-repeat; 
	list-style: none; 
	background-position: 0px 1px; 
	margin-left: 2px; 
	padding-left: 16px; 
	}
ul.nav  {
	 margin: 0px; 
	 padding: 0px; 
	 }

.line { 
	width: 165px; 
	}
.line ul { 
	margin: 0; 
	margin-top: 0px; 
	padding: 0px; 
	}
.line li { 
	margin-top: 3px; 
	border-bottom: 1px solid; 
	border-color: #ccc; 
	padding-bottom: 6px; 
	}

/* Unternavigation */
ul.subnavi  { 
	margin-top: 10px; 
	padding: 0; 
	}
.subnavi li { 
	background-image: url(../images/qua_k.png); 
	background-repeat: no-repeat; 
	list-style: none; 
	background-position: 5px 2px; 
	margin-left: 0px; 
	padding-left: 18px; 
	border-bottom: 0px; 
	margin-top: -5px ;  
	}

<div class="nav">
	<div class="line">
		<ul>	
		<li><a href="/index.php"><strong class="quad">Startseite</strong></a></li>
		<li><a href="../symposium/symposium.php"><strong class="quad">IBS-Symposium</strong></a></li>
		<li><a href="../informationen/informationen.php"><strong class="quad">Informationen</strong></a>			
		<ul class="subnavi">
		<li><a href="../informationen/rueckblick.php"><strong class="quad">R&uuml;ckblick</strong></a></li>
		<li><a href="../informationen/organisationsteam.php"><strong class="quad">Organisationsteam</strong></a></li>			
		</ul>
		</li>					
		<li><a href="../medien/medien.php"><strong class="quad">Medien</strong></a></li>
		<li><a href="/partner.php"><strong class="quad">Partner</strong></a></li>
		<li><a href="../kontakt/kontakt.php"><strong class="quad">Kontakt</strong></a></li>
		<li><a href="/bewerbung.php"><strong class="quad">Online-Bewerbung</strong></a></li>			
		</ul>
	</div>
	<? // line ?>
</div>
<? // nav ?>

 

[DaviotStyle]

Hallo hrboy,

ich habe deinen Fehler reproduzieren können.
Und bei mir auch gelöst

und zwar musst du dein Attribut border-bottom abändern, da das bei mir den Fehler ausgelöst hat

.subnavi li {
...
border-bottom: 0px; /* FALSCH */
border:none; /* RICHTIG */
}

hoffe es passt jetzt bei dir.

Wenns noch immer nicht passt, dann wäre es gut wennn man das ganze CSS und HTML File bekommt, da sonst die Fehler suche etwas schwerer wird

 

[Maik]

Hi,

mit deinem Vorschlag wird bei mir im IE6 die unerwünschte Wiederholung des Hintergrundbildes keinesfalls behoben.

Ich wüsste jetzt auch nicht, was das mit der border-bottom:0px-Deklaration zu tun haben soll, bzw. wo nun der ausschlaggebende Unterschied zu deinem Lösungsvorschlag mit border:none liegt, denn in beiden Fällen erhält das Element keinen Rahmen: in hrboys Fall unten nicht, um so der Vererbung aus dem Selektor .line li entgegenzuwirken, und in deinem Fall eben an allen vier Seiten nicht.

Vielmehr erziele ich mit diesen Regelerweiterungen die Fehlerkorrektur:

* html .subnavi li {
        float:left;
        margin-top:0;
}
* html .subnavi {
        height:1%;
}

Anstelle des von mir in diesem Testbeispiel angewandten Star-HTML-Hacks lassen sich die beiden CSS-Regeln dem IE6 natürlich auch mit Hilfe der Conditional Comments zuweisen.

mfg Maik

 

[hrboy]

Vielen lieben Dank für eure schnelle Antwort und eure Bemühungen.. Echt super Top. Ich hab es noch nicht geändert, da ich noch andere sachen zu tun hatte, aber am Montag werd ich mich direkt dran schmeissen.

Ich wünsche euch ein schönes Wocchenende..
Und nochmals danke


Gruß denny

 

[hrboy]

Guten Morgen,

ich habe beide Vorschläge ausprobiert.
Wie Maik schon geschrieben hat funktioniert DaviotStyle´s vorschlag nicht.
Aber Maiks Regelerweiterung funktioniert.

Ich bedanke mich noch einmal für die schnelle reaktion und die bemühungen.

glg denny