Ein interessanter Artikel mit dem Vorschlag größere Schriftgrößen auf Webseiten zu verwenden.
16px body copy, anything less is a mistake
Da hat er Recht der Mann. Kleine Schriften haben auch den Nachteil, dass bei einer Webseitenbreite von 900px und einer Spalte die Zeilen viel zu lang zum Lesen sind. Lesen auf dem Bildschirm ist anstrengender als auf dem Papier, manche Seiten sind eh sehr textlastig und dann noch die kleinen Schriften.

Ich habs geahnt – wenn man per CSS mehrere Hintergrundbilder des Body zentriert und vielleicht noch einen Seiteninhalt hat, der mittig zentriert ist, dann sind der Hintergrund und der Inhalt nicht immer direkt übereinander: CSS Sub-pixel Background Misalignment

Ich habe mich ein wenig mit Nicht-System-Schriften in Webseiten beschäftigt und das ist dabei herausgekommen. Man kann Schriften, die auf dem System des Benutzers nicht verfügbar sind, mittels @font-face per CSS inkludieren und nutzen. Kleine Anleitung dazu. Natürlich sieht die Seite in jedem Browser etwas anders aus. Im IE schien die Schrift eine ganz andere zu sein. Wie ich diesem Artikel font-face Schriften in Webseiten einbetten erfahren habe, kann der IE nämlich keine OTF-Schriften, daher muss man diese vorher in EOT konvertieren. Fontforge ist nicht mehr als Binary verfügbar und viele Programme wollte ich nun auch nicht installieren und fand dann dieses Tool: Font Squirrel. Das kann nicht nur aus einer OTF-Datei die benötigte EOT erstellen, sondern generiert den korrekten CSS-Schnipsel dazu und erstellt eine Datei, die die Schrift in vielen Größen darstellt, so dass man einen Eindruck davon bekommt, wie sie sich in unterschiedlichen Schriftgrößen verhält.

Video-Referat zu HTML5/CSS3 von einem Studenten der Medieninformatik und Gestaltung an der Uni Bielefeld. Echt cool!

Bei der Seite, die ich aktuell erstellt habe, ist ein interessantes Problem aufgetreten.
Eintrag weiter lesen »

Ja, das gibts auch mal – Fehler in Opera! Wie man den löst, weiß ich noch nicht, aber ich beschreibe das Problem schonmal.

Div A floatet rechts, direkt dahinter ist Div B, floatet ebenfalls rechts. In Div A ist eine Liste mit Links, einer davon hat ein eingebettetes Div, dass bei Rollover über das Listenelement aufklappt. Dieses Div ist deutlich breiter als das übergeordnete Listenelement. In Opera sorgt nun das Rendering für ein sonderbares Verhalten im aufklappbaren Div. Dieses wird nur zum Teil darstellt, wenn man mit der Maus in den Bereich reinfährt, wo etwas sein soll, so wird der Rest strückchenweise dargestellt. In allen anderen Browsern ist es bei richtiger Implementierung korrekt. Verändert man nun das Floating von Div B, so wird alles wieder richtig dargestellt.

Beispiel folgt in Kürze!

Ich hatte schon länger die Vermutung, dass der Inhalt der Submit-Buttons im IE (also das Label) das Padding beeinflußt. Zunächst dachte ich, es wären die Auswirkungen des Double-Margin-Bugs (nur im Bezug auf Padding, im IE würde es mich nicht wundern) oder ich hätte es falsch gesehen. Heute war ich so genervt (ich meine neugierig), dass ich mal eine Testseite gemacht habe.
Dann habe ich auch mal nach einer Lösung gesucht und tatsächlich was gefunden, was zu funktionieren scheint – nämlich hier. Der Fix (width: 1; overflow: visible;) verwirrt den Firefox aber doch, daher mein Vorschlag für die IE den Hack zu verwenden. In der Testseite sind übrigens die “normale” Variante und der Fix gegenüber gestellt.

Es gibt einige Beispiele im Web, wie man abgerundete Ecken mit CSS machen kann. z.B. hier:
CSS Play
Dabei wird nach der Methode der Näherung immer pro Zeile eine Linie gezeichnet. Die Methode hat den Vorteil, dass man keine Bilder zeichnen muss und einfach die Farben ändern kann. Der Nachteil sind die unzähligen Divs, die einen schwachen Browser vielleicht auch mal zur Verzweiflung bringen können. Aber die Entscheidung, wie mans macht überlasse ich jedem selbst. Ich habe nur PHP dazu verwendet, um mir diese Divs und das CSS dazu zu generieren. Dabei kommt der gute alte Satz des Pythagoras zum Einsatz.
Hier mal eine kurze Erklärung, was das Skript macht. Zunächst ist da ein umgebendes div, das relativ positioniert wird, darin ist ein Div mit Inhalt – das kann auch ein Bild, ein Text, eine Tabelle etc. sein. Und am Ende 4 weitere Divs, die als Ecken gerendert werden. Jedes dieser vier Eck-Divs enthält viele weitere Divs, und zwar pro Rundungszeile einen. In der Variablen r definiert man den Radius der Ecken.
zum Testen
Download (ist eine Html-Datei, einfach speichern und Endung ändern)

Tada! Nach dem Finder des Bugs (mein Kollege) taufe ich den bug feierlich auf den Namen “Kra-bug”!
Beschreibung:
Ein Listenelement mit einer weiteren Liste als Unterelement mit einer Hintergrundfarbe beeinflußt das folgende komplett unschuldige Listenelement.
Auftreten:
Wenn bei dem aktuellen aufgeklappen Listenelement das Padding-Bottom auf 0 gesetzt wird, und es vorher einen Wert hatte.
Beispiel:
Hier der HTML Code.

Dieses CSS ist noch ok.

Das bringt den armen IE6 total durcheinander:

oder auch das:

Wenn jemand woanders eine Beschreibung des Bugs findet, bitte schreiben.

Hab heute ein kleines Drop-Down-Menü umgesetzt, so ähnlich wie das hier:
http://www.cssplay.co.uk/menus/final_drop2.html
Erkenntnisse des Tages:

• ohne der Angabe der background-color (oder background allgemein) in den Untermenüpunkte reagiert der IE6 gar nicht auf Drop Downs
• der IE8(Beta) funktioniert selbst im IE7-Modus anders als der IE7 nativ, da wurde der aktive Status vom Menü nicht korrekt dargestellt und gelegentlich verschwinden die Texte
• Windows und Mac haben komplett unterschiedliches Schriften-Rendering, auf dem einen System ist die Schrift ganz passabel, auf dem anderen passt sie nicht in die Ausgabefläche
• bei verschachtelten Menüs verschwinden die Menüpunkte komplett, wenn man mit Transparenzen arbeitet – man kann ein transparentes Menü machen, es verschwindet aber, wenn man versucht es nicht transparent zu machen bei Rollover

Lösung gibt es für die vielen Probleme leider keine, immer nur Workarounds. Da macht man das Menü im IE6 bei Rollover eben nicht opaque, gibt einen schwachsinningen Hintergrund, damit es angezeigt wird. *kotz*