IE 7 Opacity BUG?!

Ryan · 4. März 2010

Hallo liebe Forenmitglieder und Besucher!

Ich habe ein Problem mit dem IE v7.0.5730.11.

Es handelt sich um die opacity/transparenz.
Ich habe massig Foren durchsucht und nichts gefunden! Selbst google half nicht weiter.

Nun zum code:

HTML:

<head>
<style type="text/css">
*{
	margin:0px;
	padding:0px;
}

body{
	background-color:#383838;
}

.sov-room {
	float:left;
	margin-bottom:0;
	margin-left:0;
	margin-right:0;
	margin-top:0;
}

.sov-room-box-lo {
	background-attachment:scroll;
	background-color:transparent;
	background-image:url(img/roombox-lo.gif);
	background-position:left top;
	background-repeat:no-repeat;
}

.sov-room-box-ro {
	background-attachment:scroll;
	background-color:transparent;
	background-image:url(img/roombox-ro.gif);
	background-position:right top;
	background-repeat:no-repeat;
}

.sov-room-box-lu {
	background-attachment:scroll;
	background-color:transparent;
	background-image:url(img/roombox-lu.gif);
	background-position:left bottom;
	background-repeat:no-repeat;
}

.sov-room-box-ru {
	background-attachment:scroll;
	background-color:transparent;
	background-image:url(img/roombox-ru.gif);
	background-position:right bottom;
	background-repeat:no-repeat;
}

.sov-room-name {
	font-size:11px;
	font-weight:bold;
	padding-bottom:5px;
	padding-left:5px;
	padding-right:5px;
	padding-top:5px;
	text-align:left;
}

.sov-room-bedplaces {
	padding-bottom:15px;
	padding-left:5px;
	padding-right:15px;
	padding-top:5px;
}

.sov-bedplaces {
	padding-left:8px;
}

.sov-bedplace-stateoff-middle {
	background-image:url(img/bedplace_middle.png);
	background-repeat:no-repeat;
	height:48px;
	width:48px;
}

.sov-bedplace-schematicview {
	float:left;
	margin-bottom:8px;
	margin-left:8px;
}

.sov-bedplace-number-middle {
	color:#333333;
	font-size:14px;
	font-weight:bold;
	text-align:center;
	vertical-align:top;
}

.sov-room-panel-1-middle {
	height:145px;
	width:186px;
}

.sov-room-panel-1-middle-selected {
	height:145px;
	filter:alpha(opacity=60,finishopacity=40);
   	opacity:0.6;
	width:186px;
}
</style>
</head>
<body>
<div class="sov-room sov-room-box-ro sov-room-panel-1-middle">
	<div class="sov-room-box-lo">
		<div class="sov-room-box-ru">
			<div class="sov-room-box-lu">
				<div class="sov-room-box-content">
					<div class="sov-room-box-content-body">
						<div class="sov-room-panel-1-middle">
							<div class="sov-room-name">
								<div class="gwt-Label">Room22 (W 4)</div>
							</div>
							<div class="sov-room-bedplaces middle">
								<div class="sov-bedplaces">
									<div class="sov-bedplace-stateoff-middle sov-bedplace-schematicview">
										<div class="sov-bedplace-number-middle">
											<div class="gwt-Label">157</div>
										</div>
									</div>
									<div class="sov-bedplace-stateoff-middle sov-bedplace-schematicview">
										<div class="sov-bedplace-number-middle">
											<div class="gwt-Label">300</div>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
<div class="sov-room sov-room-box-ro sov-room-panel-1-middle">
	<div class="sov-room-box-lo">
		<div class="sov-room-box-ru">
			<div class="sov-room-box-lu">
				<div class="sov-room-box-content">
					<div class="sov-room-box-content-body">
						<div class="sov-room-panel-1-middle">
							<div class="sov-room-name">
								<div class="gwt-Label">Room2 (W 1)</div>
							</div>
							<div class="sov-room-bedplaces middle">
								<div class="sov-bedplaces">
									<div class="sov-bedplace-stateoff-middle sov-bedplace-schematicview">
										<div class="sov-bedplace-number-middle">
											<div class="gwt-Label">17</div>
										</div>
									</div>
									<div class="sov-bedplace-stateoff-middle sov-bedplace-schematicview">
										<div class="sov-bedplace-number-middle">
											<div class="gwt-Label">19</div>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
<div class="sov-room sov-room-box-ro sov-room-panel-1-middle-selected">
	<div class="sov-room-box-lo">
		<div class="sov-room-box-ru">
			<div class="sov-room-box-lu">
				<div class="sov-room-box-content">
					<div class="sov-room-box-content-body">
						<div class="sov-room-panel-1-middle-selected">
							<div class="sov-room-name">
								<div class="gwt-Label">Room22 (W 4)</div>
							</div>
							<div class="sov-room-bedplaces middle">
								<div class="sov-bedplaces">
									<div class="sov-bedplace-stateoff-middle sov-bedplace-schematicview">
										<div class="sov-bedplace-number-middle">
											<div class="gwt-Label">157</div>
										</div>
									</div>
									<div class="sov-bedplace-stateoff-middle sov-bedplace-schematicview">
										<div class="sov-bedplace-number-middle">
											<div class="gwt-Label">300</div>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
<div class="sov-room sov-room-box-ro sov-room-panel-1-middle-selected">
	<div class="sov-room-box-lo">
		<div class="sov-room-box-ru">
			<div class="sov-room-box-lu">
				<div class="sov-room-box-content">
					<div class="sov-room-box-content-body">
						<div class="sov-room-panel-1-middle-selected">
							<div class="sov-room-name">
								<div class="gwt-Label">Room2 (W 1)</div>
							</div>
							<div class="sov-room-bedplaces middle">
								<div class="sov-bedplaces">
									<div class="sov-bedplace-stateoff-middle sov-bedplace-schematicview">
										<div class="sov-bedplace-number-middle">
											<div class="gwt-Label">17</div>
										</div>
									</div>
									<div class="sov-bedplace-stateoff-middle sov-bedplace-schematicview">
										<div class="sov-bedplace-number-middle">
											<div class="gwt-Label">19</div>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>

</body>

Hier ein Screenshot des Ganzen.

Im Bild erkennt Ihr links 2 Räume die unselektiert sind.
Rechts seht Ihr genau diese als selektierte.
Im code ist NUR die alpha opacity verändert worden.

Irgendwie verschwinden Teile der DIVs

Kann mir da jemand helfen? Ich hoffe ich habe es genau/verständlich beschrieben

Viele Grüße und schonmal danke
Ryan

Die Funktion die es später haben soll ist, dass ein "Raum" beim Klick transparent wird.
Der Code dazu ist bereits vorhanden und funktioniert, allerdings ist der Bug im IE vorhanden *verzweifel*

Maik · 4. März 2010

Hi,

hast du mal einen Link zur Seite, damit man in den Genuß der verwendeten Hintergrundbilder kommt?

Ich kann nämlich mit deinem "nackten" Code nüscht im IE7 erkennen, was sich von den anderen Browsern unterscheidet :-(

mfg Maik

IE 7 Opacity BUG?!

Ryan

Maik

Neue Beiträge