AllesMeins: IE 5 zeigt eine Seite "zufällig" falsch an

Hallo,

ich mache gerade meine ersten Gehversuche im Bereich "Barrierefreiheit" und habe da schon mal eine Seite mit einem kompletten CSS Layout gebaut.

http://www.marcadler.de/spielplatz/

Das funktioniert soweit auch perfekt in mehreren Browsern. Nur der IE 5 produziert, scheinbar zufällig, einen seltsamen Fehler. So verschiebt er ab und zu die rechte dunkelblaue Box teilweise unter den Inhaltsteil. Ein klick auf "Reload" löst das Problem und der IE zeigt das ganze dann korrekt an. Aber trotzdem ist es ein unangenehmes Verhalten, das ich gerne beheben würde. Ich konnte leider bisher nicht herausfinden, wann der Fehler auftritt sondern kann nur so viel dazu sagen, das ich ihn ab und zu auf verschiedenen Rechnern beobachtet habe.
Hat vielleicht irgendwer eine Idee wodurch der Fehler verursacht werden könnte, oder wie man das ganze umgehen könnte?

Grüsse

Marc

  1. Hallo,

    ich mache gerade meine ersten Gehversuche im Bereich "Barrierefreiheit" und habe da schon mal eine Seite mit einem kompletten CSS Layout gebaut.

    Wenn das das komplette Layout ist, dann ist es eine sog. div-Suppe. Und das hat mit Barrierefreiheit nicht viel zu tun.

    Hat vielleicht irgendwer eine Idee wodurch der Fehler verursacht werden könnte, oder wie man das ganze umgehen könnte?

    Der erste Schritt ist auf jeden Fall, die Seite valide zu machen. Vorher hat jegliche Fehlersuche keinen Sinn (und barrierefrei ist es ohnehin nicht, solange der Code nicht valideiert).

    Gruß Fritz

    --
    ie:( br:> va:} ls:[ fo:| ss:{ de:] js:| ch:? zu:)
    http://webdesign.weisshart.de
    1. Hiho,

      sorry, mein fehler. Habe eine falsche Version hochgeladen. In der hatte ich eine Zeile vergessen auszukommentieren und das Char-encoding nicht angegeben. Ist geändert und jetzt (wieder) valide.

      Wenn das das komplette Layout ist, dann ist es eine sog. div-Suppe. Und das hat mit Barrierefreiheit nicht viel zu tun.

      Kannst du mir dazu mehr sagen. Was genau ist der Fehler und wo sind meine alternativen?

      Grüsse

      Marc

      1. Hallo,

        Ist geändert und jetzt (wieder) valide.

        Gut. Das ist grundsätzlich der erste Schritt vor jeder Fehlersuche.

        ... eine sog. div-Suppe.
        Kannst du mir dazu mehr sagen.

        Mit div-Suppe wird das beschrieben, was Umsteiger von einem tabellenbasierten Layout auf ein CSS Layout gerne produzieren. Zu viele unnötige, eventuell auch noch verschachtelte <div>

        Baue Dein html markup semantisch korrekt auf. Dann formatiere die Elemente entsprechend.
        Beispiel:
        Wozu ein <h1> noch einmal in ein <div> einpacken. Du kannst <h1> (und alle anderen Elemente direkt mit CSS formatieren.
        Das Ergebnis ist ein schlankeres html markup, und ein schlankeres CSS. Beides ist leichter zu pflegen, und weniger fehleranfällig.

        Zu Deinem konkreten Problem:
        _mögliche_ Fehlerquellen:
        1. Absolute Positionierung ist i.V.m. älteren IEs oft problematisch.
        2. width: 100% kann eine Fehlerquelle sein, wenn von irgendwo noch ein border dazu kommt. 100% + 1px ist dann eben mehr als 100%, und passt nicht mehr in den Elterncontainer.

        Gruß Fritz

        --
        ie:( br:> va:} ls:[ fo:| ss:{ de:] js:| ch:? zu:)
        http://webdesign.weisshart.de
      2. Hallo,

        Nachtrag:
        bewährt hat sich auch, erst einmal border, margin und padding aller verwendeten Elemente explizit auf null zu setzen, z.B.:

        html, body, div, p, h1, h2, h3, ul, ol, span, table, td, form, img, li, pre {
        margin:  0;
        padding: 0;
        border: 0;
        }

        Gruß Fritz

        --
        ie:( br:> va:} ls:[ fo:| ss:{ de:] js:| ch:? zu:)
        http://webdesign.weisshart.de
      3. Hallo,

        noch ein Nachtrag:
        hast Du darauf geachtet, daß Dein IE spezifisches CSS nicht zu Containerbreiten > 100% führt (Du weißt ja: 100% + irgendein border oder padding)

        Gruß Fritz

        --
        ie:( br:> va:} ls:[ fo:| ss:{ de:] js:| ch:? zu:)
        http://webdesign.weisshart.de