Sinnloses <h1/h2> Element im DOM im IE

[RomanS]

Hi.

Wieder einmal macht mir der IE Kopfschmerzen, diesmal sogar rauf bis IE 9 (IE10 hab ich noch nicht mal getestet). Und zwar ergänzt er mir netterweisse einen leeren Titel tag wo keiner ist, die Auswirkung sieht man hier:

Der entsprechende Code block wäre z.b. das hier:

<div class="span6 post clickable">
   <a href="<%= post.path %>">
     <img src="/img/page/<%= post[:image] %>-thumbnail-115.png" alt="<%= post[:title] %>" class="img-polaroid img-post">
     <h2><%= link_to post[:title], post.path %></h2>
     <aside><%= get_europe_date(post) %></aside>
     <article>
       <%= teaser post.compiled_content, 130 %>...
     </article>
     <p><a class="btn hidden" href="<%= post.path %>">More &raquo;</a></p>
  </a>
</div>

Es funktioniert wenn ich den einschliessenden <a> tag entferne, aber der soll als Backup Lösung für die Javascript Verlinkung dienen.

Wie meistens lässt sich das verhalten nicht einfach in einer Sandbox nachstellen... http://jsfiddle.net/cJwJP/

Dafür das Orginal: http://example.m33w.tk/

Woher kommt bloss dieses Leer-Titel-Element?
Danke im Vorraus...

[CPAN]

Du hast versäumt, dein Markup zu validieren:

An "a" start tag seen but an element of the same type was already open.
    End tag a violates nesting rules.
    Cannot recover after last error. Any further errors will be ignored.
    <p><a class="btn hidden" href="foo">More &raquo;</a></p>
                                       ↑

[RomanS]

Du hast versäumt, dein Markup zu validieren:

An "a" start tag seen but an element of the same type was already open.
    End tag a violates nesting rules.
    Cannot recover after last error. Any further errors will be ignored.
    <p><a class="btn hidden" href="foo">More &raquo;</a></p>
                                       ↑

Das ist schön, und mir auch sehr wohl bewusst, nur ändert es nichts an der Tatsache das ein h element zu viel in das DOM generiert wird.

Danke trotzdem

[Der Martin]

Hallo,

Wieder einmal macht mir der IE Kopfschmerzen, diesmal sogar rauf bis IE 9 (IE10 hab ich noch nicht mal getestet). Und zwar ergänzt er mir netterweisse einen leeren Titel tag wo keiner ist

sei bitte etwas präziser mit deinen Beschreibungen. Aus dem Rest deines Beitrags geht hervor, dass du nicht ein title-Element meinst (Element, nicht Tag!), sondern ein h1.

die Auswirkung sieht man hier:

Tut mir leid, ich sehe sie nicht, weil ich nicht weiß, wie du es eigentlich haben möchtest.

Der entsprechende Code block wäre z.b. das hier:

<div class="span6 post clickable">
   <a href="<%= post.path %>">
     <img src="/img/page/<%= post[:image] %>-thumbnail-115.png" alt="<%= post[:title] %>" class="img-polaroid img-post">
     <h2><%= link_to post[:title], post.path %></h2>
     <aside><%= get_europe_date(post) %></aside>
     <article>
       <%= teaser post.compiled_content, 130 %>...
     </article>
     <p><a class="btn hidden" href="<%= post.path %>">More &raquo;</a></p>
  </a>
</div>

Das ist ganz bestimmt nicht der Code. Das ist möglicherweise das Template eines CMS, und anhand dieses Codeauszugs können wir nur vermuten, dass die Platzhalter korrekt ersetzt werden - und vielleicht bei der Ersetzung irgendwas herauskommt, was kein korrektes HTML mehr ist.

Außerdem ist die Schachtelung an sich schon invalid, denn AFAIK darf ein a-Element in HTML 5 zwar Blockelemente enthalten (in bisherigen HTML-Varianten nicht), aber auf keinen Fall ein weiteres a-Element als Nachfahren.

Es funktioniert wenn ich den einschliessenden <a> tag entferne, ...

Das deutet stark drauf hin, dass auch dein Browser mit der Verschachtelung von a-Elementen ein Problem hat.

Woher kommt bloss dieses Leer-Titel-Element?

Ein verzweifelter Versuch des Browsers, Fehler auszubügeln?

Danke im Vorraus...

Gab's die 'r' im Doppelpack billiger? ;-)

So long,
 Martin

[RomanS]

Hi Martin

sei bitte etwas präziser mit deinen Beschreibungen. Aus dem Rest deines Beitrags geht hervor, dass du nicht ein title-Element meinst (Element, nicht Tag!), sondern ein h1.

Jep... sorry...

die Auswirkung sieht man hier:

Tut mir leid, ich sehe sie nicht, weil ich nicht weiß, wie du es eigentlich haben möchtest.

Ich dachte schon das ich davon ausgehen kann das die meisten hier den IE Dev mode (oder was auch immer das darstellen soll) kennen, und erkennen das ein Leeres <h1/> im source markiert ist was auf der Webseite in Blau hinterlegt ist. (Der blaue strich über meh)

Das ist ganz bestimmt nicht der Code. Das ist möglicherweise das Template eines CMS, und anhand dieses Codeauszugs können wir nur vermuten, dass die Platzhalter korrekt ersetzt werden - und vielleicht bei der Ersetzung irgendwas herauskommt, was kein korrektes HTML mehr ist.

Es ist beides, aber ja lassen wir das... Und nein, im Source ansich ist es richtig nur im DOM und auch nur im IE taucht dieses Element auf.

Außerdem ist die Schachtelung an sich schon invalid

Ja... nur ändert das eben genau nichts am Verhalten.

Das deutet stark drauf hin, dass auch dein Browser mit der Verschachtelung von a-Elementen ein Problem hat.

Das ist mir auch klar das die Verschachtelung daran schuld ist, nur wie du selbst schon gesagt hast darf man in HTML5 auf diese weisse verschachteln (Abgesehen von den button/link natürlich)

Ich bin nach wie vor so weit wie vorher... Validatoren bedienen kann ich auch, ergründen warum der IE Elemente erstellt die nicht definiert wurden, das ist ausserhalb meiner Vorstellungskraft.

[ChrisB]

Hi,

Validatoren bedienen kann ich auch,

Dann beseitige bitte auch die Fehler, die der Validator meldet – vorher ist das Problem absolut nicht diskussionswürdig.

Außerdem ist die Schachtelung an sich schon invalid

Ja... nur ändert das eben genau nichts am Verhalten.

Zeig uns das Verhalten am *validen* Dokument bitte.

Das deutet stark drauf hin, dass auch dein Browser mit der Verschachtelung von a-Elementen ein Problem hat.

Das ist mir auch klar das die Verschachtelung daran schuld ist, nur wie du selbst schon gesagt hast darf man in HTML5 auf diese weisse verschachteln (Abgesehen von den button/link natürlich)

Nein, darf man nicht. a darf kein a als Vorfahrenelement haben – was bei dir aber der Fall ist:

<a href="/blog/mehhh/">  
					<img src="/img/page/-thumbnail-213.png" class="hidden-phone img-polaroid img-postbig" alt="mehhh">  
		      <h1><a href="/blog/mehhh/">mehhh</a></h1>

Das erste a schließt du nicht, es enthält die h1-Überschrift, und die enthält wiederum ein weiteres a. Um den aber „öffnen“ zu können, muss erst das davor kommende geschlossen werden. Vorheriges a „zumachen“ erfordert natürlich auch, darin enthaltenes h1 zumachen.

Mag sein, dass das in HTML5 definierte Error-Handling hier ein anderes Vorgehen vorschlägt/-schreibt – aber der IE das noch nicht umsetzt, und du deshalb ein anderes Ergebnis bekommst als in anderen Browsern.

Daran, dass dein HTML schlicht und einfach fehlerhaft ist, ändert das aber nichts. Also beseitige bitte endlich diesen Fehler, bevor du hier weiter sinnlos rumdiskutierst, dass du angeblich den Validator nutzen könntest und blah blah …

MfG ChrisB

[molily]

Mag sein, dass das in HTML5 definierte Error-Handling hier ein anderes Vorgehen vorschlägt/-schreibt – aber der IE das noch nicht umsetzt, und du deshalb ein anderes Ergebnis bekommst als in anderen Browsern.

IE9 setzt das noch nicht um, richtig. IE10 hingegen erzeugt hier dasselbe DOM wie Opera, WebKit und Firefox. Sie schließen das a-Element und erzeugen zwei neue im h1-Element, wovon das erste leer ist und das zweite den Text »mehhh« enthält.

Siehe auch http://livedom.validator.nu/, da steckt ein echter HTML5-Parser drin (ich weiß aber nicht, ob das ein aktueller Build ist, jedenfalls verhält er sich in der Hinsicht wie aktuelle Browser).

Mathias

[Der Martin]

Hallo,

die Auswirkung sieht man hier:
Tut mir leid, ich sehe sie nicht, weil ich nicht weiß, wie du es eigentlich haben möchtest.
Ich dachte schon das ich davon ausgehen kann das die meisten hier den IE Dev mode (oder was auch immer das darstellen soll) kennen, und erkennen das ein Leeres <h1/> im source markiert ist was auf der Webseite in Blau hinterlegt ist. (Der blaue strich über meh)

die Markierung im Quelltextausschnitt sehe ich natürlich, und es war anhand deiner Beschreibung klar, dass dieses h1 das unerwünschte Element ist. Der blaue Strich im Bild ist mir aber beim ersten Mal nicht aufgefallen. Und wäre er mir aufgefallen, dann hätte ich ihn für Absicht gehalten.

Ich bin nach wie vor so weit wie vorher... Validatoren bedienen kann ich auch, ergründen warum der IE Elemente erstellt die nicht definiert wurden, das ist ausserhalb meiner Vorstellungskraft.

Die Erklärung von ChrisB ist zwar nicht beweisbar, weil niemand von uns die Innereien des IE kennt. Für mich klingt sie aber zumindest sehr plausibel - und sie passt auch zu deiner Schilderung, dass das Problem verschwindet, wenn du die ungültige a-in-a-Struktur korrigierst.

Ciao,
 Martin

[molily]

Hallo,

Validatoren bedienen kann ich auch

Natürlich kannst du das. Nur solltest du es auch tun. ;)

ergründen warum der IE Elemente erstellt die nicht definiert wurden, das ist ausserhalb meiner Vorstellungskraft.

Wenn du fehlerhaftes Markup schreibst, versucht der Browser es beim Parsing zu korrigieren – weil der generierte DOM-Baum sinnvoll und konsistent sein muss (grob gesagt).

Bis vor einiger Zeit hat jeder Browserhersteller seine eigenen ausgereiften Algorithmen gehabt, um mit den Massen an fehlerhaftem Markup im Netz umzugehen. Heraus kamen sehr unterschiedliche Korrekturmechanismen, also dasselbe Markup wurde in unterschiedliche DOM-Repräsentationen geparst. Die Seite sah damit in einigen Browsern okay aus und in anderen total zerschossen. Das konnte man natürlich schon immer verhindern, indem man validen Code schreibt. ;)

HTML5 definiert nun den Umgang mit fehlerhaftem Markup. Daher wird dein fehlerhafter Code von neueren Browsern (Safari, Chrome, Firefox, Opera, IE10) gleich geparst – in einer Weise, die deiner Intention recht nahe kommt. IE9 hat den HTML5-Parsingalgorithmus aber noch nicht (vollständig) umgesetzt.

Nun vorstellbar?

Mathias