MSIE6 hat arge Probleme mit der Darstellung!

[mausz]

Ich bin inzwischen echt am verzweifeln!
Ich habe ein Layout mit Divs gestaltet. Die linke Navigation floatet den Content und der Content floatet die rechte Navi. Soweit so gut. Im FF sieht alles wunderbar aus. Im IE7 habe ich es auch annährend ähnlich hinbekommen. Auf jeden Fall gibt es auch dort keine gravierenden Anzeigefehler.
Dann schau ich mir die Seite im IE6 an und muss feststellen, dass dort nichts an seinem Platz ist.
Nach dem ersten Laden der Seite ist alles ein Stück nach links verschoben. Sobald man über einen Link fährt, springt alles an seinen Platz. Mit ausnahme der rechten Navigation. Die fängt erst unter dem Content an.
Das zur Verschiebung.
Dann gibt es noch das Problem, dass der IE6 die Hintergrundbilder von h2 und navi-links nicht lädt (mit einer Ausnahme) und dass er border-bottom die meiste Zeit auch ignoriert.
Ich weiß nicht mehr weiter. Und ich versteh nicht, wonach der geht.
Ich habe mal 3 Screenshots gemacht, wie es derzeit bei mir ausschaut...:
http://www.5hearts.de/screens/ie6-1.jpg (--> Direkt nach dem Laden der Seite)
http://www.5hearts.de/screens/ie6-2.jpg (--> Content ist an den richtigen Platz gesprungen, nach dem man über einen Link gefahren ist)
http://www.5hearts.de/screens/ie6-3.jpg (--> Die rechte Navigation, die erst unter dem Content anfängt. Und die mehrere h2's hat, von denen aber nur eine richtig dargestellt wird...)

So, jetzt noch der Code, der nur für den IE6 ist... Ich arbeite mit Conditional Comments.

  
body {  
  background: #000000;  
  margin:0;  
  color:#000000;  
  font-family:Arial, "Sans Serif";  
 }  
  
/* --------------------- STRUKTUR 1 --------------------- */  
  
#box {  
  z-index:0;  
  width: 900px;  
  background-image: URL(img/strip.jpg);  
  background-repeat: repeat-y;  
  padding: 0px;  
  margin: 0px auto 0px auto;  
 }  
  
#header {  
  z-index:1;  
  margin:0px;  
  border:0px;  
  background: URL(img/header.jpg);  
 }  
  
/* --------------------- NAVIGATION1 --------------------- */  
  
.lnavi {  
  float:left;  
  position:relative;  
  z-index:2;  
  margin-top:40px;  
  margin-left:10px;  
  width:148px;  
  text-align:justify;  
  color:#000000;  
  font-size:10px;  
 }  
  
.lnavi h2 {  
  display:block;  
  background-image: url('img/navi-bg-145.jpg');  
  color:#FFFFFF;  
  font-family:Georgia;  
  font-style:italic;  
  font-size:24px;  
  line-height:50px;  
  letter-spacing:-1px;  
  padding-left:15px;  
  margin-top:30px;  
  margin-bottom:1px;  
  border:0;  
 }  
  
.lnavi ul {  
  list-style:none;  
  margin-left:0px;  
 }  
  
.lnavi li {  
  line-height:100%;  
  margin:0;  
 }  
  
.lnavi ul li a:link, .lnavi ul li a:visited, .lnavi ul li a:active {  
  display:block;  
  font-variant: normal;  
  text-align:left;  
  padding-left:18px;  
  background-image: url('/img/logo-mini.jpg');  
  background-repeat:no-repeat;  
  background-position:top left;  
  font-family:Tahoma;  
  color:#cc525d;  
  font-size:12px;  
  font-weight:normal;  
  letter-spacing:0px;  
  line-height:130%;  
  border-bottom:1px solid #eaeaea;  
}  
  
.lnavi ul li a:hover {  
  display:block;  
  font-variant: normal;  
  text-align:left;  
  padding-left:18px;  
  background: url('/img/logo-mini-hover.jpg') no-repeat left;  
  font-family:Tahoma;  
  color:#b40212;  
  font-size:12px;  
  font-weight:normal;  
  letter-spacing:0px;  
  line-height:130%;  
  border-bottom:1px solid #d4d3d1;  
}  
  
  
/* --------------------- STRUKTUR 2 --------------------- */  
  
#content {  
  float:left;  
  position:relative;  
  z-index:2;  
  margin-top:40px;  
  margin-left:11px;  
  padding:3px;  
  width:487px;  
  background-color:transparent;  
  font-size:11px;  
  line-height:150%;  
  text-align:justify;  
  color: #000000;  
  border:0px;  
 }  
  
/* --------------------- NAVIGATION2 --------------------- */  
  
.rnavi {  
  position:relative;  
  z-index:2;  
  margin-top:40px;  
  margin-left:685px;  
  width:200px;  
  text-align:justify;  
  color:#000000;  
  font-size:10px;  
  line-height:110%;  
 }  
  
.rnavi li h2 {  
  background:URL(img/navi-bg-195.jpg) no-repeat left;  
  color:#FFFFFF;  
  font-family:Georgia;  
  font-style:italic;  
  font-size:24px;  
  line-height:50px;  
  letter-spacing:-1px;  
  padding-left:15px;  
  margin-top:30px;  
  margin-bottom:1px;  
  border:0;  
 }  
  
.rnavi ul {  
  list-style:none;  
  margin-left:0px;  
 }  
  
.rnavi li {  
  line-height:110%;  
  margin:0;  
 }  
  
.rnavi li A, .rnavi li A:visited, .rnavi li A:active {  
  display:block;  
  font-variant: normal;  
  text-align:left;  
  padding-left:8px;  
  background-color:transparent;  
  font-family:Tahoma;  
  color:#cc525d;  
  font-size:12px;  
  font-weight:normal;  
  letter-spacing:0px;  
  line-height:180%;  
  border-bottom:1px solid #eaeaea;  
}  
  
.rnavi li A:hover {  
  display:block;  
  font-variant: normal;  
  text-align:left;  
  padding-left:8px;  
  background-color:transparent;  
  font-family:Tahoma;  
  color:#b40212;  
  font-size:12px;  
  font-weight:normal;  
  letter-spacing:0px;  
  line-height:180%;  
  border-bottom:1px solid #d4d3d1;  
}  
  
.rnavi ul .recent {  
  list-style:none;  
  width:180px;  
  margin-left:1px;  
  line-height:110%;  
  text-align:left;  
 }  
  
.rnavi ul .recent A {  
  display:inline;  
  background:transparent;  
  font-variant:normal;  
  padding:0;  
  color:#cc525d;  
  font-size:12px;  
  line-height:100%;  
  letter-spacing:0px;  
  border:0;  
 }  
  
.rnavi ul .recent A:visited {  
  display:inline;  
  background:transparent;  
  font-variant:normal;  
  padding:0;  
  color:#cc525d;  
  font-size:12px;  
  line-height:100%;  
  letter-spacing:0px;  
  border:0;  
 }  
  
.rnavi ul .recent A:hover {  
  display:inline;  
  background:transparent;  
  font-variant:normal;  
  padding:0;  
  color:#b40212;  
  font-size:12px;  
  line-height:100%;  
  letter-spacing:0px;  
  border:0;  
 }  
  
/* --------------------- STRUKTUR 3 --------------------- */  
  
#footer {  
  clear:both;  
  border:0px;  
  margin:0px;  
  background: URL(img/footer.jpg) no-repeat left;  
  color:#000000;  
  font-size:11px;  
  height:70px;  
 }  
  
.footbla {  
  color:#a49f9f;  
  font-size:11px;  
  padding-top:15px;  
  margin-left:190px;  
 }  
  
.footbla2 {  
  color:#a49f9f;  
  font-size:11px;  
  margin-top:-12px;  
  margin-left:190px;  
 }  

Ich habe jetzt schon ziemlich viel an dem Code herumgespielt, aber im Grunde sollte er so aussehen. Ich habe nur die Inhalt-spezifischen Sachen weggelassen, weil die erst mal nicht von Relevanz sind...
Live betrachten kann man sich die Seite hier: http://www.5hearts.de
Ich wäre echt dankbar, wenn jmd. eine Lösung für mein Problem hat. =/

[Kai345]

[latex]Mae  govannen![/latex]

Ich bin inzwischen echt am verzweifeln!

Das glaubt dir jeder, der schon mal mit IE6 zu tun hatte ;)

Schau dir erst mal das hier an: http://www.positioniseverything.net/explorer/creep.html.

Cü,

Kai

[mausz]

[latex]Mae  govannen![/latex]

Ich bin inzwischen echt am verzweifeln!

Das glaubt dir jeder, der schon mal mit IE6 zu tun hatte ;)

Schau dir erst mal das hier an: http://www.positioniseverything.net/explorer/creep.html.

Cü,

Kai

Ich dachte zwar immer, dass ich mir mit meinem Englisch helfen kann, aber wenn es so fachspezifisch wird, steh ich doch auf dem Schlauch. =/
Könntest du vlt. nur kurz forumlieren, was die Hauptaussage ist? Dann weiß ich mir vlt. zu helfen... Grundsätzlich ist mir aber klar, dass der IE padding und border nicht nach außen dransetzt, sondern dass sie die Breite reduzieren, weil sie davon abgezogen werden... Nur falls es in die Richtung gehen sollte... ;D
Ich wäre wirklich dankbar, wenn da jmd. eine Idee hätte... =/

[ChrisB]

Hi,

bitte zitiere sinnvoll, nur das, worauf du dich konkret beziehst.

Ich dachte zwar immer, dass ich mir mit meinem Englisch helfen kann, aber wenn es so fachspezifisch wird, steh ich doch auf dem Schlauch. =/
Könntest du vlt. nur kurz forumlieren, was die Hauptaussage ist?

Na wo hapert's denn?

Da steht, was den Fehler "triggert", ausloest - und auch, dass man die Konstellation wenn moeglich ganz vermeiden sollte; dass aber auch ein zusaetzliches border-bottom fuer das aeussere Element das Problem beheben kann.

MfG ChrisB

[mausz]

bitte zitiere sinnvoll, nur das, worauf du dich konkret beziehst.

Tut mir Leid, ich komm mit dieser Forenstruktur noch nicht so ganz zurecht... Ich arbeite dran und verspreche Besserung. ;D

Na wo hapert's denn?

Ich denke daran, dass ich im Grunde keine Probleme mit der Konstellation border-bottom und padding-bottom habe, sondern nur damit, dass border-bottom einfach nicht angezeigt wird! padding-bottom ist gar nicht definiert. =/

Das Problem mit der Verschiebung der rechten Navigation konnte ich inzwischen selbst beheben, aber ich verstehe immer noch nicht, warum der IE6 bei einer (!!!) h2 den Hintergrund anzeigt, bei allen anderen aber nicht. Und ich verstehe auch nicht, warum bei 3 Links nach dem Laden der Seite erst der border-bottom zu sehen ist, aber sobald man einmal drüber gefahren ist, bleibt er für immer verschwunden. Bei den anderen Links lädt er gar nicht erst.
Mir will diese "Logik" einfach nicht in den Kopf!

Was den Validator betrifft...: Ich hatte beim Hochladen wohl den falschen Header erwischt. Wordpress arbeitet ja standardmäßig schon mit XHTML, wenn ich mich nicht täusche, und ich hatte den falschen Dokumenttypen erwischt. Jetzt treten nur noch 2 Errors auf, die wohl mit dem ListenTo-Plugins zusammen hängen. Allerdings kann mit den 2 Fehlern nicht die komplett falsche Darstelltung im IE6 zusammen hängen.

Mit freundlichen Grüßen, eine extrem genervte mausz. ;D

[Engin]

Ave Kai345!

Ich bin inzwischen echt am verzweifeln!
Das glaubt dir jeder, der schon mal mit IE6 zu tun hatte ;)

Das glaube ich nicht. Ich verzweifel höchstens, wenn ich alle meine Browser[7] aktiviert habe und mein Rechner langsamer wird.
Das ist echt ärgerlich.           :)

Grüße aus H im R an Kai345,
  Primus Enginus*

[Kai345]

[latex]Mae  govannen![/latex]

Ich bin inzwischen echt am verzweifeln!
Das glaubt dir jeder, der schon mal mit IE6 zu tun hatte ;)

Das glaube ich nicht. Ich verzweifel höchstens, wenn ich alle meine Browser[7] aktiviert habe und mein Rechner langsamer wird.
Das ist echt ärgerlich.           :)

Kann ich mir mit 256M einfach nicht erlauben, dann steht hier alles. :(

Zurück zum IE6: Ich finde schon, daß der es schafft, Menschen in den Wahnsinn zu treiben mit seinen Macken. Ist ja nicht nur CSS etc, auch bei JS muß man ihm ständig eine Extrawurst braten. Ich bin inzwischen *fest* davon überzeugt, daß der IE6 aus selbstmodifizierendem Code besteht, der immer wieder ein paar neue Bugs generiert, wenn man gerade glaubt, alles im Griff zu haben...

Cü,

Kai

[Engin]

[latex]Ave Kai345![/latex]

wenn ich alle meine Browser[7] aktiviert habe und mein Rechner langsamer wird.
Das ist echt ärgerlich.           :)
Kann ich mir mit 256M einfach nicht erlauben, dann steht hier alles. :(

Naja, meine 5 Hundert und  sind da auch nicht besser, aber mein Oller Delli macht das beste draus. :)

Zurück zum IE6: Ich finde schon, daß der es schafft, Menschen in den Wahnsinn zu treiben mit seinen Macken.

Ja, da geb ich dir recht. Menschen treibt das ding gerne in den Wahnsinn, ich als CSS-Engine bin da ja nicht betroffen. :)

Ich bin inzwischen *fest* davon überzeugt, daß der IE6 aus selbstmodifizierendem Code besteht, der immer wieder ein paar neue Bugs generiert, wenn man gerade glaubt, alles im Griff zu haben...

:-)

Grüße aus H im R an Kai345,
  Primus Enginus*

Und wenn´s dir nicht gefällt, http://dann.nimmet.net/mir-doch-egal!

Der Valligator

"Computer sagt Nein"

[Engin]

Ave mausz!

Live betrachten kann man sich die Seite hier: http://www.5hearts.de
Ich wäre echt dankbar, wenn jmd. eine Lösung für mein Problem hat. =/

Lösung = Validation

Bevor du dich auf fehler suche machst, solltest du deine Dateien validieren, da liegen die meisten Darstellungs Fehler begraben.

Grüße aus H im R an mausz,
  Primus Enginus*

[Shadowcrow]

Ave morituri te salutant.

Bevor du dich auf fehler suche machst, solltest du deine Dateien validieren, da liegen die meisten Darstellungs Fehler begraben.

jetzt weiß ich warum ich bei CSS kein bein auf den boden kriege, ich hab immer den begrabenen hund gesucht.

SCNR*2

Primus Enginus*

du bist pöse[TM]

gruss
shadow

[Engin]

Ave Shadowcrow!

jetzt weiß ich warum ich bei CSS kein bein auf den boden kriege

Vielleicht setzt du ja aus versehen für den Innenraum ein padding oder unter deine Füsse ein margin. :)

#wohnzimmer {  
 padding: 1em;  
 }  
#füsse {  
 margin: 0 0 4px 0;  
}

Primus Enginus*
du bist pöse[TM]

Aus Leidenschaft. :)

Grüße aus H im R an Shadowcrow,
  Primus Enginus*

Und wenn´s dir nicht gefällt, http://dann.nimmet.net/mir-doch-egal!

Der Valligator

"Computer sagt Nein"