Noch eine eventuell bekannte Info zum Thema Firefox (bzw. "Gecko" Render Engine).

Firefox (Gecko) benutzen per default die 16px als Standard. Dann auch per default für "Courier New" 13px. Und nun?

Wenn man im Betriebssystem von 96dpi auf 120dpi wechselt, da man die Schrift etwas größer haben will, so ignoriert Firefox (Gecko) das geflissentlich.

Wenn man ein Code-Sample mit "pre/code" darstellt und dort per CSS "Courier New" und einen größeren "em" verwendet, so ignoriert Firefox (Gecko) das ebenfalls, "Courier New" hat per default nur 13px.

Die normalen Anwender basteln an den Einstellungen nicht herum, somit ist eine Schriftangabe mit "em" dem Firefox ziemlich egal (zwar nicht ganz, aber fast).

Systemgrößen werden genutzt von:

- IE ab 5.x
- Opera
- Konqueror
- Safari

Find ich von FF ziemlich "d..f", ist halt ne "extrawurscht".

Ist im Buch "CSS Mastery" im Kapitel "Layout" schön beschrieben, wie Bilder mitwachsen können. Kann man hier als englische Fassung herunterladen:
Andy Budd - CSS Mastery - Download a sample chapter

__________________
Internet Browser testen oder vergleichen | Mein Blog ohne Datenbank

Inkorrekt, ich lese!

Das dies im IE nicht ganz so berechnet wird ist mir schon aufgefallen, auf 750 Pixel hat er mir 5px der Länge geklaut.
Das ist nun weiter nicht so tragisch, da sich das ja in der ganzen seite durchsetzt.

Das eine Schrift Grösse von 10px zu klein ist, ist mir bestimmt klar.
Die wurde n der Seite die ich grade baue, auch für jedes Element dann extra bestimmt.(hx, p etc.)

Hm, ich wusste nicht das widescreen Monitore andere Pixelweiten haben.
Wenn die Grössen sich ändern, ändern sich dann ja alle flexiblen Teile mit, oder nicht? DH. sind dann die Proportionen zueinander nicht wieder dieselben?

Was meinst oder empfiehlst Du? Ich möchte bei flexi Design bleiben.

__________________
Säe Glück auf deines Nachbarn Feld, und du wirst dich wundern, was der Wind in deinem Garten wachsen lässt.

@laborix:

Danke für den Link!

__________________
Säe Glück auf deines Nachbarn Feld, und du wirst dich wundern, was der Wind in deinem Garten wachsen lässt.

Du hast natürlich völlig Recht mit deinem Einwand, und ich verbringe einen Teil meiner Zeit damit, Leuten beizubringen, dass sie beim Webdesign eigentlich fast nichts als gegeben hinnehmen sollten. Das "Papierdenken" (= Kontrolle des Autoren über die Seite plus Unveränderlichkeit der Seite beim Betrachter) sitzt allerdings ganz schön fest drin in den Köpfen ...

"Little Boxes" beginnt denn auch mit der Grundaussage, dass der Autor einer Webseite keine vollständige Kontrolle über deren Aussehen im Browser des Betrachters hat. Der Abschnitt endet mit den Worten "... wenn Sie Webseiten gestalten wollen, müssen Sie aufhören, Webseiten gestalten zu wollen. Tao. Lassen Sie los ..." (Mit den Betonungen lesen)

Die Spielerei mit den em und der Umrechnung in Pixel ist dazu gedacht, um den Lesern die Einheit em und das Prinzip "elastische Layouts" ein bisschen begreiflicher zu machen.

Doch doch. Das liest einer. Also nicht aufhören ... it hasLayout

Grüße aus Groningen
Peter

__________________
CSS lernen? "Little Boxes" - Teil 1 kostenlos online lesen.

Das wusste ich als Widescreen Laptop User mit technischem Hintergrund auch nicht.
Nein, Spaß beiseite, ich habe 96Dpi, allerdings habe ich das bei anderen Widescreen Usern beobachtet, dass die eine höhre Dpi Anzahl verwenden.

Dann macht es wohl eher Sinn, wirklich nur Bereiche mit Text in em auszuzeichnen und Header usw. doch eher in Pixel Maße zu nehmen (so lange sie nicht überschwänglich viel Text enthalten).

So wie Webkrauts es zum Beispiel handhabt.

Das kann ich gut nachvollziehen, denn die Idee mit dem em-Bildzoom ist gut. Ich finde sie vom Ansatz sogar besser als die Idee von Andy Budd (mit Prozent statt em), weil sie sich auf die tatsächliche Bildgröße bezieht und bei Prozent die Bildbreite vom umliegenden Block-Element abhängig ist.

Allerdings denke ich, dass sich die Bilder-Zoomerei demnächst als Normalfall in den Browsern wiederfinden wird. Stichwort "Seiten-Zoom vs. Text-Zoom": Beim Text-Zoom wird Text vergrößert, Bilder aber nicht. Beim Seiten-Zoom wird die Seite als Ganzes inkl. der Bilder gezoomt.

Früher hatten - abgesehen von Opera - die meisten Browser einen Text-Zoom. Im IE7 gibt es jetzt Text- und Seiten-Zoom (Dirk Jesse über IE7, Abschnitt "Seitenzoom - Ärger vorprogrammiert") und für Firefox 3 ist auch ein Seiten-Zoom angekündigt.

Der Trend scheint also eindeutig Richtung Seiten-Zoom zu gehen, womit auch die Bedeutung von flexiblen bzw. elastischen Layouts abnehmen wird, weil auch Pixel-Layouts zoombar werden.

Grüße aus Groningen
Peter

__________________
CSS lernen? "Little Boxes" - Teil 1 kostenlos online lesen.

Finde ich interessant, allerdings sollten dann auf allen Seiten eine Hilfe-Seite vorhanden sein, die erklärt, das neue moderne Browser das können, aber ältere Browser nicht. Auch sollte dort stehen, wie man den Text und Text/Bild vergrößert.

Beispiel am IE 7:
Menu - Ansicht - Textgröße = Textvergrößerung
Listbox unten rechts = Text und Bilderzoom (Seitenzoom)

Wobei die Listbox wieder Maussupport vorraussetzt und einige mögliche Menschen ausschließen könnte.

Beim Pixellayout taucht dann aber auch die Frage auf, wie sieht es mit Mobile Phone/PDA aus? Hier spielt die Bedeutung von flexiblen bzw. elastischen Layouts meiner Meinung eine sehr große Rolle. Ob hier auch eine Bildvergrößerung sinnvoll ist, wage ich zu bezweifeln.

\\Edit: Fehlerkorrekturen

Sorry, mit dem IE 7 und Seitenzoom, geht natürlich auch mit Tastatur.

__________________
Internet Browser testen oder vergleichen | Mein Blog ohne Datenbank

Wir hatten übrigens schonmal einen Thread, in dem es auch um Bilder-Zoom per em-Dimensionen ging (sowie um Pro & Kontra dieser Maßnahme): http://xhtmlforum.de/41419-layout-mit-seitenzoom.html

EDIT: Link korrigiert (war auf einen Post verlinkt, nicht auf den Thread)

Ausschließlich in em zu denken bzw. zu Designen hat viele Vorteile und (bis auf wenigen Ausnahmen) funktioniert immer.

Ich persönlich benutze "px, pt oder %" eigentlich nie (1 einzige Ausnahme, wegen Seiteneffekte bei Vergrößerung eines CSS abgerundeten Borders: da sollte man die Skalierbarkeit zugunsten von px aufgeben).

Weiterhin (ich glaube es war wegen IE6) sollte man html und body mit einer % Angabe für Font-Size initialisieren, sonst gibts es bei manchen Skalierungen Probleme. Ich benutze 99% - dem Besucher steht es frei, eine entsprechende Skalierung zu benutzen

Eine Sache, die es zu beachten gibt:
das Kaskadieren der Font - Skalierung (wie Para im 3. Msg es erwähnte), was folgendes Beispiel demonstriert:

gilt allerdings nicht nur für Font-size...

__________________
To attain knowledge, add things everyday. To obtain wisdom, remove things everyday. (Lao Tzu)
Links : Some needfull links (Delphi, XHTML...)
Tools : Arpoon Freeware (Checksum...)

... Eot

__________________
Säe Glück auf deines Nachbarn Feld, und du wirst dich wundern, was der Wind in deinem Garten wachsen lässt.