[du ciel]

Hallo,

ich hab ein Problem mit CSS und dem IE wo ich echt nicht mehr weiter weiß.

Problem lautet: nach Anwendung von

filter: alpha(opacity=60);

in der CSS-Datei kann der IE7 zwar Transparenz darstellen, aber das per CSS definierte Drop-Down-Menü funktioniert nicht mehr bzw. wird nur bis zum Ende des DIV-Containers dargestellt.

Schalte ich die Transparenz für den IE wieder aus, dann stellt er das Pop-Menü korrekt dar und poppt es nach unten auf, so dass es über dem darunter liegenden DIV-Container mit den Inhalten liegt.

Die anderen Browser (FX, Opera) machen keinerlei Probleme, hier der Code:

<div id="ROOT">
	<div id="HEADER">
		<div id="MENUBAR">
			<ul id="MENU">

			<li><dl class="ONE">
				<dt><a href="#">News</a></dt>
			</dl></li>

			<li><dl class="ONE">
				<dt><a href="#">Programme</a></dt>
				<dd><a href="#" >SoMoPlan</a></dd>
				<dd class="LAST"><a href="#">Test</a></dd>
			</dl></li>

			<li><dl class="ONE">
				<dt><a href="#">Astronomie</a></dt>
				<dd class="LAST"><a href="#">Ephemeriden</a></dd>
			</dl></li>

			<li><dl class="ONE">
				<dt><a href="#">Musik</a></dt>
			</dl></li>

			</ul>

			<br class="CLEAR">
		</div>
	</div>
	<div id="CONTENTS">
		BLABLA
	</div>
</div>

und die CSS-Datei

#HEADER {
	background-image: url(images/layout_banner.jpg);
	background-repeat: no-repeat;
	background-position: top center;
	color: #555;
	margin: 0 14px 0 14px;
	height: 300px;
	position: relative;
}

#HEADER a {color:#555;}

#MENUBAR {bottom:0; position:absolute;}

/* Definition des gesamten Menüobjektes */
#MENU {list-style-type:none; margin:0; padding:0;}

/* Lage der Hauptlinks */
#MENU li {
	float: left;
	padding: 0;
	margin: 0 1px 0 0; /* Platz zwischen Links */
	position: relative;
	width: 100px;
	height: 50px;
	z-index: 100; /* bringt Menü auf oberste Ebene */
	opacity: 0.60; /* Transparenz für restliche Browser (ab CSS3) */
	-moz-opacity: 0.60; /* Transparenz für Mozilla-Browser */
	filter: alpha(opacity=60); /* Transparenz für IE */
}

/* Grundlayout der Menüelemente */
#MENU li a, #MENU li a:visited {text-decoration:none;} /* deaktiviert Standardformat der Links */
#MENU li dl {position:absolute; top:0; left:0; padding-bottom:5px;} /* unterer Randbalken der Hauptlinks */
#MENU li dd {display:none;} /* Untermenüs unsichtbar machen */

/* Aktivitäten bei Hover */
#MENU li a:hover {border:0;} /* Umrandung der Links bei Hover entfernen */
#MENU li:hover dd, #MENU li a:hover dd {display:block;} /* Aufpoppen der Unterlinks bei Hover */
#MENU li:hover dl, #MENU li a:hover dl {padding-bottom:5px;} /* Blockabschluss der Unterlinks */

/* Blockformat der Hauptlinks */
#MENU dl {width:100px; margin:0; padding:0; background:#c9ba65;}
#MENU dt {margin:0; padding:5px 5px 5px 20px; font-size:1.1em; color:#fff; border-bottom:1px solid #fff; border-top:1px solid #fff;}

/* oberer Randbalken der Hauptlinks */
#MENU .ONE {background:#827b6b; border-top:5px solid #dca;}

/* Background der Hauptlinks */
#MENU .ONE dt {background:#000;}

/* Layout der Unterlinks */
#MENU dd {margin:0; padding:0; color:#fff; font-size:1em; text-align:left;} /* Format der Unterlinks */
#MENU .ONE dd {border-bottom:1px solid #aaa;}
#MENU dd.LAST {border-bottom:1px solid #fff;} /* Abschlusslinie des letzten Unterlinks */

/* Blockbildung und Schriftfarbe der Hauptlinks */
#MENU dt a, #MENU dt a:visited {display:block; color:#fff;}

/* Schriftfarbe der Hauptlinks bei Hover */
#MENU dt:hover, #MENU dt:hover a {background:#fff; color:#000;}

/* Blockbildung und Abstände der Unterlinks */
#MENU dd a, #MENU dd a:visited {display:block; color:#fff; text-decoration:none; padding:4px 5px 4px 20px; width:75px;}

/* Hintergrund und Schriftfarbe der Unterlinks */
#MENU .ONE dd a {background:#000000; color:#fff;}

/* Hintergrund und Schriftfarbe der Unterlinks bei Hover */
#MENU .ONE dd a:hover {background:#ffffff; color:#000;}

/* löscht floated Items */
.CLEAR {clear:both; height:0; line-height:0.0; font-size:0;}

Vielleicht erkennt jemand, woran es liegt ... wahrscheinlich ist es einer der unzähligen Bugs des IE, aber vielleicht liegt der Fehler ja auch bei mir und jemand kann mir auf die Sprünge helfen. Auf jedenfall bin ich dankbar für jede Hilfe.



Grüße,
du ciel

Dieser Beitrag wurde von du ciel bearbeitet: 04. Oktober 2008 - 20:12

[Ludacris]

Zitat (du ciel: 04.10.2008, 21:09)

Hallo,

ich hab ein Problem mit CSS und dem IE wo ich echt nicht mehr weiter weiß.

Problem lautet: nach Anwendung von

filter: alpha(opacity=60);

in der CSS-Datei kann der IE7 zwar Transparenz darstellen, aber das per CSS definierte Drop-Down-Menü funktioniert nicht mehr bzw. wird nur bis zum Ende des DIV-Containers dargestellt.

Schalte ich die Transparenz für den IE wieder aus, dann stellt er das Pop-Menü korrekt dar und poppt es nach unten auf, so dass es über dem darunter liegenden DIV-Container mit den Inhalten liegt.

Die anderen Browser (FX, Opera) machen keinerlei Probleme, hier der Code:

Vielleicht erkennt jemand, woran es liegt ... wahrscheinlich ist es einer der unzähligen Bugs des IE, aber vielleicht liegt der Fehler ja auch bei mir und jemand kann mir auf die Sprünge helfen. Auf jedenfall bin ich dankbar für jede Hilfe.



Grüße,
du ciel

mach den codeblock rein

<!--[if IE 6]>
filter: alpha(opacity=60);
<![endif]-->

[du ciel]

Danke, aber leider bringt ein Einfügen der Code-Änderung in die CSS nichts, es wird gar nicht erst transparent im IE ... und ich hab leider auch nur den IE7 hier zum testen ...

woran könnte es sonst noch liegen?

[Halt's_Maul_Paul]

@Ludacris: Das duerfte wohl nichts bringen, da:
1.: Das Dropdown Menue unter IE auch nicht ohne Transparenz funktioniert,
2.: Die Angaben im Stylesheet von den anderen Browsern einfach ignoriert wird (wobei deine Variante wohl eleganter ist, das ganze dann aber im Header der HTML/PHP Datei stehen sollte und nicht im Stylesheet)

@du_ciel: Ich habe zwar leider im Moment auch keine Loesungsvorschlaege, aber vielleicht faellt mir noch was ein

Zu dem IE Versionsproblem faellt mir allerdings was ein: IETester ! Hiermit kann man die Versionen 5.5 bis 8b1 "emulieren" und somit fuer jeden IE der noch im Umlauf ist ein passendes Stylesheet schreiben.

Zu dem was Ludacris meinte nochmal: Folgendes sollte fuer IE's im Head der HTML stehen:

<!--[if IE 6]> 
<style type="text/css">
... irgend ein css code ...
</style>
// oder natuerlich auch:
<link rel="stylesheet" type="text/css" href="pfad/zu/einem/stylesheet" />
<![endif]>

Statt dem "IE 6" kann da auch "IE 5", "IE 5.5", "IE 6" oder "IE 8" stehen, ausserdem kann man vor dem "IE" noch "lt" (lower than = kleiner als), "lte" (lower than equal = kleiner gleich), "gt" (groesser als) oder "gte" (greater than equal = groesser gleich) schreiben.
Als Ergaenzung hierzu: Conditional Comments auf SelfHTML

Dieser Beitrag wurde von Halt's_Maul_Paul bearbeitet: 06. Oktober 2008 - 22:08

[du ciel]

@Paul: feiner Tipp mit dem IETester :-) ... aber du hast unrecht was das Popup-Menü betrifft, es funktioniert nämlich ohne Transparenz (IE7)

Ich habs jetzt auch nochmal wie gezeigt in den Header geschrieben ... Transparenz ja, Popup nein :-/

CSS ist bis auf den -moz-tag ebenfall valide, tja ... kurioses Ding dieser IE

[Halt's_Maul_Paul]

Zitat

... kurioses Ding dieser IE

Das kannste laut sagen ....