• Das Erstellen neuer Accounts wurde ausgesetzt. Bei berechtigtem Interesse bitte Kontaktaufnahme über die üblichen Wege. Beste Grüße der Admin

[DISKUSSION] Altes Thema:Browserkomptabilität

P

psteimann

New member
Hallo Zusammen,

Der Grund, warum verschiedene Browser dieselbe Seite unterschiedlich darstellen, liegt ja neistens daran, dass sich nicht alle an den W3C-standard halten.

Desweietren gab es früher ja traditional und strict. Gibt es das bei Html5 nicht mehr?

Wie geht ihr damit um? Browser-Abfrage und dann code ummodeln?

In meinem Fall sind es Grafiken, welche unterschiedlich hoch angezeigt werden. Ausnahmsweise machen hier mal nicht IE oder Safari Probleme, sondern der Firefox. (Nach der 2:1-Methode: Ich kann die Form so ändern, dass der Firefox kann, dafür die anderen 2 nicht:)

Wer sich das Beispiel mal ansehen möchte? (gleich falsches Resultat bei html4 und 5). Code selbst ist trivial verschlüsselt: Da es ja hier nicht um den Code, sondern um die Browser geht, hab ich das mal so belassen. Wer den Code trotzdem sehen will, weiss ja, was zu tun ist:)

http://www.actatek.de/Actasim.html
 
Zuletzt bearbeitet:
Witzig mit dem JS. Ganz ans Ende setzen und auch noch verhexen :)
Aber zum Thema: Soweit ich weiß gibt es für html5 da keine Unterscheidung mehr, richtig.
Zu deiner Seite: Hast du mal in der Console geschaut, wieviel Fehler dort allein schon auftreten?
Im IE 11:
HTML1300: Navigation wurde ausgeführt.
Datei: Actasim.html
HTML1512: Endmarkierung ohne Entsprechung.
Datei: Actasim.html, Zeile: 210, Spalte: 32812
HTML1514: Zusätzliche "<body>-Markierung gefunden. Pro Dokument sollte nur eine "<body>"-Markierung vorhanden sein.
Datei: Actasim.html, Zeile: 210, Spalte: 32813
HTML1503: Unerwartete Startmarkierung.
Datei: Actasim.html, Zeile: 210, Spalte: 32813
HTML1500: Die Markierung kann nicht selbstschließend sein. Verwenden Sie eine explizite schließende Markierung.
Datei: Actasim.html, Zeile: 210, Spalte: 32813
HTML1519: Ungültige Schachtelung. Eine "<a>"-Markierung sollte nicht in einer anderen "<a>"-Markierung platziert werden.
Datei: Actasim.html, Zeile: 210, Spalte: 32813
MEDIA12899: AUDIO/VIDEO: Unbekannter MIME-Typ.
MEDIA12899: AUDIO/VIDEO: Unbekannter MIME-Typ.
Zum Vergrößern anklicken....

Firefox:
Farbe erwartet, aber 'border' gefunden. Ende des Werts erwartet, aber 'border' gefunden. Fehler beim Verarbeiten des Wertes für 'border-color'. Deklaration ignoriert.
actasim.css (Zeile 39, Spalte 1)
':' erwartet, aber '=' gefunden. Deklaration ignoriert.
actasim.css (Zeile 64, Spalte 6)
Mit document.write() wurde ein nicht balancierter Baum geschrieben, was dazu geführt hat, dass Daten aus dem Netzwerk neu geparst werden mussten. Für weitere Informationen https://developer.mozilla.org/en/Optimizing_Your_Pages_for_Speculative_Parsing
Actasim.html (Zeile 210)
Zum Vergrößern anklicken....

Bevor du dich also über die Browser aufregst solltest du m.E. erstmal fehlerfreien Code herstellen. Wenn die Consolen aller Browser leer sind, dann kann man mal schauen, warum der ein oder andere abweicht.

*erstmal nach HTML verschoben, weil das invalide ist*
 
Zuletzt bearbeitet:
psteimann schrieb:
In meinem Fall sind es Grafiken, welche unterschiedlich hoch angezeigt werden. Ausnahmsweise machen hier mal nicht IE oder Safari Probleme, sondern der Firefox. (Nach der 2:1-Methode: Ich kann die Form so ändern, dass der Firefox kann, dafür die anderen 2 nicht:)


Actatek Simulator
Zum Vergrößern anklicken....

Bei Bilder zusätzlich immer width und height angeben.
 
mikdoe schrieb:
Witzig mit dem JS. Ganz ans Ende setzen und auch noch verhexen :)
Aber zum Thema: Soweit ich weiß gibt es für html5 da keine Unterscheidung mehr, richtig.
Zu deiner Seite: Hast du mal in der Console geschaut, wieviel Fehler dort allein schon auftreten?
Im IE 11:


Firefox:


Bevor du dich also über die Browser aufregst solltest du m.E. erstmal fehlerfreien Code herstellen. Wenn die Consolen aller Browser leer sind, dann kann man mal schauen, warum der ein oder andere abweicht.

*erstmal nach HTML verschoben, weil das invalide ist*
Zum Vergrößern anklicken....

Da hast Du natürlich recht. Allerdings: wenn du die Site mal über den W3C-Validator laufen lässt, meldet der lediglich 2 Warnungen. Scheint aber ein Unterschied zu sein, ob ich die Site per copy/paste einfüge oder über die URL laufen lasse. Zudem ists halt etwas mühsam, wenn jeder Browser anders interprätiert. Entweder alles falsch oder alles richtig, Haupsache identisch:) "Funktionieren" tut das Teil trotz allem Fehlerfrei, mit Ausnahme der Darstellung der Grafik. Trotzdem will ich's natürlich sauber haben. Kann mir auch nicht vorstellen, dass es wegen meiner Verhexerei so ist. Das lass ich dann in Zukunft eh bleiben, weils ja wirklich nicht viel bringt....

Gruss

Peter

- - - Aktualisiert - - -

Hmm, hatt ich vorher drin. da der Validator meinte, ich soll dies bei HTML5 weglassen bzw. ins CSS verschieben, hab ich das auch so gemacht...mit der Konsequenz, dass ich dann fast für jede Zelle eine neue CSS-Klasse gebraucht habe.

Wenigstens in meinem Fall habe ich da keine grossen Vorteile gesehen. Das HTML wird etwas kleiner, dafür wird das CSS grösser...und übersichtlicher wirds auch nicht....


Gemäss dieser Weisung also neu mit <td style="width:100px;". (weglassen des px hatt bei mir im CSS nicht funktioniert, wobei ich mich dabei bei der Schreibweise an die %-Angabe orientiert habe ) Danach hab ich's ganz weggelassen und ins CSS verschoben. Und manchmal dann komplett weggelassen, da es ohne auch zu gehen schien... und jetzt erst festgestellt, dass dies trotzdem keine gute idee war.:) Also nochmals ran. Obwohl diese (Höhe, Breite) auf der im Link vermerkten Seite noch drin sein sollten.

Neu hab ichs übrigens so gemacht, dass ich diese Grafikteile genau so gross gemacht habe, wie diese im HTML definiert waren, womit ich diese Angaben (mit Ausnahme der Tabellengrösse und Höhe) eigentlich nirgends mehr bräuchte. Sollte ich diese trotzdem mit width und height versehen?

Zudem habe ich gelesen, es wäre besser, bei den Tabellen die Werte nicht in px, sondern in % angeben. macht dies wirklich einen Unterschied? PX sagen einfach mehr aus:)
 
So, im Firefox bleibt die Konsole nun fehlerfrei. Aber nach wie vor das Problem mit der unterschiedlichen Darstellung.

Beim IE weiss ich, dasser ein Problem hat mit dem Abspielen von Sounds. (wma oder mp3) eins von beiden muss ich noch umformatieren...

Fällt Dir noch was auf?

Danke für die geduld:)
 
Zuletzt bearbeitet von einem Moderator:
Für meine Augen sieht die Seite in beiden Browsern gleich aus.
Was meinst du denn für Darstellungsunterschiede?

Auf den Fehler mit dem MIME Typ im IE weiß ich keine Antwort, kenne mich mit Sound überhaut nicht aus.
Aber ich meine, SteelWheel und kkapsner hätten da was auf dem Kasten.
 
psteimann schrieb:
Beim IE weiss ich, dasser ein Problem hat mit dem Abspielen von Sounds. (wma oder mp3) eins von beiden muss ich noch umformatieren...
Zum Vergrößern anklicken....

Stimmt so nicht. Benutze doch HTML5, dort gibs das Audio-Tag, in welchem einfach die verschiedenen Audio-Typen angegeben werden. Der Browser sucht dann das von ihm unterstützte Format raus.
Allerdings würde ich auf wma verzichten, das bringt keine Vorteile, setze doch einfach nur mp3, ogg und webm ein, damit bedienst du alle aktuellen Browser und Systeme.
 
mikdoe schrieb:
Für meine Augen sieht die Seite in beiden Browsern gleich aus.
Was meinst du denn für Darstellungsunterschiede?

>Auf den Fehler mit dem MIME Typ im IE weiß ich keine Antwort, kenne mich mit Sound überhaut nicht aus.
>Aber ich meine, SteelWheel und kkapsner hätten da was auf dem Kasten.
Zum Vergrößern anklicken....


Bei mir siehts im Firefox anders aus als im IE. (oben und unten erscheint da etwas versetzt ein Rand) Ganz leicht ist da auch der blaue Hintergund zu sehen) Drückt man uf den Fingerprint, vergrössert sich auch das Gehäuse geringfügig.

Gaanz komisch iehts dann z.b. auf dem Iphone aus, da zieht sich dann der blaue Hintergrund, der eigentlich da nicht sichbar sein sollte, über die ganze Seite....

Leg die Seite mal im Firefox und im IE nebeneinander...

Gruss und Danke

Peter

- - - Aktualisiert - - -

Nun ja die Seite iss ja HTML5.

Funktioniert ja auch leider nur im IE nicht, da kommt die Meldung wegen dem fehlenden Mime-Typ in der Konsole.

Wie geschrieben, da gabs die Info, man sol das File als .ogg hinterlegen, dann sollte es funktionieren.

Bei der Testseite

www.actatek.de/sounddest.html

Hab ich genau das gemacht. Das dort hinterlegte File ist .ogg Safari und Firefox könnens, aber der IE immer noch nicht.

Der Sound wird ja über ein Jscript geladen. Wie ich das mit dem Audio-Tag machen soll, ist mir noch ein Rätsel. Aber bei selfhtml find ich sicher einen Hinweis;-)

Bisher dachte ich eigentlich, der Mime-Typ habe nur was mit den Mails zu tun...

Gruss

Peter
 
so sieht es richtig aus:

Code: 
<audio controls>
  <source src="horse.ogg" type="audio/ogg">
  <source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>

javascript, brauchst du dafür nicht.

Falls du aber die Sounds aus einer Funktion host, dann müsstest du dir am besten den obigen Code, in dieser Funktion zusammenbauen und ins Dokument schreiben lassen.

PS: Deine Sound-Testseite ist offline
 
Zuletzt bearbeitet:
dbarthel schrieb:
PS: Deine Sound-Testseite ist offline
Zum Vergrößern anklicken....

Nö, eigentlich nicht...grad nochmals getestet (16:44)

http://www.actatek.de/soundtest.html

aber ich konzentrier mich erst mal auf Dein Beispiel:)

- - - Aktualisiert - - -

Ich habe da eine standard-funktion drin, welche .wav's abspielen kann. Scheint mir etwas wirr und kann eben nicht mit ie...
Vielleicht kannst du's ja verwenden....
---------------


HTML: 
/**
 * jBeep
 * 
 * Play WAV beeps easily in javascript!
 * Tested on all popular browsers and works perfectly, including IE6.
 * 
 * @date 10-19-2012
 * @license MIT
 * @author Everton ([url]www.ultraduz.com.br[/url])
 * @version 1.0
 * @params soundFile The .WAV sound path
 */
function jBeep(a)
{if(!a)a="jBeep/jBeep.wav";
var b,c,d;d=true;
try
	{
		if(typeof document.createElement("audio").play=="undefined")d=false
		}
			catch(e){d=false}c=document.getElementsByTagName("body")[0];
			if(!c)c=document.getElementsByTagName("html")[0];
				b=document.getElementById("jBeep");
			if(b)
				c.removeChild(b);
			if(d)
			{
				b=document.createElement("audio");
				b.setAttribute("id","jBeep");
				b.setAttribute("src",a);b.play()}
			else if(navigator.userAgent.toLowerCase().indexOf("msie")>-1)
			{
				b=document.createElement("bgsound");
				b.setAttribute("id","jBeep");
				b.setAttribute("loop",1);
				b.setAttribute("src",a);
				c.appendChild(b)
			}
	else{
		var f;
		b=document.createElement("object");
		b.setAttribute("id","jBeep");b.setAttribute("type","audio/wav");
		b.setAttribute("style","display:none;");
		b.setAttribute("data",a);
		f=document.createElement("param");
		f.setAttribute("name","autostart");
		f.setAttribute("value","false");
		b.appendChild(f);
		c.appendChild(b);
		try{b.Play()
		}
		catch(e){b.object.Play()
	}
}
		}
 
Zuletzt bearbeitet von einem Moderator:
psteimann, bitte keine Vollzitate und bitte immer Code Tags verwenden. Ich muss bei dir beinahe jeden Beitrag ändern. :boxing:
 
Hab's nun mal abgeändert gemäss Deinem Beispiel und hochgeladen:

http://www.actatek.de/soundtest2.html

Das scheint dann nur der Firefox zu können. IE und Safari versagen hier beide...

Bei dem Beispiel, welches ich vorher reingestellt habe und auf der Site auch hinterlegt ist, gehen Safari und Firefox, aber IE nicht..Klick da mal auf den Klingeln-Button rechts unten auf der Tastatur

Actatek Simulator

- - - Aktualisiert - - -

mikdoe schrieb:
Für meine Augen sieht die Seite in beiden Browsern gleich aus.
Was meinst du denn für Darstellungsunterschiede?

Auf den Fehler mit dem MIME Typ im IE weiß ich keine Antwort, kenne mich mit Sound überhaut nicht aus.
Aber ich meine, SteelWheel und kkapsner hätten da was auf dem Kasten.
Zum Vergrößern anklicken....
------------------

Safari und IE in den aktuellsten Versionen machens identisch. Firefox machts in der aktuellen und in der letzten Version anders...siehe Abbildung links Firefox, Rechts Safari. (Auf IE verzichtet, da wie geschrieben identisch)

Browsergeraffel.jpg
 
Gibts nur eine Sound-Datei oder mehrere?
Von was ist es abhängig, welche Sound-Datei abgespielt werden soll?

Falls es nur eine Datei gibt, kannst du dir JS sparen und mein Beispiel oben nutzen.
Musst nur das src anpassen.

Wann soll der Sound denn wiedergegeben werden?

Welche Audio-Formate verwendest du nun?
 
Zuletzt bearbeitet:
Jetzt sehe ich den Unterschied. Der obere Rand ist links kantig und rechts rundlich. Aber wie behebt man das? Ich weiß es nicht.
 
Hi,

Es gibt 4 verschiedene Sounddateien, welche ich jetzt alle nach .ogg konvertiert habe. Auf der Seite mit dem Terminal sinds noch .wav und mp3, aber im Ordner sind die dateien zusätlich als .ogg abgelegt zum testen.

Ich kann die Dateien in jedes beliebige Format konvertieren, das wäre nicht das Problem.

Gegenwärtig läuft das ja ausser im IE mit dem Script, welchen ich hier gepostet habe. Jeder Tastendruck erzeugt ein Beep, ein Klick auf den Fingerprint lässt eine Tür quitschen, Ein Click auf die Glocke erzeugt ein Klingelsignal und ein Click auf den Link setzt das Formular zurück mit einem "Blob". Zudem werden je nach Funktion noch Bilder geswappt und ein Statustext im Display ausgegeben. Ist etwas spielerei, ich weiss..fiinds aber hier noch recht passend...

Die 2 Beispiele habe ich ja auf den Webserver hochgeladen, beide (auch Deines) funktionieren bei mir nur im Firefox. (Siehe oben)

Gute Nacht....

- - - Aktualisiert - - -

sry...
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben