Seltsames Verhalten des IE 6

[webgurke]

Liebe Mitleidende. Ich ärgere mich gerade wieder über den IE 6. Habe bisher noch nie in einem Forum um Hilfe gebeten, aber diesmal ist das Problem so speziell und erscheint mir die Sache so seltsam, dass ich kein Hoffnung habe durch Googeln eine Lösung zu finden.

Also ich habe ein zweispaltiges Layout mit div gemacht. Es gibt einen Header- und einen Footer-Bereich. Vereinfacht dargestellt sieht die Sache folgendermaßen aus:

...

<div id="sidebar-left">
...
</div>

<div id="content">
...
</div>

<div id="footer">
Letzte Änderung: 01.03.08&nbsp;&nbsp;&nbsp;<a href="mailto:...">Webmaster</a>
</div>

Auschnitt aus dem CSS:

...

#sidebar-left {
overflow:hidden;
float:left;
width:218px;
margin:0;padding:0 0 3em 0;
background-color:#DEE9EF;
font-family:arial,verdana,sans-serif;
font-size:70%;
font-weight:bold;
color:#005577;
}

#sidebar-left * {padding:0;margin:0;width:218px}

#content {
border-left:solid 218px #DEE9EF;
padding:0 5% 3em 5%;
}

#footer {
padding:3px;
background-color:#DDDDDD;
text-align:center;
font-family:verdana,helvetica,sans-serif;
font-size:70%;
}

#footer a {
font-family:verdana,helvetica,sans-serif;
font-size:100%
}

#footer a:hover {background-color:#EEEEEE}

...

Der Rest sollte eigentlich keine Rolle spielen. Funktioniert in Opera und Firefox auch wunderbar. Im IE 6 wird zunächst der Text des Footers nicht richtig zentriert, er steht zu weit links. Wenn ich nun mit dem Curser über den Link fahre, schiebt sich das ganze weiter zur Mitte hin (ist aber immer noch nicht ganz zentriert) und von der blauen Seitenleiste wird ein Teil (schwankender Höhe) nicht mehr dargestellt. Er bleibt weiß. Ich dachte zunächst an einen Renderingfehler, aber ich kann in der Region mit der Maus etwas markieren, so als ob da ein etwa 2-3 Zeilen hoher unsichtbarer Buchstabe wäre. Das ganze ist wirklich seltsam. Für eine Erklärung oder gar Lösung wäre ich dankbar. Sorry wegen der Überlänge. Ich wollte nichts weglassen.

[ChrisB]

Hi,

Im IE 6 wird zunächst der Text des Footers nicht richtig zentriert, er steht zu weit links. Wenn ich nun mit dem Curser über den Link fahre, schiebt sich das ganze weiter zur Mitte hin (ist aber immer noch nicht ganz zentriert) und von der blauen Seitenleiste wird ein Teil (schwankender Höhe) nicht mehr dargestellt.

Guillotine Bug?

Ich dachte zunächst an einen Renderingfehler, aber ich kann in der Region mit der Maus etwas markieren, so als ob da ein etwa 2-3 Zeilen hoher unsichtbarer Buchstabe wäre.

Duplicate Characters Bug?

MfG ChrisB

[webgurke]

Wow. Das ging ja schnell! Ich glaube, es ist tatsächlich der Guillotine Bug; wenn ich nämlich die hover-Anweisung zu dem footer-Link entferne ist das Problem verschwunden!
Vielen Dank! (Ich muss zugeben, ich hatte eigentlich gar nicht erwartet, dass dazu wirklich jemand etwas sagen kann. War nur ein kleiner Hoffnungsschimmer.)

Was allerdings immer noch nicht klappt, ist dass der IE den Text zentriert. Weißt Du (oder jemand anders) dazu vielleicht noch etwas?
Gruß,
Florian

[webgurke]

ERGÄNZUNG:
Ich habe gerade den zweiten möglichen Workaround für den Guillotine Bug getestet und ein Blockelement (div) um den Text im Footer gepackt; den hover-Effekt habe ich wieder ins CSS-File geschrieben. Wenn ich nun über den Link hovere, wird der Text tatsächlich perfekt zentriert. Ohne die oben geschilderten Nebenwirkungen! Nur leider nicht von Anfang an.

[Kai345]

[latex]Mae  govannen![/latex]

ERGÄNZUNG:
Ich habe gerade den zweiten möglichen Workaround für den Guillotine Bug getestet und ein Blockelement (div) um den Text im Footer gepackt; den hover-Effekt habe ich wieder ins CSS-File geschrieben. Wenn ich nun über den Link hovere, wird der Text tatsächlich perfekt zentriert. Ohne die oben geschilderten Nebenwirkungen! Nur leider nicht von Anfang an.

Du hast also den Effekt, wie er auf folgender Seite links in der zweiten Box von oben (die mit Text before link Kill the creep) auftritt? http://www.positioniseverything.net/explorer/creep.html

Cü,

Kai

[wegurke]

Sollte ich tatsächlich mit einer Zeile zwei IE-Bugs ausgelöst haben?
Das ist ja erschreckend! Aber es sieht tatsächlich zunächst einmal genau so aus!
Mit dem Unterschied, dass ich das auch ohne border-left schaffe (ich will einen Orden) und der Sprung auch eine andere Weite hat.
Ich habe in Paint im Zoom die Screenshots ausgemessen, aber keinen aussagekräftigen Zusammenhang gefunden.
Die Symptome sind aber sehr ähnlich. Vielleicht hast Du (oder jemand anders) ja noch einen Verdacht?
Gruß,
Florian

[Kai345]

[latex]Mae govannen![/latex]

Sollte ich tatsächlich mit einer Zeile zwei IE-Bugs ausgelöst haben?

Beim IE ist *alles* möglich .. man sollte ihn zu „Toyota“ umtaufen.

Ich habe in Paint im Zoom die Screenshots ausgemessen, aber keinen aussagekräftigen Zusammenhang gefunden.
Die Symptome sind aber sehr ähnlich. Vielleicht hast Du (oder jemand anders) ja noch einen Verdacht?

Du hast wahrscheinlich inzwischen den Code gegenüber dem Ur-Posting verändert (du schriebst etwas von div drumgemacht oder so), daher muß ich etwas raten. Wie sieht die Struktur jetzt aus?
Wenn zwei Blockelemente ineinander geschachtelt sind, hilft für den Bug evtl. ein border-bottom (andere Border-Angaben nicht) für das äußere der Blockelemente (wie auch im Artikel beschrieben). Hat bei mir jedenfalls gewirkt. Kannst du ja transparent oder in Hintergrundfarbe ausführen, falls der Fehler dadurch verschwunden ist. Versuch es mal.

Cü,

Kai

[webgurke]

Ein border-bottom hilft leider nicht, hab das schon probiert. Hier nochmals der aktuelle Code-Ausschnitt:

HTML:

<div id="sidebar-left" class="sidebar">
...
</div>

<div id="content">
<div style="overflow:hidden">
...
</div>
</div>

<div id="footer">
 <div>Letzte &Auml;nderung: 01.03.08&nbsp;&nbsp;&nbsp;
 <a class="emailadress" href="mailto:">Webmaster</a></div>
</div>

CSS:

...

#sidebar-left {
float:left;
width:218px;
margin:0;padding:0 0 3em 0;
overflow:hidden;
background:#DEE9EF;
font-family:arial,verdana,sans-serif;
font-size:70%;
font-weight:bold;
color:#005577;
}

#sidebar-left * {
padding:0;margin:0;
width:218px;
}

...

#content {
border-left:solid 218px #DEE9EF;
padding:0 5% 3em 5%;
}

...

#footer {
clear:both;
padding:3px;
background:#DDDDDD;
text-align:center;
font:70% verdana,helvetica,sans-serif;
border-style:none;
}

#footer a {
color:#005577;
font:100% verdana,helvetica,sans-serif;
text-decoration:none;
}

#footer a:hover {background-color:#EEEEEE}

...

Es hat sich nicht so viel verändert. Seltsam ist ja auch,
dass das Symptom auftritt, obwohl ich dem #footer explizit mitgeteilt habe,
dass er keine border-left besitzt.
Es ist zum ausflippen. Ich versuche seit einer Woche das auf Tabellen
basierende Layout der Universität Konstanz (www.uni-konstanz.de)
mit CSS und Divs umzusetzen, aber im Detail scheitert es immer am IE.
Herzlichen Dank für Deine Hilfe!