Darstellungsfehler IE8/WIN XP zu IE11/WIN 7

[Romero]

Hallöchen liebe Gemeinde,

ich stehe grad vor einem Rätsel. Ich habe ein Script geschrieben (*.HTA), welches auf 2 Rechnern unterschiedlich dargestellt wird.

Auf dem 1. Rechner ist Windows XP und Internet Explorer 8 drauf (dazu Bild 1). Auf dem 2. Rechner ist Windows 7 und Internet Explorer 11 drauf (dazu Bild 2).

Folgendes habe ich da im Script stehen:

	<style type="text/css">

	/*----------------------------------------*/
	/* -- Screen - Ausgabe - Informationen -- */
	/*----------------------------------------*/

		@media screen {

				.STL_Meldungen_Überschreiben_Drucken_NC_Textil_SA_LR_A380_DTL_AIRCABIN { height:25px; margin:0px; padding:3px; border:2px; border-style: inset; color: black; font-weight: bold }
				.STL_Meldungen_Überschreiben_Drucken_SAP_SA_LR_A380_DTL_AIRCABIN { height:25px; margin:0px; padding:3px; border:2px; border-style: inset; color: black; font-weight: bold }
				
				/* -- NC-Textil --*/
				.STL_Meldungen_Button_Überschreiben_NC_Textil_SA_LR_A380_DTL_AIRCABIN { vertical-align:middle; margin-right:10px }
				.STL_Meldungen_Button_Drucken_NC_Textil_SA_LR_A380_DTL_AIRCABIN { vertical-align:middle; margin-right:20px }
				
				/* -- SAP --*/
				.STL_Meldungen_Button_Überschreiben_SAP_SA_LR_A380_DTL_AIRCABIN { vertical-align:middle; margin-right:30px }
				.STL_Meldungen_Button_Drucken_SAP_SA_LR_A380_DTL_AIRCABIN { vertical-align:middle; margin-right:20px }

			}

Dieser Style wird hier angewandt (ausgelagerte JS-Datei):

			document.getElementById( "STL_Meldungen_Überschreiben_NC_Textil" ).innerHTML = '<p class="STL_Meldungen_Überschreiben_Drucken_NC_Textil_SA_LR_A380_DTL_AIRCABIN">NC-Textil - Stückliste: <input type="button" name="STL_Überschreiben_Bestätigung_NC_Textil" value="Speichern" id="Überschreiben_Bestätigung_NC_Textil" class="STL_Meldungen_Button_Überschreiben_NC_Textil_SA_LR_A380_DTL_AIRCABIN"></input> Schnittteilliste: <input type="button" name="Drucken_NC_Textil" value="Anzeigen" id="Drucken_NC_Textil" class="STL_Meldungen_Button_Drucken_NC_Textil_SA_LR_A380_DTL_AIRCABIN"></input>';
			document.getElementById( "STL_Meldungen_Überschreiben_SAP" ).innerHTML = '<p class="STL_Meldungen_Überschreiben_Drucken_SAP_SA_LR_A380_DTL_AIRCABIN" disabled="disabled">SAP - Stückliste: <input type="button" name="STL_Überschreiben_Bestätigung_SAP" value="Anlegen" id="Überschreiben_Bestätigung_SAP" class="STL_Meldungen_Button_Überschreiben_SAP_SA_LR_A380_DTL_AIRCABIN"></input> Stüli - Pos: <input type="button" name="Drucken_SAP" value="Drucken" id="Drucken_SAP" class="STL_Meldungen_Button_Drucken_SAP_SA_LR_A380_DTL_AIRCABIN"></input>';

So, und nun stellt sich (siehe Bild 1 & Bild 2) das Ganze wie folg da:

Bild 1 - so muss es aussehen

Bild 2 - verzehrte Darstellung

Kann mir da einer helfen, wie ich das so "programmieren" kann, damit es in beiden Fällen richtig dargestellt wird?

LG Romero

[Matthias Apsel]

Hallo Romero,

Ich habe ein Script geschrieben (*.HTA),

HtA-Seiten sollten mMn. ganz normale HTML-Dateien sein, die Per VBA o.ä. aufgebitcht werden. Man möge mich berichtigen, falls das so nicht richtig ist.

<input type="…" name="…" value="…" id="…" class="…"></input>

Input ist ein leeres Element, das schließende Tag verboten.

Offensichtlich rendert der eine IE das ungültige HTML mehr in deinem Sinne als der andere. Tipp: Schicke das HTML durch den Validator und beseitige alle Fehler.

Bis demnächst
Matthias

[Romero]

Hy Matthias,

<input type="…" name="…" value="…" id="…" class="…"></input>

Input ist ein leeres Element, das schließende Tag verboten.

Offensichtlich rendert der eine IE das ungültige HTML mehr in deinem Sinne als der andere. Tipp: Schicke das HTML durch den Validator und beseitige alle Fehler.

Das heißt, es könnte sein, dass es an dem "geschlossenem" Input-Tag liegt? Werde es mal da durchjagen.

LG Romero

[Matthias Apsel]

Hallo Romero,

Das heißt, es könnte sein, dass es an dem "geschlossenem" Input-Tag liegt? Werde es mal da durchjagen.

Könnte sein.

Und wenn du grad dabei bist, kannst du auch input durch button ersetzen. Die Überlegungen aus dem Blogbeitrag gelten auch (wenn nicht gar insbesondere) für <input type="button"> vs. <button type="button"> - Ein button löst eine Benutzeraktion aus, ein input-Element nimmt Benutzereingaben entgegen.

Bis demnächst
Matthias

[Christian Kruse]

Hallo Matthias,

[…] aufgebitcht […]

Gesundheit!

Äh, bitte was? ;)

LG,
CK

[Matthias Apsel]

Hallo Christian Kruse,

Äh, bitte was? ;)

aufgebitcht

Bis demnächst
Matthias

[Felix Riesterer]

Lieber Romero,

prüfe, ob beide Browser im standard-konformen Modus oder im Quirksmode anzeigen.

Liebe Grüße,

Felix Riesterer.

[Romero]

Hallo Felix,

prüfe, ob beide Browser im standard-konformen Modus oder im Quirksmode anzeigen.

ich habe folgenden Dinge getestet:

Ich habe, den besagten Code durch den Validator geschickt und die "Stellen", die fehlerhaft waren, abgeändert. Leider hat es kein positiven Effekt gegeben. Diese verzerrte Darstellung blieb weiterhin bestehen.

Weiterhin habe ich beide Browser im Entwicklermodus auf IE7 (Standard) geändert. Auch einige Seiten-Einstellungen vorgenommen (100% der Ansicht, Textgröße, Codierung). Leider auch da kein positiver Effekt des Ganzen.

Wo liegt also dieser Fehler? Ich hoffe, ihr habt noch ein paar weitere Ideen dazu :/

LG Romero

[Matthias Apsel]

Hallo Romero,

Wo liegt also dieser Fehler?

Ich habe mir jetzt mal die Bilder genauer angeschaut und festgestellt, dass es offenbar keine Darstellungsfehler sind, sondern die input-Elemente werden nicht erzeugt. Insofern ist die Fehlerkonsole deine Anlaufstelle.

Bis demnächst
Matthias

[Romero]

Hallo Matthias,

Ich habe mir jetzt mal die Bilder genauer angeschaut und festgestellt, dass es offenbar keine Darstellungsfehler sind, sondern die input-Elemente werden nicht erzeugt. Insofern ist die Fehlerkonsole deine Anlaufstelle.

erstmal vielen Dank für diese Analyse.

Und wie kann ich die Fehlerkonsole benutzen, wenn ich diesen Code in einer HTA-Datei nutze bzw. von da aus aufrufe? Zumal der Validator nach der abgeänderten Version, keinerlei Fehler mehr anzeigte.

Oder anders gefragt, "Wie erzeugt man den die Input-Elemente hier richtig"? Das das Input-Element offen ist, habe ich verstanden. Doch "stehe" da grad aufn Schlauch, wonach ich noch schauen sollte/muss.

Nachtrag dazu:

Ich habe jetzt mein Input-Element mit dem Button-Element ersetzt. Und, siehe da, es werden 2 Buttons angezeigt. Nun stellt sich die Frage: wie kann ich die Buttons bearbeiten (Value, Name, ID, Class, ...), so als wenn ich diesen <input type="button"> verwende?

LG Romero

[Rolf b]

HTA sind von lokal geladene Single Page Webseiten, die im IE angezeigt werden. Ob da die F12 Taste funktioniert, weiß ich nicht. HTA ist von 1999, da gab's noch kein F12. Und ich hab mein Lebtag noch kein HTA gebaut. Nach dem ich mal schnell "HTA Debugger" gegoogelt habe, bin ich froh drum. Welche Entwicklungsumgebung nutzt Du? Hat die einen HTA Debugger?

Zur Validierung: Da der entscheidende Teil Deines Codes aus einem String geholt wird, bemerkst Du nicht wenn darin was faul ist. Ich bezweifle, dass ein Validator da hineinschaut. Wenn Du diese Teile validieren willst, empfehle ich Dir, sie aus dem String herauszukopieren und für die Validierung an geeigneter Stelle als HTML auf deine Seite zu setzen

Zum Handling von button-Tags: Im SelfHTML Wiki unter "button" hast Du schon geschaut? Das SelfHMTL Wiki ist eine sehr gute Informationsquelle.

Rolf

PS: WinXP ist tot. Microsoft rät von der Benutzung ab und liefert keine Security-Updates mehr. MUSST Du es benutzen? MUSST Du IE8 benutzen? Der Marktanteil ist verschwindend gering.

[Matthias Apsel]

Hallo Rolf b,

Zum Handling von button-Tags:

Elementen ;-)

Im SelfHTML Wiki unter "button" hast Du schon geschaut? Das SelfHMTL Wiki ist eine sehr gute Informationsquelle.

:)

Bis demnächst
Matthias

[Romero]

Hallo an euch beiden, Rolf und Matthias,

vorab: da ich HTA benutze, liegt daran, dass es eine lokale Datei ist, welche bestimmte Nutzer, lokal vom Rechner aus starten, um Datensätze auszulesen und zu verarbeiten. Und da bot sich halt das HTA (mit den Programmier-Sachen von Javascript, CSS und HTML) an.

Nun zu dem Thema "Button". Ich habe gestern Abend noch daran gearbeitet und festgestellt, dass die Button "nicht direkt" wegblieben, sondern, aufgrund der Spaltengröße und die Größe der Elemente, unter IE11, anders dargestellt waren als unter IE8, obwohl alle im Modus IE7 eingestellt waren.

Nun, wie dem auch sei. Ich habe die Button-Tags verwendet, und unter CSS die Abstände (marin-right/-left) verändert/verringert und es wurde dann erfolgreich dargestellt.

Obwohl ich die selben Ansichts-Einstellungen (Größe, Codierung, ...) 1:1 übernommen habe, sind diese Darstellung verzehrt. Bei einzelnen Buttons (oder Input Type="Button") ist die Verzehrung nicht so aufgefallen, aber aufgrund 2 hintereinander gesetzen Button + deren "Beschriftung", kam es aufgrund Platzmangels zu einer unkorrekten Darstellung.

Ich möchte mich für eure Hilfen und Anregungen bedanken. LG Romero