Ingo Turski: Warum versaubeutelt der IE 7 (Public Beta 2) mein CSS?

Hi,

da der automatische IE-Update ja kurz bevorsteht, habe ich über danvine.com mal Screenshots von einigen meiner Seiten erstellen lassen. Insbesondere die Ergebnisse von http://beratungscentrum-monheim.de/ sind schlimm und für mich absolut nicht nachvollziehbar.
Die Navigation hat zwischen den LI-Elementen große Zwischenräume (wie ich sie vom IE 5.0 in Erinnerung habe), allerdings seltsamer Weise nicht bei den Listenpukten der Unternavigation. Eine ähnliche Fehldarstellung ergibt sich auch bei den SELFHTML-Beispielen wie http://de.selfhtml.org/css/layouts/anzeige/nav_ebenen.htm, die nach demselben Prinzip formatiert sind.

Die speziellen IE-Korrekturen sind bei diesen Seiten über den Star-HTML-Hack vor dem IE 7 verborgen - er bekommt also das standardkonforme CSS wie die übrigen Browser auch und die DOCTYPEs sollten den IE 7 in den standardkonformen Modus versetzen.

Außerdem schneidet der IE 7 bei den Seiten des Beratungscentrums die Überschrift ab, was ich mir erst recht nicht erklären kann.
Die Formatierungen hierfür:

h2 {  
  font: normal 1.5em "Century Gothic","Trebuchet MS",Tahoma,"Adobe Helvetica",Helvetica,Arial,sans-serif;  
  color:#075;  
  margin-top:6em;  
}  
h2 {  
  margin:-0.8em 8em 0 0;  
  border-bottom:2px solid #fc0;  
}

bewirken zwar eine Verschiebung nach oben, aber die darüber liegende h1 ist nicht positioniert und im Quelltext zuerst notiert, so dass die h2 nicht hiervon verdeckt werden dürfte - oder mache ich hier einen Denkfehler?

Wenn nicht, dann bräuchte ich einen CSS-Hack für den IE 7, da ich eigentlich keine Lust habe, ihm über CC ein eigenes CSS zu spendieren. Kennt jemand da schon was Brauchbares?
Aber ich fürchte fast, dass ich doch nicht drum herum kommen werde - neuer IE, neue Probleme und viel Arbeit. Echt blöd, dass die den Bug mit dem quirks mode durch einen Kommentar oder xml-Prolog vor dem DOCTYPE nicht beibehalten haben.

freundliche Grüße
Ingo

  1. Hallo Ingo,

    Ich weiss nicht, ob man in IE7 die Abstaende unter <li> mit dem Leerzeichen vor </a> in den Griff bekommt, also <li><a href...>text </a></li> anstatt <li><a href...>text</a></li>, aber den Versuch ist es sicher wert.

    Gruß,

    Dieter

    1. Hi,

      Ich weiss nicht, ob man in IE7 die Abstaende unter <li> mit dem Leerzeichen vor </a> in den Griff bekommt, also <li><a href...>text </a></li> anstatt <li><a href...>text</a></li>, aber den Versuch ist es sicher wert.

      vor <a> oder </a> habe ich doch gar kein Whitespace, nur nach </a> und gerade hier macht der IE 7 keine Probleme.
      Aber Du liegst richtig. Ich habe die gesamte Liste auf der Mitarbeterseite mal ohne Whitespaces in eine Zeile gepackt und plötzlich stimmt die Anzeige im IE 7. Da haben die offensichtlich nur am CSS gewerkelt, aber die grundlegenden HTML-Bugs glatt übersehen oder gar den HTML-Parser vom IE 5.0 übernommen?!?

      Trotzdem sehe ich nicht ein, wegen dem IE 7 meinen Quellcode derart zu verunstalten und suche erstmal lieber nach einer CSS-Korrektur für diesen HTML-Bug...

      Den Fehler bei der Überschrift habe ich übrigens durch auf der Mitarbeiterseite ein simples
      h2 { position:relative }
      beheben können. Tut ja nicht weh, aber muss sowas wirklich sein?

      Ich frage mich wirklich, ob man diese neuen Fehler des IE 7 kompensieren oder besser darauf hoffen sollte, dass genug Webseiten "fehlerhaft" angezeigt werden und diese Fehler im IE 7.01 behoben werden.

      freundliche Grüße
      Ingo

      1. Hallo Ingo,

        ich bin nicht ganz sicher, ob wir nicht aneinander vorbeigeredet haben, deswegen vorsichtshalber nochmal eine Klarstellung. Du schreibst im Moment deine Listen so:

        <ul>
          <li><a href="Mitarbeiter.html">Mitarbeiter/innen</a></li>
          <li><a href="Aktuelles.html">Aktuelles</a></li>
          <li><a href="Presse.html">Pressespiegel</a></li>
          <li><a id="online" href="OnlineBeratung.html">Online-Beratung</a></li>
        </ul>

        Mein Vorschlag war, du solltest so schreiben (whitespace vor dem </a>):

        <ul>
          <li><a href="Mitarbeiter.html">Mitarbeiter/innen </a></li>
          <li><a href="Aktuelles.html">Aktuelles </a></li>
          <li><a href="Presse.html">Pressespiegel </a></li>
          <li><a id="online" href="OnlineBeratung.html">Online-Beratung </a></li>
        </ul>

        Damit wird man normalerweise die Abstaende zwischen den einzelnen Listenpunkten im IE wieder los.

        Gruß,

        Dieter

        1. Hi,

          Mein Vorschlag war, du solltest so schreiben (whitespace vor dem </a>):
          [...]
          Damit wird man normalerweise die Abstaende zwischen den einzelnen Listenpunkten im IE wieder los.

          ach so... wußte ich noch nicht und da wäre ich auch nie drauf gekommen.

          freundliche Grüße
          Ingo

  2. Hi,

    da der automatische IE-Update ja kurz bevorsteht,

    zwei Wöchelchen hast Du noch.

    habe ich über danvine.com mal Screenshots von einigen meiner Seiten erstellen lassen. Insbesondere die Ergebnisse von http://beratungscentrum-monheim.de/ sind schlimm und für mich absolut nicht nachvollziehbar.

    Ich habe hier dummerweise nur einen IE 5, von daher bleibt mir nur übrig zu raten.

    Die speziellen IE-Korrekturen sind bei diesen Seiten über den Star-HTML-Hack vor dem IE 7 verborgen - er bekommt also das standardkonforme CSS wie die übrigen Browser auch und die DOCTYPEs sollten den IE 7 in den standardkonformen Modus versetzen.

    Ja, nur leider ist der IE 7 im "standardkonformen" Modus ähnlich weit von Standardkonformität entfernt, wie es bei seinen Vorgängern der Fall ist. Noch immer existiert das hasLayout-Konzept, noch immer hat er arge Probleme mit Floating.

    Tipp: Füge die IE-6-Hacks per Star+HTML sukzessive den Stylesheets hinzu, und beobachte die Wirkung. Beachte dabei, dass der IE 7 overflow:visible korrekt umsetzt, zumindest insofern, als eine Höhenangabe tatsächlich respektiert wird. Das übliche height:1% muss also i.d.R. durch etwas anderes ersetzt werden.[1]

    Außerdem schneidet der IE 7 bei den Seiten des Beratungscentrums die Überschrift ab, was ich mir erst recht nicht erklären kann.

    Versuche, andere Elemente auszublenden, die die Überschrift evtl. überlagern könnten. Taucht sie auf?

    bewirken zwar eine Verschiebung nach oben, aber die darüber liegende h1 ist nicht positioniert und im Quelltext zuerst notiert, so dass die h2 nicht hiervon verdeckt werden dürfte - oder mache ich hier einen Denkfehler?

    Na hör mal, wir reden hier vom IE, und Du kommst mit Logik! ;-)

    Wenn nicht, dann bräuchte ich einen CSS-Hack für den IE 7, da ich eigentlich keine Lust habe, ihm über CC ein eigenes CSS zu spendieren. Kennt jemand da schon was Brauchbares?

    Ah. Ich erwähnte es oben bereits:

    *+html

    Der Star ist Dein DOCTYPE, oder gerne auch ein Kommentar. Der IE wird stetig um vereinsamte Kleinigkeiten erweitert, ist aber immer noch zu blöd zum Kaffee kochen.

    Aber ich fürchte fast, dass ich doch nicht drum herum kommen werde - neuer IE, neue Probleme und viel Arbeit.

    Korrekt ...

    Echt blöd, dass die den Bug mit dem quirks mode durch einen Kommentar oder xml-Prolog vor dem DOCTYPE nicht beibehalten haben.

    Nach meiner Erfahrung bietet der Quirks-Mode keinen Nutzen; es sei denn, die Übersetzung '"Autor hat keinen Schimmer"-Modus' trifft es auf den Punkt. Ich persönlich wäre dankbar gewesen, wenn dem IE der komplette Quirks-Mode wegoperiert worden wäre. Anpassen muss man die Seiten eh.

    Cheatah

    [1] Es gibt eine Theorie, nach der das schon geschehen ist ...

    --
    X-Self-Code: sh:( fo:} ch:~ rl:° br:> n4:& ie:% mo:) va:) de:] zu:) fl:{ ss:) ls:~ js:|
    X-Self-Code-Url: http://emmanuel.dammerer.at/selfcode.html
    X-Will-Answer-Email: No
    X-Please-Search-Archive-First: Absolutely Yes
    1. Hi,

      zwei Wöchelchen hast Du noch.

      maximal - kann doch aber auch früher sein, oder?

      Noch immer existiert das hasLayout-Konzept, noch immer hat er arge Probleme mit Floating.

      beim strohhalm.org konnten wir auf alle IE-Hacks verzichten - und hier wird gefloatet und ohne Höhenangabe kam der IE 6 nicht aus. Ganz so schlecht scheint die CSS-Umsetzung des IE 7 nicht zu sein.

      Versuche, andere Elemente auszublenden, die die Überschrift evtl. überlagern könnten. Taucht sie auf?

      Es ist - wie ich schon sagte - die h1. Nur finde ich es widersinnig, bei dieser Konstellation die h2 zu verdecken.

      Ah. Ich erwähnte es oben bereits:

      *+html

      Der Star ist Dein DOCTYPE, oder gerne auch ein Kommentar. Der IE wird stetig um vereinsamte Kleinigkeiten erweitert, ist aber immer noch zu blöd zum Kaffee kochen.

      vielen Dank (hatte ich nicht mehr im Gedächtnis). Der funktioniert offenbar sehr gut und wird hoffentlich von den standardkonformen Browsern ignoriert.

      Echt blöd, dass die den Bug mit dem quirks mode durch einen Kommentar oder xml-Prolog vor dem DOCTYPE nicht beibehalten haben.

      Nach meiner Erfahrung bietet der Quirks-Mode keinen Nutzen; es sei denn, die Übersetzung '"Autor hat keinen Schimmer"-Modus' trifft es auf den Punkt. Ich persönlich wäre dankbar gewesen, wenn dem IE der komplette Quirks-Mode wegoperiert worden wäre. Anpassen muss man die Seiten eh.

      Ich nicht.
      Solange der IE so fehlerhaft arbeitet, hätte ich es gern mit nur einer Version zu tun.

      freundliche Grüße
      Ingo

      1. Tach Ingo,

        *+html

        Der Star ist Dein DOCTYPE, oder gerne auch ein Kommentar. Der IE wird stetig um vereinsamte Kleinigkeiten erweitert, ist aber immer noch zu blöd zum Kaffee kochen.
        vielen Dank (hatte ich nicht mehr im Gedächtnis). Der funktioniert offenbar sehr gut und wird hoffentlich von den standardkonformen Browsern ignoriert.

        Vorsicht, *+html greift auch unter Opera ab 7.5, allerdings nur bei Angabe der XML-Deklaration.

        *:first-child+html wäre eine Alternative.

        BTW: Teste am besten mit einem richtig installierten IE7 testen (soll ja heute erscheinen ;-). Ich habe mit diesen Standalone-Installationen trotz Verbiegen des version vectors auf 7.0000 große Probleme gehabt, welche unter einem vollständig installierten IE7 (Beta/RC) nicht auftraten.

        Man liest sich,
        svg4you

        1. Hi,

          Vorsicht, *+html greift auch unter Opera ab 7.5, allerdings nur bei Angabe der XML-Deklaration.

          echt? Mir unbekannt, dass auch Opera sich etwas aus der xml-Deklaration macht. Aber solange es nur der 7er ist, könnte ich das verschmerzen.

          *:first-child+html wäre eine Alternative.

          hehe, alles was der IE 7 gelernt hat vor html...
          Aber ginge nicht auch *>html ?

          freundliche Grüße
          Ingo

          1. Tach Ingo,

            echt? Mir unbekannt, dass auch Opera sich etwas aus der xml-Deklaration macht. Aber solange es nur der 7er ist, könnte ich das verschmerzen.

            Nein, wie ich schrieb: _ab_ 7.5. Ich habe den angeblichen IE7-Hack mit Opera 9 und bis in die 6er Reihe herunter geprüft.

            Aber ginge nicht auch *>html ?

            Kann ich mangels IE7 gerade nicht testen.

            Man liest sich,
            svg4you

          2. Hi,

            Aber ginge nicht auch *>html ?

            nein, der IE 7 sieht außerhalb des Root-Elements keinen Vater mehr. Nur noch Nachbarn :-)

            Cheatah

            --
            X-Self-Code: sh:( fo:} ch:~ rl:° br:> n4:& ie:% mo:) va:) de:] zu:) fl:{ ss:) ls:~ js:|
            X-Self-Code-Url: http://emmanuel.dammerer.at/selfcode.html
            X-Will-Answer-Email: No
            X-Please-Search-Archive-First: Absolutely Yes
        2. 'Nabend.

          Vorsicht, *+html greift auch unter Opera ab 7.5, allerdings nur bei Angabe der XML-Deklaration.

          Hui, wußte gar nicht, daß Opera diesen Mist auch mitmacht. Und das sogar schon ab 7.23 ...

          --
          Once is a mistake, twice is jazz.
  3. Hallo,

    wenn es sich tatsächlich um Beta 2 handelt würde ich mir jemand anderes zum testen suchen.
    Beta 3 und rc1 haben massig Bugfixes erlebt, trotz "layout complete".

    Gruss, Daniel.

    1. Hi,

      wenn es sich tatsächlich um Beta 2 handelt würde ich mir jemand anderes zum testen suchen.
      Beta 3 und rc1 haben massig Bugfixes erlebt, trotz "layout complete".

      Du hast nicht zufällig die rc1 installiert und kannst die Seite mal damit prüfen?

      freundliche Grüße
      Ingo

      1. Hallo,

        Du hast nicht zufällig die rc1 installiert und kannst die Seite mal damit prüfen?

        http://www.456bereastreet.com/archive/200610/closing_the_gap_between_list_items_in_ie/

        Weiß nicht, ob dir das weiterhilft...

        Mathias

        --
        »No nations, no borders.«
        SELFHTML Weblog
        1. Hi,

          http://www.456bereastreet.com/archive/200610/closing_the_gap_between_list_items_in_ie/

          Weiß nicht, ob dir das weiterhilft...

          danke, das hätte es. Aber wie ich auch dort lese, ist dieser Bug inzwischen gefixed worden.

          freundliche Grüße
          Ingo

      2. Hi Ingo,

        wenn es sich tatsächlich um Beta 2 handelt würde ich mir jemand anderes zum testen suchen.
        Beta 3 und rc1 haben massig Bugfixes erlebt, trotz "layout complete".
        Du hast nicht zufällig die rc1 installiert und kannst die Seite mal damit prüfen?

        ist aus der standalone Variante des RC1:

        (unterhalb ist nur noch weiße, leere Seite)

        Gruß Gunther

        1. Hi,

          ist aus der standalone Variante des RC1:

          vielen Dank. Der Bug mit den Listenabständen scheint beseitigt worden zu sein.
          Bleibt nur noch das Phänomen beim negativen margin. Aber ein zwar überflüssiges position:relative wäre ja unproblematisch.

          (unterhalb ist nur noch weiße, leere Seite)

          schade. Standardkonforme Browser zeigen hier noch das Hintergrundbild von html an. :-(

          freundliche Grüße
          Ingo