[HaBo]

plumbum · 30.09.08, 10:27

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 · 30.09.08, 11:31

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

Anzeige

- Anzeige -

plumbum · 30.09.08, 11:41

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 · 30.09.08, 21:25

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 · 30.09.08, 21:50

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 · 30.09.08, 23:08

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.

Zitat:

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 · 30.09.08, 23:22

Besten Dank für den javascript-code

Zitat:

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.

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 · 01.10.08, 00:15

Zitat:

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

?(

Zitat:

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-Code:

  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....

Zitat:

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

Zitat:

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 · 01.10.08, 12:57

warum echo nicht einfach mit einfachen Anführungszeichen machen?

Anzeige

- Anzeige -

30.09.08, 10:27	#1 (permalink)
plumbum Registriert seit: 11.04.07 Likes: 0	div-container ein- und ausblenden - IE-Problem mit Positionierung Anzeige 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!

30.09.08, 11:31	#2 (permalink)
BasicAvid Registriert seit: 17.03.04 Likes: 2	Zeig doch mal bitte den HTML-Code und die CSS-Definitionen her. __________________ Mfg Basic Avid - Use it or be used! -

30.09.08, 21:25	#4 (permalink)
BasicAvid Registriert seit: 17.03.04 Likes: 2	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. __________________ Mfg Basic Avid - Use it or be used! -

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Ansicht
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
input per	Catarrer	(Web-) Design und webbasierte Sprachen	5	11.08.08 00:02
Wie Dekstop und Taskleiste ausblenden	the_Doctor	Code Kitchen	1	20.09.04 17:57
positionierung: opera != mozilla & ie	piero	(Web-) Design und webbasierte Sprachen	2	05.09.04 00:14
Positionierung mit CSS	Zwirni	(Web-) Design und webbasierte Sprachen	7	04.05.04 21:39
Eine Scrollbar ausblenden?	\|sNaKe\|	(Web-) Design und webbasierte Sprachen	3	03.05.04 17:43

30.09.08, 21:50	#5 (permalink)
plumbum Themenstarter Registriert seit: 11.04.07 Likes: 0	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

01.10.08, 12:57	#9 (permalink)
Tasmas Registriert seit: 18.03.05 Likes: 0	warum echo nicht einfach mit einfachen Anführungszeichen machen?

[HaBo]

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