✔ Verschobene Listenelemente im IE7

Sprint

Sprint

Erfahrenes Mitglied
Hallo,

der Internet Explorer macht mal wieder Probleme. Und zwar verschiebt er die Elemente einer horizontalen Liste nach links, aus dem umgebenden DIV hinaus. Im IE 8 und allen anderen Browsern stimmt die Position.

So sieht das ganze aus. Die grünen und violetten Rahmen sind nur zur Positionsdarstellung. Link

HTML: 
<div id="organic-tabs">
	<ul class="organ" id="explore-nav">
		<li class="organ" id="ex-Module">
			<a rel="Module" href="#" class="current">Module</a>
		</li>
		<li class="organ" id="ex-Wechselrichter">
			<a rel="Wechselrichter" href="#">Wechselrichter</a>
		</li>
		<li class="organ" id="ex-Solarcarport">
			<a rel="Solarcarport" href="#">Solarcarport</a>
		</li>
	</ul>
</div>
CSS: 
ul .organ { position: relative; left: -40px; list-style: none; }
.organ img { position: relative; margin-top: 10px; }
ul li.logo  { color: #666; height: auto; display: block; padding: 14px 4px 4px; border-bottom-color: #666; border-bottom-width: 1px; }
ul li.organ a { color: #666; text-decoration: none; display: block; padding: 4px; border-bottom-color: #666; border-bottom-width: 1px; }
ul li.organ a:hover { color: #bb0504; background: #dbe0e4; }
ul li:last-child.organ a { border: none; }

#organic-tabs { background-image: none; background-repeat: repeat; background-attachment: scroll; background-position: 0 0; padding: 10px; margin: 0 0 15px; /*-moz-box-shadow: 0 0 5px #666; -webkit-box-shadow: 0 0 5px #666;*/ }

#explore-nav { overflow: hidden; margin: 0 0 10px 0; margin: 0; }
#explore-nav li { width: 97px; float: left; margin: 0 10px 0 0; }
#explore-nav li.last { margin-right: 0; }
#explore-nav li a { display: block; padding: 5px; background: #79949f; color: white; font-size: 10px; text-align: center; border: 0; margin: 0; }
#explore-nav li a:hover { color: #b80a0b; background-color: #dbe0e4; margin: 0; }
#explore-nav li#ex-Module a.current, ul#Module li a:hover { color: black; }
#explore-nav li#ex-Wechselrichter a.current, ul#Wechselrichter li a:hover { color: black; }
#explore-nav li#ex-Solarcarport a.current, ul#Solarcarport li a:hover { color: black; }
#Wechselrichter, #Solarcarport { display: none; }
Ich hoffe, daß es nur eine Kleinigkeit ist und man nicht alles für den IE 7 neu bauen muß.
 
Hi,

mit dieser korrigierten Regel kommt kein Browser auf die Idee, die Liste um 40px nach links zu verschieben :-)

CSS: 
/* Klassen-Selektoren werden ohne Leerzeichen notiert! */
ul.organ { position: relative;  /*left: -40px;*/ list-style: none; padding: 0; }

Du hast es nämlich im Verlauf der weiteren CSS-Regeln versäumt, neben dem voreingestellten Außenabstand ebenso den Innenabstand des Listenelements auf null zurückzusetzen, weshalb du mit der negativen Positionsangabe herumhantieren musstest, damit es von den übrigen Browsern nicht nach rechts eingerückt angezeigt wird.

mfg Maik
 
Hi Maik,

es hat zwar eine Zeitlang gebraucht bis mi einfiel, warum ich die -40 eingeführt hatte, aber das alles hat sich mit dem Entfernen des Leerzeichens in Wohlgefallen aufgelöst. Fast zumindest, da IE 7 jetzt die darunter folgenden Listen etwas nach rechts rückt. Aber ich denke, damit müssen die leben. Danke für deine Hilfe.
 
Nö, damit brauchen sie nicht zu leben :-)

Da im Markup eine weitere Liste mit der Klasse .organ folgt, erweiter diesen Regelblock folgendermaßen:
CSS: 
ul.organ { ... margin: 0; /* Außenabstand auf null setzen */ }

Diese Angabe hast du zwar für #explore-nav vorgesehen, jedoch nicht für #Module, und somit rückt der IE7 (und älter) diese Liste auch nach rechts ein.

mfg Maik
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück