[SCRIPT] Browserversion > Probleme mit Browserkompatibilität

[kite]

Hi,

Ich habe jetzt meine erste Webseite mit Halbtransparenten PNGs umgesetzt.
Ich wusste zwar, dass das bei älteren Browsern zu Problemen führen kann, war mir aber sicher, dass es da mittlerweile einige funktionierende Scripts für gibt.

Nachdem ich die Seite nun zusammengebastelt habe und Sie unter Safari, Firefox und dem neusten Internet Explorer auf jeden Fall läuft habe ich aber nun das Problem mit den älteren Browsern.

Der Internet Explorer 6, den mein Bruder noch auf seiner Kiste hat stellt die Seite komplett falsch dar und lässt auch keine Transparenzen zu, egal ob ich ein Script benutze oder nicht.

Da ich mich nicht ewig mit diesen blöden PNGs in Uraltbrowsern auseinandersetzen kann (und will) bin ich deswegen jetzt auf der Suche nach einer radikaleren Methode: Ein Script, dass ab einer bestimmten Version eines Browsers verschiedene Updatemöglichkeiten anzeigt und den User sonst draußen lässt oder zumindest vor Darstellungsfehlern warnt.

Ich werde mich noch ein wenig mit den PNG-Scripts auseinandersetzen, wäre aber froh, wenn jemand so ein Browser-Check-und-Update-empfehlen-Script kennt und/oder empfehlen kann, damit ich nachher nicht dumm aus der Wäsche gucken muss, wenn es gar nicht hinhauen sollte

edit: Die Transparenzen habe ich jetzt doch noch schneller hinbekommen als ich dachte. Trotzdem würde ich mich über Hinweise auf ein wie von mir beschriebenes Script freuen.

[idea-tec]

So kannst du es schon einmal generell den Browser abfragen:

Code: Alles auswählen

if (eregi('Opera',$_SERVER['HTTP_USER_AGENT'])) {
	echo "<font style=\"color: red; \">Diese Funktion ist für Internet Explorer 7.x optimiert!<br>Bei Ihrem Browser kann es zu fehlerhafter Anzeige oder eingeschränktem Funktionsumfang kommen,<br>wir möchten Sie bitten den Internet Explorer zu benutzen.<br><br> Wir danken Ihnen für Ihr Verständnis,<br>Ihr Team von xyz</font>";
 } elseif (eregi('Firefox',$_SERVER['HTTP_USER_AGENT'])) {
	echo "<font style=\"color: red; \">Diese Funktion ist für Internet Explorer 7.x optimiert!<br>Bei Ihrem Browser kann es zu fehlerhafter Anzeige oder eingeschränktem Funktionsumfang kommen,<br>wir möchten Sie bitten den Internet Explorer zu benutzen.<br><br> Wir danken Ihnen für Ihr Verständnis,<br>Ihr Team von xyz</font><br><br></td></tr>";
 } elseif (eregi('Netscape',$_SERVER['HTTP_USER_AGENT'])) {
	echo "<font style=\"color: red; \">Diese Funktion ist für Internet Explorer 7.x optimiert!<br>Bei Ihrem Browser kann es zu fehlerhafter Anzeige oder eingeschränktem Funktionsumfang kommen,<br>wir möchten Sie bitten den Internet Explorer zu benutzen.<br><br> Wir danken Ihnen für Ihr Verständnis,<br>Ihr Team von usefulpics</font><br><br>";
 } else { }

Den gleichen Befehl kannst du auch benutzen um die Version abzufragen, Details gibt es hier:
http://www.selfphp.de/funktionsreferenz ... rowser.php

[GaMbIt_]

also... eigentlich kommen alle Browser mit PNG und Alphakanälen im PNG zurecht...
Nur eben nicht die Internet Explorer vor dem 7er...

Prädestiniert dafür sind die vom Microsoft eingeführten Conditional Comments... damit kann man recht einfach mit einem Kommentar verschiedene Browserweichen basteln.

<!--[if lte IE 7]> Wird nur ausgegeben wenn die Bedingung "lower than IE7 erfüllt ist <![endif]-->

Für PNG's und dem alten IE6 gibts feine und kleine Lösungen die auch png-Transparenz für CSS Hintergrund Bilder ermöglicht...

[kite]

Ja, wie bereits geschrieben habe ich das auch schon hin bekommen.

Hilfe fand ich auf dieser Seite: http://code.google.com/p/ie7-js/
Das dort angebotene JavaScript erleichtert die Arbeit mit dem Internet Explorer ungemein.
Neben transparenten PNG werden auch andere CSS-Features möglich gemacht, die der Internet Explorer 6 nicht unterstützt.

Um PNG transparent darzustellen, muss man einfach nur ein "-trans" an den Dateinamen hängen und den Rest übernimmt das Script.

Wenn ich nun noch die grausigen Verzerrungen der DIV-Layer und die vielen Verschiebungen in den Griff bekomme, dann kann von mir aus jeder seinen Browser behalten

Danke auf jeden Fall schon mal für das Script und den Link idea-tec.
Wenn ich es zum Laufen bekomme, dann kann ich vielleicht ja doch noch jemanden dazu bewegen es Code-Laien wie mir erheblich einfacher zu machen

[GaMbIt_]

Hast Du die Seite irgendwo schon online? dann könnte ich mal drüberschauen...
Das hört sich nämlich sehr nach nem CSS / XHTML Problem an...

Welche Code Teile sind denn am schlimmsten?

Wenn Du das zusammen mit dem CSS mal postest könnten sicher auch einige helfen...

[kite]

Hey,

Das ist ja nett von dir! Ich würde mich sehr über Hilfe freuen.

Am schlimmsten betroffen sind die Top-Navigation sowie der Content-Bereich, in dem die rechte Spalte nach unten verschoben wird.

Woran das genau liegt kann ich auch nur erahnen, weil ich selbst am Mac arbeite und somit den Internet Explorer 6 gar nicht installiert habe.
Das macht es natürlich ziemlich kompliziert an diesem Problem zu arbeiten.

Ich hoffe, ich habe da kein all zu großes Wirrwarr geschaffen.
Bin leider kein Experte auf dem Gebiet HTML, CSS, ... aber ich tu mein Bestes!

Hier nun also die Links:

Contenido: http://www.josef-heyes.de/cms/
CSS: http://www.josef-heyes.de/cms/css/jhcss.css

edit: Ich glaube an zwei Stellen hängt die Verschiebung mit div-layern mit dem style "clear: both" zusammen. Kann das sein?

[idea-tec]

Zum testen von Browserversionen:
http://www.xenocode.com/browsers/

[kite]

Zum testen von Browserversionen:
http://www.xenocode.com/browsers/

Danke, aber das ist leider auch nicht mit dem Mac kompatibel

[idea-tec]

das gibt es sicher auch irgendwo für mac, mal googeln.

[kummer]

nur so als tipp am rande: die browserkennung findet sich bereits im request. aufgrund dieser information lassen sich im layout unterschiedliche und damit browserspezifische css einbinden. diese information findet sich in der variablen...

Code: Alles auswählen

$_SERVER['HTTP_USER_AGENT']

beim ie 6 sollte folgende prüfung auf true auswerten:

Code: Alles auswählen

preg_match("^.*?MSIE\\s*6\\..*$", $_SERVER['HTTP_USER_AGENT'])

sowas könnte man also direkt ins layout integrieren:

Code: Alles auswählen

<?php if(preg_match("^.*?MSIE\\s*6\\..*$", $_SERVER['HTTP_USER_AGENT'])) {?>
<!-- css-einbindung ie 6 -->
<?php } else {?>
<!-- css-einbindung andere browser -->
<?php } ?>

habe das jetzt nicht auf die schnelle prüfen können, sollte aber nach meiner einschätzung funktionieren.

EDIT: habe offenbar gar nicht den ganzen thread gelsen. dürfte also schon diskutiert worden sein. sorry, dachte die frage sei offen.

[GaMbIt_]

Sodele... da prasselt gleich mal was auf Dich nieder

zuerst mein fast schon standardspruch...
Mac is böse

dann zum Eigentlichen...

1:
Du solltest die XHTML Ausgabe in den Mandanteneigenschaften aktivieren. Dann sind nicht ganz so viele Fehler im Validator...
Bis jetzt werden z.B. die Meta Tags nicht geschlossen...

2:
Dann hast Du ID's mehrfach vergeben... ins Auge gehüpft ist mir da die ID "item_shadow_2"

3:
Dein Wrapper Div .. laso das Div mit der ID container hat eine absolute Positionierung mit einer linken Position von 50% ... und dann einen negativen linken Abstand der der Hälfte der Breite entspricht...
Das ist nicht ideal weil einige Browser negative Margins nicht mögen... eine relative Positionierung und ein automatischer margin für links und rechts sollte das selbe Ergebnis liefern...

4:
Es ist nicht zwingend nötig den DOM Baum anhand aller ID's abzugrasen... anstelle des CSS Selektors #container #top genügt auch nur #top, das lässt den Code einfacher lesen und spart zudem noch Platz.

5:
Du vermischt Inline Styles und ein externes Stylesheet...
Da ist es immer ein bisschen schwierig den Fehler zu finden, besonders wenn sich Werte aus der externen CSS Datei mit inline Werten überschneiden.

6:
Ich sehe dass Du ziemlich viele ID's verwendest wo es auch Klassen getan hätten..
eine ID ist ein "eindeutiger" Identifikationspunkt im Dom Baum eine CSS Klasse ist nur für die Formatierung zuständig...

7:
Die Hauptnavigation ist suchmaschinentechnischer Selbstmord...
Ein Image als Inhalt für den Link und dieses Image heisst dann auch noch spacer.gif... der Linktext ist leer.. der Link hat weder alt-Text noch einen Titel... die Schrift die man auf der Website dann in der Navi sieht liegt in einem Hintergrundbild das warscheinlich bei einem Hover Effekt per CSS ausgetauscht wird...
Selbst wenn die Suchmaschinen dann das Hintergrundbild als "Linktext" verwenden wollen bekommen die diesen Dateinamen beim ersten Navigationspunkt...
1_inaktiv-trans.png .. na das sagt mal ne Menge über den Inhalt der verlinkten Seite aus...
Positiv an der Sache ist dass die Navigation in einem abgeschlossenen Container, also div liegt und Du somit recht einfach die gesamte Navigation austauschen kannst...
Wie siehts hier mit Dynamik aus? wie wird die Navigation generiert?

8:
Man könnte die Struktur ein wenig vereinfachen...
Ich sehe dass die Navigation aus nebeneinander angeordneten Divisions besteht die mit float:left nach links fliessend formatiert sind. Das funktioniert auch und ist auch gängig... auch wenn ich Navigationen als usortierte Listen bevorzuge.
Das Extra div mit dem clear:both und visibility:hidden ist IMHO nicht nötig da ja das nächste tatsächlich mit Funktion versehene div das Auflösen des Linksflusses ausführen kann...

Ich hoff ich hab Dich jetzt nicht erschlagen...


Großes Lob aber...
Ich hab den Code ohne Probleme lesen können und hab sofort verstanden was Du mit den einzelnen Divs vorhast...
Bei so ner Tabellen-Tagsuppe wäre das nicht gegangen...
Puristen nennen Deinen Code aber auch schon div-Suppe...

[kite]

Auweia, ich arbeite noch nicht so lange mit div-layern, und hab dann wohl die Tabellensuppe ausgeschüttet und mir div-Suppe nachgeschenkt

Dann werde ich mal versuchen das noch etwas zu reduzieren.

1. Done.

2. + 6. Argh. Also so wie ich dich verstehe ist es gar nicht nötig jedem div auch eine ID zu geben? Ich dachte das würde zum guten Ton gehören und habe das deswegen gemacht. Anscheinend habe ich das falsch verstanden.

Ich dachte eigentlich auch das würde zu einer besseren Übersicht verhelfen, in letzter Zeit ist mir aber auch schon aufgefallen, dass ich von den ganzen IDs erschlagen werde. Ist auch nicht gerade einfach sich für jeden Popelskram einen ID-Namen auszudenken

3. Ich habe diese Positionierungsmethode mal im Internet gefunden. War damals mit dem Problem konfrontiert eine Seite horizontal und vertikal zu positionieren. Hab mir das von da noch gemerkt.
Ich versuch es mal mit der von dir beschriebenen Methode.

4. Shame on me an dieser Stelle Ich nutze Dreamweaver und im Gegensatz zu der Zeit als ich noch mit Tabellen gearbeitet habe, halte ich mich ja schon eine sehr lange Zeit im Code-Bereich auf. Manchmal verschlägt es mich aber doch zu den einfachen Funktionen, die dann wohl aber wieder mehr ausspucken als sie sollten

5. Wird behoben.

7. Also diese verlinkten spacer.gifs würde ich auch am liebsten noch irgendwie rausbekommen. Das habe ich ja nicht nur in der Top-Navigation, sondern auch bei den Link-Bannern im Header und der rechten Navigation so gemacht. Ich habe nur hier das erste mal Rollover-Effekte mit CSS realisiert, und weiß noch nicht so recht damit umzugehen. Zum einen will ich für Style-Elemente keine <img>-Tags verwenden, zum anderen weiß ich aber auch nicht wie ich sonst eine Verlinkung erstellen soll. Deswegen bin ich diesen, zugegebenermaßen unfeinen, Weg über die spacer.gif gegangen.

Ich weiß aber auch nicht, ob man überhaupt darauf verzichten muss, die Bilder nur als Hintergrund in einen Layer einzufügen... es sind ja eigentlich keine Style-Elemente, sondern Navigationselemente...

Die Navigation ist nicht dynamisch. Ich habe die entsprechenden Seiten angelegt und dann statisch verlinkt, weil es meine Programmierkenntnisse (wenn man von Kenntnissen sprechen will) nicht anders zulassen

8. Das werde ich mal angehen. Als ich mich dazu entschlossen habe endlich die Tabellen links liegen zu lassen und Webseiten in Zukunft mit div-layern umzusetzen, war der Hauptgrund dafür auch die Vereinfachung des Codes. Wenn ich es noch einfacher bekommen kann, nehme ich mir da auch gerne etwas Zeit für um das System noch weiter zu durchschauen.

Erschlagen hast du mich nicht, eher sehr geholfen.
Ich werde deine Ratschläge und Anmerkungen mal umsetzen und mich dann noch einmal melden. Vielleicht hilft es ja schon, den Code weiter zu vereinfachen, um dem Kompatibilitätsproblem auf die Schliche zu kommen.

Ich bin ja schon froh, von jemandem, der mir so viel Kritik zu meinem Code geben konnte, ein Lob für eben diesen zu bekommen.

[GaMbIt_]

Hmmm nachdem da der Dreamweaver im Spiel ist sollte ich mir das nochmal überlegen

wichtig ist erst mal die absolute Positionierung vom Content Div zu entfernen... möglicherweise funktionierts dann schon mit dem IE6

[kite]

Hmmm nachdem da der Dreamweaver im Spiel ist sollte ich mir das nochmal überlegen

Das habe ich mir schon fast gedacht

Werde die Positionierung auch mal entfernen.

Danke sehr noch mal!

[kite]

So!
Ich möchte euch, und ganz besonders GaMbIt_, für die Hilfe danken.

Ich habe den Code, wie von GaMbIt_ vorgeschlagen, etwas simpler gestaltet, indem ich z.B. die Schatten auf der Seite als ganzes in den Hintergrund gepackt habe. Erst dadurch konnte ich dann auch endlich feststellen, dass der Fehler in der Darstellung im Internet Explorer 6 irgendwas mit den margins zu tun haben muss.

Nachdem ich etwas rumexperimentiert habe, aber zu keinem anständigen Ergebnis kam, hab ich Google befragt und siehe da:
Ich bin nicht alleine mit dem Problem.

Ein div mit margin-left: 100px und float: left wird im IE6 nicht 100px nach rechts gerückt sondern 200px.
Beheben lässt sich das, indem man einfach noch ein display: inline; in den entsprechenden div einfügt.

Von einigen Anpassungen, die ich noch machen muss abgesehen, sollte die Seite nun korrekt in allen Browsern angezeigt werden (Getestet: Safari, Firefox, IE6, IE7)

Mann, war das ein Geplänkel. Aber zumindest habe ich mal wieder etwas gelernt

Jetzt werde ich noch ein paar Fehler beseitigen und dann einige Punkte GaMbIt_s Liste abarbeiten.

Link zur Lösung: http://www.positioniseverything.net/exp ... argin.html


edit: Wenn mir noch jemand etwas helfen möchte, kann er sich mal anschauen, warum der Hintergrund für #content nicht angezeigt wird

Webseite: http://www.josef-heyes.de/cms/front_content.php
CSS: http://www.josef-heyes.de/cms/css/josefheyes.css