Zur Navigation

IE 6 und der Befehl "Position fixed"

1 elena

Hi,
Der IE 6 kennt obigen Befehl nicht. Also habe ich mich insofern beholfen, als ich eine entsprechende ie.css ergänzt habe:
	
}
* html .left-corner {
	background: url(none.gif);
	filter: progid:dximagetransform.microsoft.alphaimageloader(src="http://www.gautinger-weltenbummler.de/images/bg-left-corner.png", sizingmethod='crop');
}
* html .main-nav {
	background: url(none.gif);
	filter: progid:dximagetransform.microsoft.alphaimageloader(src="http://www.gautinger-weltenbummler.de/images/bg-main-navigation.png", sizingmethod='scale');
}
.content {height: 1%;}

   
.infobox_flaggen {
   padding: 5px 5px 5px 5px;
   margin: 0;
   position: absolute;
   left: 18px;
   top: 466px;
   width: 125px;
   border: 1px solid #FEC399;
   background-color: #92522f;
   color: #F8C78C;
   font-size: 12px;
   }

.infobox-diashow {
    padding: 5px 0 0 5px;
	margin: 0;
	position: absolute;
    left: 18px;
	top: 450px;
	width: 130px;
   	border: 1px solid #FEC399;
    background-color: #92522f;
    color: #F8C78C;
    font-size: 12px;
    } /*bei den Templates für die Bildergalerien*/

Das Ganzwe wird im header eingebunden mit:
<!--[if IE]><link type="text/css" rel="stylesheet" href="css/ie.css"/><![endif]-->

Nun entsteht folgendes Problem:
Wenn ich
[if IE] zu [if IE 6] ergänze, wird die Seite im IE 6 richtig dargestellt, im IE7 verschwinden allerdings die Info-Boxen und im IE 8 werden sie so dargestellt, wie in der allgemeinen "all.css" angegeben und gewollt, nämlich "fixed". In allen anderen Browsern übrigens auch "fixed".
Meine Frage:
Wie kann ich erreichen, dass der IE 6 den absoluten Wert annimmt, der IE 7 den fixed Wert??

Meine Website:
http://www.gautinger-weltenbummler.de

Am besten sieht man sich die Seite mal im Firefox an, z.B. die Reiseberichte und Fotogalerien, dann weiß jeder, was ich meine.

elena

04.04.2009 13:56

2 Jörg

Ich habe mal gerade bei mir (ohne Bilder) getestet: ohne die ie.css bleibt die Box im IE 7 stehen und verschwindet nicht beim Scrollen?

Womit testest du denn - sind das Standalone-Versionen des IE?

04.04.2009 14:55 | geändert: 04.04.2009 14:57

3 elena

Hallo Jörg,
die ie.css kann ich nicht weglassen wegen der durchsichtigen Ecke oben links.
Das ist der obere Teil, den ich damit mneine:
* html body {
	width: expression(document.documentElement.clientWidth < 900 ? "900px" : "auto");
}
* html .small-earth {
	background: url(none.gif);
	filter: progid:dximagetransform.microsoft.alphaimageloader(src="http://www.gautinger-weltenbummler.de/images/img-small-earth.png", sizingmethod='crop');
	
}
* html .left-corner {
	background: url(none.gif);
	filter: progid:dximagetransform.microsoft.alphaimageloader(src="http://www.gautinger-weltenbummler.de/images/bg-left-corner.png", sizingmethod='crop');
}
* html .main-nav {
	background: url(none.gif);
	filter: progid:dximagetransform.microsoft.alphaimageloader(src="http://www.gautinger-weltenbummler.de/images/bg-main-navigation.png", sizingmethod='scale');
}
.content {height: 1%;}

Wenn ich das jetzt so lasse und in der all.css für die beiden Boxen .info_flaggen und .info-diashow den Wert "position: fixed" eingebe, stellt der IE 7 und 8 alles korrekt dar, die beiden Boxen "wandern" mit. Nur: Dann ist im IE 6 der Murx drin, das Naviteil wird durch die Boxen überdeckt. Das geht so nicht. Mein Nachbar hat noch den IE 6, da sehe ich das.

Jetzt bin ich hingegangen und habe die ie.css erweitert:
   
.infobox_flaggen {
   padding: 5px 5px 5px 5px;
   margin: 0;
   position: absolute;
   left: 18px;
   top: 466px;
   width: 125px;
   border: 1px solid #FEC399;
   background-color: #92522f;
   color: #F8C78C;
   font-size: 12px;
   }

.infobox-diashow {
    padding: 5px 0 0 5px;
	margin: 0;
	position: absolute;
    left: 18px;
	top: 450px;
	width: 130px;
   	border: 1px solid #FEC399;
    background-color: #92522f;
    color: #F8C78C;
    font-size: 12px;
    } /*bei den Templates für die Bildergalerien*/
Ich habe also wieder den Wert "absolute" genommen. Das hat zur Folge, dass alles auf den IE -egal, ob 6,7 oder 8 - wie "absolute" gelesen wird. Daraufhin habe ich im Header
[if IE] umgeändert in [if IE6], so dass also der Inhalt von ie.css sich nur auf die Version 6 beziehen sollte. Das ging auch, nur hatte jetzt plötzlich der IE 7 überhaupt keine Box mehr ( die Boxen mit den Flaggen!! und bei den Bildergalerien ), während der IE 8 alles korrekt mit "fixed" darstellt.
Ich weiß, dass das recht verwirrend ist, wenn man das alles hier so schreiben soll.
Vielleicht kommst Du jetzt klarer, ich benutze ganz normale Internet Explorer und muß leider immer wieder zum Nachbarn gehen, um mir die Resultate anzuschauen, da ich nirgendwo den IE 6 drauf habe, aber immerhin 22% meiner Besucher diesen Explorer (leider!) noch benutzen.
elena

04.04.2009 15:15

4 Jörg

Ich kann hier unter Linux grad nur eingeschränkt testen. Benötigt der IE 7 vielleicht noch Anweisungen aus der ie.css, die der IE 8 nicht benötigt? Dann musst du die CSS-Dateien gegebenenfalls anders aufteilen.

Ansonsten kannst du einen Hack probieren, der auch in diesem Forum verwendet wird:

div#fixedbox {
position:absolute;
}
div#parentbox>div#fixedbox {
position:fixed;
}

Der IE 6 versteht das ">" nicht und ignoriert das Überschreiben des position-Wertes. div#parentbox muss hierbei das direkte Elternelement von div#fixedbox sein

04.04.2009 15:32 | geändert: 04.04.2009 15:33

5 elena

Danke für Deine Mühe!!

Leider muß ich noch mal nachfragen:
Soll ich das in die ie.css schreiben anstelle von .infobox_flaggen etc?? Muß ich da noch woanders etwas abändern?

Sorry, dass ich mich da so anstelle.
elena

04.04.2009 15:43

6 Jörg

Du kannst das in die allgemeine CSS-Datei schreiben

.infobox_flaggen {
position:absolute;
/* sonstige Anweisungen */
}
/* fuer IE7, IE8 und andere moderne Browser: */
.elternbox_von_infobox_flaggen > .infobox_flaggen {
position:fixed;
}

".elternbox_von_infobox_flaggen" musst du hierbei noch ersetzen durch das Elternelement von .infobox_flaggen (also die Box in welcher sich die Flaggenbox befindet)

04.04.2009 16:03 | geändert: 04.04.2009 16:04

7 elena

Hallo Jörg,
danke für Deine schnelle Antwort!

Irgendwie sitze ich heute auf dem Schlauch. Ich muß gestehen, ich kapiere es nicht. Meine .infobox_flaggen sitzt im div id="header".

???
Entschuldige bitte, aber ich weiß es echt nicht oder es liegt am Wetter. Bitte hilf mir noch einmal!
Danke.
elena

04.04.2009 17:11

8 Jörg

Eine ID wird in CSS-Selektoren mit einer Raute gekennzeichnet, also heißt das Elternelement hier "#header":

.infobox_flaggen {
position:absolute;
/* sonstige Anweisungen */
}
/* fuer IE7, IE8 und andere moderne Browser: */
#header > .infobox_flaggen {
position:fixed;
}

04.04.2009 17:42

9 elena

Hallo Jörg,
danke recht herzlich für Deine Mühe. Ich habe es gerade ausprobiert, aber der Effekt ist wieder derselbe: Die Boxen sind anschließend im IE 7 nicht mehr da. Ich werde mir die ganze Sache nochmal durch den Kopf gehen lassen, vielleicht mache ich doch noch einen Fehler. Zur Zeit weiß ich einfach nicht, wo.

elena

04.04.2009 18:25

10 Jörg

Dann liegt das Problem wohl noch woanders. Kannst du eine Demo-Seite online stelle, auf der man das Problem mit dem IE 7 mal direkt nachvollziehen kann? Auf den aktuellen Seiten kann man den Fehler ja nicht begutachten.

04.04.2009 18:47