[duncan.blues]

Ich habe mir angewöhnt, meine Webseiten grundsätzlich für den Firefox zu schreiben und danach für den IE anzupassen. Ist 1000x einfacher und zuverlässiger als andersherum.
Meistens komme ich mit einer Zusatz CSS-Datei für den IE mit weniger als 10 Einträgen aus.

Wichtig ist, dass die Webseite einen gültigen DOCTYPE Header hat, damit der IE nicht in den sogenannten "Quirks Mode" verfällt und das Rendering des IE 5 emuliert.
Des weiteren sollte man Font-Größen immer in "px" angeben, damit reduziert man Anzeigeprobleme über Betriebssystemgrenzen hinweg.
Beim Schreiben der CSS Dateien habe ich mir einige Standard-Vorgehensweisen angewöhnt, die sich im Laufe der Zeit als praktikabel erwiesen haben. Das sind Dinge die so in keinem Lehrbuch stehen. Trotzdem kann ich ein Buch dazu empfehlen: "CSS Praxis" von Galileo Computing. Das hat sehr gute Übersichten darüber, was wie mit welchem Browser funktioniert und was nicht.

Auch wenn ich den IE nicht sonderlich mag, muss ich zugeben, dass mit dem 7er ein paar Dinge besser geworden sind. So zum Beispiel, dass endlich PNG Dateien mit Alphakanal unterstützt werden. Das erleichtert das anspruchsvolle Gestalten von Webseiten ungemein.

Meine Prioritäten bei der Webseitenerstellung:
- sauber W3C konform
- perfekte Optik in Firefox
- sehr gute Optik in Internet Explorer 7
- gute Optik in Opera (selten ein Problem)
- sauberes Aussehen im Safari + Konqueror (klappt meist auch)
- passables Aussehen im IE6 (auf mangelnden PNG Support nehme ich keine Rücksicht mehr)
- Seite möglichst noch bedienbar im IE 5.5 und 5 (wer die noch benutzt ist selber Schuld)

[meshua]

Zitat von duncan.blues

[...]
Des weiteren sollte man Font-Größen immer in "px" angeben, damit reduziert man Anzeigeprobleme über Betriebssystemgrenzen hinweg.

Nein, absolute Groessen schaffen erst Probleme. Daher wird als Groesseneinheit, egal ob bei Schrift oder Elementen, die Verwendung von "em" angeraten. Eine 10px Schrift ist bei einer UXGA-Aufloesung kaum noch zu lesen.


Gruesse, Torsten.

[dino the pizzaman]

Zitat von meshua

Nein, absolute Groessen schaffen erst Probleme. Daher wird als Groesseneinheit, egal ob bei Schrift oder Elementen, die Verwendung von "em" angeraten. Eine 10px Schrift ist bei einer UXGA-Aufloesung kaum noch zu lesen.


Gruesse, Torsten.

genau so ist es. und wenn man flüssige layouts macht eignet sich em gleich auch noch für das Definieren von gewissen Layout-Massen.


Ich hab früher akribisch alle Seiten so geamcht, dass sie auf allen Browsern perfekt benutzbar waren, sogar mit Optimierungen für Barrierefreiheit und Textbrowser etc. Heute bin ich soweit, dass ich für Firefox, Safari, Opera und ggf. Linux-Browser optimiere und darauf achte, dass es im IE7 passt. Das ist eignetlich alles kein grosses Ding. Den IE6 und tiefer hab ihc bewusst abgesägt, auch die Mühe für den png-Fix mache ich mir nicht mehr. Das ist ein Müllhaufen an Softwarecode. Aber ich kann mir ads auch leisten, da es eine private Seite ist und ich ja eigentlich nicht von den Besuchern der Seite abhängig bin. Wäre es eine Firmenseite oder ein Auftrag sieht die Sache anders aus. Aber zum Glück sind die Zeiten bei mir - zumindest vorerst - vorbei.

[meshua]

Zitat von dino the pizzaman

genau so ist es. und wenn man flüssige layouts macht eignet sich em gleich auch noch für das Definieren von gewissen Layout-Massen.

Richtig, mit "Elementen" bezog ich mich nicht nur auf length/width/height sondern auch solche Sachen wie margin/padding/line-height...

Gruesse, Torsten.

[duncan.blues]

Zitat von meshua

Nein, absolute Groessen schaffen erst Probleme. Daher wird als Groesseneinheit, egal ob bei Schrift oder Elementen, die Verwendung von "em" angeraten. Eine 10px Schrift ist bei einer UXGA-Aufloesung kaum noch zu lesen.

Stimmt natürlich, aber dann kriegst du auf der anderen Seite Probleme mit komplexeren CSS Box-Layouts. Dann kannst du Layouts mit mehr als zwei nebeneinanderliegenden Blöcken effektiv vergessen. Einzige Möglichkeit dann wieder: Mit blinden Tabellen arbeiten, was auch mega-bäh ist.
Die Verwendung von "em" ist praktikabel, wenn man's richtig macht. Ist aber nicht so einfach. Wenn man das Layout auf sehr hochauflösenden Bildschirmen entsprechend skalieren will, dann muss man eigentlich mit Prozentwerten arbeiten, dabei steht einem aber meistens die sehr seltsame Definition von Breite und Höhe laut W3C (Margin, Padding und Border eines Elementes zählen nicht mit zur Breite bzw Höhe) im Wege.

Ist alles nicht so einfach. Entweder es passt nicht auf allen Browsern oder die Darstellung ist bei Displays mit hoher oder niedriger Auflösung suboptimal. Die Patentlösung gibt es IMHO (leider) nicht.

Naja...hauptsache man versucht nicht mit "pt" zu arbeiten

[meshua]

Zitat von duncan.blues

Stimmt natürlich, aber dann kriegst du auf der anderen Seite Probleme mit komplexeren CSS Box-Layouts. Dann kannst du Layouts mit mehr als zwei nebeneinanderliegenden Blöcken effektiv vergessen.

Nicht unbedingt, wenn es ordentlich implementiert ist. Bei meinem Beispiel hast Du mindestens 4 oder mehr CSS Elemente nebeneinander angeordnet, welche bei Bedarf umgebrochen werden.

Einzige Möglichkeit dann wieder: Mit blinden Tabellen arbeiten, was auch mega-bäh ist.

Blinde Tabellen haben auch ihre Berechtigung. Man sollte sie gezielt einsetzen aber nicht als Alleskoenner ansehen. Sie versagen z.B. wenn eine variable Anzahl an Spalten und Reihen gefordert sind (siehe mein Thumbnail-Beispiel).

Die Verwendung von "em" ist praktikabel, wenn man's richtig macht. Ist aber nicht so einfach. Wenn man das Layout auf sehr hochauflösenden Bildschirmen entsprechend skalieren will, dann muss man eigentlich mit Prozentwerten arbeiten, dabei steht einem aber meistens die sehr seltsame Definition von Breite und Höhe laut W3C (Margin, Padding und Border eines Elementes zählen nicht mit zur Breite bzw Höhe) im Wege.

Prozentwerte als Groessenangaben habe ich bewusst nach Moeglichkeit aussen vor gelassen. diese beziehen sich auf die Groesse des Elternelements, waehrend "em" in Relation zur Schriftgroesse des Elternelements steht. Mit Width-Max oder Auto haben kaputte Broser, wie der IE, so ihre Probleme. Alle anderen kommen damit weitestgehend klar. Oder was meinst Du mit "seltsame Definition"?

Ist alles nicht so einfach. Entweder es passt nicht auf allen Browsern oder die Darstellung ist bei Displays mit hoher oder niedriger Auflösung suboptimal. Die Patentlösung gibt es IMHO (leider) nicht.

Naja...hauptsache man versucht nicht mit "pt" zu arbeiten

... oder px Wie bereits erwaehnt kann man von Browsern, welche sich bewusst nicht an die W3C Standards halten, nicht erwarten, dass eine W3C kompatible Seite zu 100% korrekt dargestellt wird. Die Schwaechen des IE habe ich hauptsaechlich bei CSS Formatanweisungen gefunden - Neben Netscape 4 schafft das kein kein anderer mir bekannter Browser der Windows/MAC/Linux/BSD-Welt .

Gruesse, Torsten.

[duncan.blues]

Was ich zum Beispiel meinte, waren dynamische Layouts (mit nicht-festen Block-Größen).
Wenn du schon das Beispiel mit dem extrem hochauflösenden Bildschirm bringst, dann muss auch erwähnt werden, dass du ein Layout dass auf eine Breite von 1000 oder 1200 Pixeln festgelegt ist genauso vergessen kannst.
Wenn du jetzt aber z.B ein dreispaltiges Layout machen willst mit sagen wir mal einer Aufteilung 20:60:20%, dann reicht es nicht, einfach die DIVs auf entsprechende width-Prozentwerte zu setzen, wenn du gleichzeitig z.B. ein Padding verwenden willst, damit zwischen den Inhalten der einzelnen DIVs etwas Freiraum ist.
Letztendlich läuft es leider allzu häufig auf einen DIV-Schachtelitis hinaus.

[meshua]

Hallo,

noch ein kleiner Tip, den ich in einer entsprechenden Newsgroup bekommen hatte. Wer sich bisher wunderte, warum sein CSS-Tabellenlayout in Browsern, wie zum Beispiel Opera, falsch ausgerichtet erscheint, kann ich folgendes empfehlen:

Den DOCTYPE von ggfls. Transitional nun auf Strict setzen.

Hat bei mir eine ueberschaubare Menge an "Schwierigkeiten" mit Opera beseitigt.

Viele Gruesse,
Torsten.