Problem mit einer DropDown Liste

manuel_g · #1 (**permalink**) 30.03.2010, 22:52

Hi Leute,
auf folgender Seite ("http://www.efentwell.ch/typo3/portfolio") stelle ich ein komisches Problem mit dem Internet Explorer fest. Und zwar hat es oben rechts 1 dropdown Navi, die sich bei rollover öffnen sollten. Der Inhalt der Dropdows sollte per overflow über den restlichen Inhalt fliessen, was auf allen Browsern abgesehen vom IE auch passiert. Hier steht sich aber folgendes Problem ein:

IE 6/7: Das Dropdown erscheint, aber liegt unterhalb der restlichen Inhalte. Auf FF, Safari Chrome, etc, half ein z-index von 100. Auf IE 7 bringt das nichts.

IE 8: ads Dropdown bleibt display: none und nichts passiert!?!

Einige Tests scheinen darauf hinzuweisen, dass das Problem irgendwie mit "Position: absolute" zu tun haben muss, da das Dropdown erscheint, wenn ich die Position raus nehme, allerdings verschiebt sich dann der ganze Inhalt!

Der Doctype ist drin wie immer (siehe nächste Zeile) und der Validator spuckt zwar schon einige Fehler aus, allerdings keine, die mit den entsprechenden Klassen zu tun haben!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Die Seite ist in TYPO3 eingebettet und das Layout basiert ursprünglich auf YAML.

Hat jemand eine Ahnung, woran das liegen könnte? Bin meinerseits etwas am rätseln und könnte dringend ein paar neue Inputs gebrauchen

Danke schon mal und schöne Grüsse,
Manuel

Und hier der HTML Code des Dropowns (ist in TYPO3 eingebettet):

HTML-Code:

<div class="c25r">
	<div class="subcr">
		<ul id="portfolio_filter2" class="noscript_h">
			<li>
				<a href="portfolio//#all" class="products">Kunden</a>
				<div class="sub">
					<ul>
						<li><a href="portfolio/#amagortis">Amagortis</a></li>
						<li>etc…</li>
					</ul>
				</div>
			</li>
			<li>
				<a href="portfolio//#all" class="products">Branchen</a>
				<div class="sub">
					<ul>
						<li><a href="portfolio/#kultur">Kultur</a></li>
						<li>etc…</li>
					</ul>
				</div>
			</li>
		</ul>
	</div>
</div>

Und hier das CSS mit der "ominösen" Position Eigenschaft:

HTML-Code:

ul#portfolio_filter2 li .sub {
	display:none;
	float:left;
	left:0;
	position:absolute;
	top:25px;
	z-index:100;
}

plastiko · #2 (**permalink**) 30.03.2010, 23:13

Das Problem verursacht wohl position: relative; für .boxgrid_portfolio.
Mit z-index: -1 für .boxgrid_portfolio scheint es im IE7 zu funktionieren.

Edit:
Im IE6 hilft das vermutlich nicht.

fricca · #3 (**permalink**) 31.03.2010, 10:11

Die rel. positionierten li-Elemente der ersten Listenebene brauchen für die IEs den z-index. Und der muss höher sein als bei den nachfolgenden Elementen (da gibt's 50).

Werte wie 50 oder 100 bei z-index sind nicht sinnvoll. Der Wert 1 für die genannten li-Elemente würde ausreichen, ansonsten kann ich keine Notwendigkeit für weitere z-index-Angaben erkennen.

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
horizontale Liste - Problem	Frogtime	CSS	3	29.01.2009 21:27
Problem mit einfacher Liste	Lena83	CSS	10	06.01.2009 22:39
Problem mit DropDown im IE7	mario-no	CSS	1	30.09.2008 11:50
Problem mit Liste im IE	labergangster	CSS	5	04.01.2006 23:41
Formular (Liste) Problem mit IE,..	otc	CSS	2	17.03.2005 04:04