div-container ein- und ausblenden - IE-Problem mit Positionierung

plumbum · Sep 30, 2008

Hallo,

ich verzweifle zurzeit an einem Kompatibilitätsproblem zum ie (Getestet in Version 6).

Und zwar möchte ich gerne einfach nur einen Div-Container aus- und einen anderen einblenden. Als Besonderheit hat dieser per css das Attribut "position:fixed" bekommen. Das ein- und ausblenden mache ich aktuell folgendermaßen:

Code:

			function openBar() {
				document.getElementById("closedBar").style.display = 'none';
				document.getElementById("openedBar").style.display = 'block'
				//document.getElementById("openedBar").style.zIndex = 10000;
				}
			
			function closeBar() {
				document.getElementById("openedBar").style.display = 'none';
				document.getElementById("closedBar").style.display = 'block'
				}

Das Ein- und Ausblenden der entsprechenden Container funktioniert soweit auch.
Beim Wechseln zwischen den Containern rückt jedoch der ie den neu angezeigten Container in den Hintergrund. Firefox und Opera machen dies dagegen natürlich nicht...

Ich habe da nun schon mit zIndex im CSS-File herumgespielt... jedoch ohne Erfolg... der Container bleibt im Hintergrund (also verdeckt von einem anderen Container)
Vllt. hat ja jemand ne Ahnung wie man dem ie beibringt, dass er den eingeblendeten container in den Vordergrund rückt. Ich bin da aktuell schon ziemlich am verzweifeln.

Besten Dank im Voraus!

BasicAvid · Sep 30, 2008

Zeig doch mal bitte den HTML-Code und die CSS-Definitionen her.

plumbum · Sep 30, 2008

HTML-Code:

Code:

<html>
	<head>
		<title>Blub</title>
		<link rel=stylesheet href="css/reset-fonts.css" type="text/css">
		<link rel=stylesheet href="css/style.css" type="text/css">
		</head>
	<body>
		
		<div id=wrapper>
			<div id=head>
				<p>HEAD</p>
				</div>
				
			<div id=middle>
				<div id=navi>
					<p>NAVI</p>
					</div>
				<div id=content>
					<p>Dies ist weiterer Content... </p>
					</div>
				</div>
			<div id=foot>
				<p>Fußzeile</p>
				</div>
			</div>
			
		<div class=bar id=closedBar>
			<p align=right><a href=index.php onclick="openBar(); return false;">[ Admin-Bereich ]</a></p>
			</div>
		
		<div class=bar id=openedBar>
			<p align=left>
				<h1>Diese Seite editieren:</h1>
				<form method=POST action=whatever.php>
					<p>Titel:<br />
					<input type=text name=T1 size=20>
					</p>
					<p>Text:<br />
					<textarea rows=9 name=S1 cols=38></textarea>
					</p>
					<p>
						<input type=submit value=Abschicken name=B1>
						<input type=reset value=Zurücksetzen name=B2>
						</p>
					</form>
				</p>
			<br />
			<br />
			<a href=index.php onclick='closeBar();'>[ close me ]</a>
			</div>
			
		<script type="text/javascript">
			//<![CDATA[
			
			function openBar() {
				document.getElementById("closedBar").style.display = 'none';
				document.getElementById("openedBar").style.display = 'block'
				document.getElementById("openedBar").style.zIndex = 10000;
				}
			
			function closeBar() {
				document.getElementById("openedBar").style.display = 'none';
				document.getElementById("closedBar").style.display = 'block'
				}
			
			//]]>
			</script>
		
		
		</body>
	</html>

Relevanter CSS-Teil:

Code:

.bar {	position: fixed;
		top: 0px;
		left: 0px;
		width: 100%;
		background-color: #ff9900;
		color: #f5f5f5;
		}
		
#closedBar {	height: 30px;
		}
		
#openedBar {	height: auto;
			filter:alpha(opacity=87);
			-moz-opacity:.87;
			opacity:.87;
			display:none;
			}

#wrapper {	position: absolute;
			top: 10px;
			left: 10px;
			width: 100%
			}
			
#head {		background-color: #cccccc;
			width: 100%;
			height: 100px;
			z-index: 1;
			}
#middle {	background-color: #cccccc;
			width: 100%;
			z-index: 1;
			}
#navi {		background-color: #ff9900;
			width: 10%;
			height: 100%;
			float: left;
			margin: 10px;
			}
#content {	background-color: #99ff00;
			width: 86%;
			height: 100%;
			float: left;
			margin: 10px;
			}
#foot {		background-color: #cccccc;
			width: 100%;
			height: 50px;
			float: left;
			z-index: 1;
			}

Falls das jemand wieder zusammenbasteln sollte:
Keinen Schock wegen der verwendeten Farben bekommen... es geht erstmal nur darum, dass das technisch funktioniert

BasicAvid · Sep 30, 2008

Im ie6 funktioniert position: fixed; nicht, da musst Du dass, was Du da vor hast, mit JavaScript machen. Und überarbeite doch bitte deinen HTML-Code nochmal.

plumbum · Sep 30, 2008

hmm, okay... denn muss ich mal schauen was ich da dann js-mäßig mache...

Was stört dich denn am HTML-Code?
Mir fällt spontan das fehlende Doctype-dingens auf und nen paar fehlende slashes

Schon mal besten Dank für die Info

BasicAvid · Sep 30, 2008

Code:

function scrollBox() {
	var scrollPos;
	
	if (window.pageYOffset) {
	   scrollPos = window.pageYOffset;
	}
	else if (document.compatMode && document.compatMode == "CSS1Compat") {
	   scrollPos = document.documentElement.scrollTop;	   
	}
	else if (document.body) {
	   scrollPos = document.body.scrollTop;
	}
	document.getElementById('bar').style.top = scrollPos + 'px';
}
window.onscroll = scrollBox;

Hier mal ein JavaScript, welches das Element mit der ID 'bar' mitscrollt.

Was stört dich denn am HTML-Code? Mir fällt spontan das fehlende Doctype-dingens auf und nen paar fehlende slashes

Die ganzen fehlenden Anführungszeichen stören mich, den alle Attribut-Werte müssen in Anführungszeichen stehen.

plumbum · Sep 30, 2008

Besten Dank für den javascript-code

Was stört dich denn am HTML-Code? Mir fällt spontan das fehlende Doctype-dingens auf und nen paar fehlende slashes

Zum Vergrößern anklicken....

Die ganzen fehlenden Anführungszeichen stören mich, den alle Attribut-Werte müssen in Anführungszeichen stehen.

Dass die Anführungszeichen fehlen ist absicht. Ich finde, dass die ziemlich stören. Aktuell wäre dies zwar nicht soo schlimm... aber später, wenn ich da dann noch mit php drin herumpfusche, wirds schon relevanter.

Zudem ist das auch kein Kriterium für w3c-Konformität... und diese reicht mir eigentlich...

beavisbee · Okt 1, 2008

Original von plumbum
Dass die Anführungszeichen fehlen ist absicht.

?(

Original von plumbum
Ich finde, dass die ziemlich stören. Aktuell wäre dies zwar nicht soo schlimm... aber später, wenn ich da dann noch mit php drin herumpfusche, wirds schon relevanter.

?(
Wenn du innerhalb eines Strings die Anführungszeichen brauchst, dann musst du die eben escapen, das ist doch kein Problem?!

PHP:

echo "<img src=\"test.jpg\" alt=\"dies ist nur ein Test\" />";

Wenn du in PHP auf einmal sämtliche Anführungszeichen weglassen willst, dann rate ich dir, lern irgend etwas anderes, meinetwegen Tischtennis, Fußball oder die ersten 300 Nachkommastellen von PI, aber lass die Finger vom WebDevelopment....

Original von plumbum
Zudem ist das auch kein Kriterium für w3c-Konformität... und diese reicht mir eigentlich...

?(

egal, welche Drogen du nimmst, nimm weniger....

für das mittlerweile doch schon in die Jahre gekommene HTML4 scheint das zu stimmen (hab ich extra gerade mal probiert....)
aber wenn ich versuche, meiner XHTML 1.0 Strict konformen Seite ein paar Anführungszeichen zu entfernen, dann sagt mir http://validator.w3.org/ als erstes

an attribute value specification must be an attribute value literal unless SHORTTAG YES is specified.

und dann folgen noch jede Menge XML-Parse-Fehler....

Und selbst wenn es der Validierer nicht als falsch anmeckert ist es doch schon einfach eine Frage der logischen Darstellung von Informationen, dass hier Anführungszeichen hin müssten...

Hast du schonmal etwas vom Quirksmode eines Browsers gehört?
Das ist der "ich rate mal, was der Autor sich bei seinem kaputten Code gedacht hat"-Modus
Dieser sorgt dafür, dass die Darstellung von Browser zu Browser sehr verschieden sein kann....
Die Darstellung sieht in einigen Browsern erst einmal wesentlich besser aus, als wenn man dann auf einmal anfängt, alles super valide zu gestalten...
Aber erst wenn deine Seite im Standard-Mode noch immer genauso aussieht, wie du es willst, DANN beherrschst du HTML

und wenn du dir das hier anschaust:
http://www.css4you.de/wsdoctypeswitch/dtsw01.html

möchtest du wenigstens verdammt sauberes HTML4.0 Strict coden....

und wer schon bei den Anführungszeichen anfängt, einzusparen, klickt - nach meiner Menschenkenntnis - auch einfach im Validierer alle möglichen Standards durch, bis er irgend einen findet, worauf der code valide ist....

Tasmas · Okt 1, 2008

warum echo nicht einfach mit einfachen Anführungszeichen machen?