[soy]

Hi,

ich arbeite gerade an einer Vereinsseite. Beim Testen in verschiedenen Browsern fällt auf, dass die Schrift verschiedene Laufweiten in verschiedenen Browsern hat. Das ist ja irgendwie zu erwarten, weil alle die Schrift verschieden rendern, aber hier nervt es schon, da die Navi bündig abgeschlossen doof aussieht (Beispiel unten).

Screenshot

Kann ich dem irgendwie entgegen wirken? Firefox stellt es schön da, Safari und Chrome zwar auch schön, aber länger. Wenn ich das jetzt für Chrome Safari anpasse, habe ich in Firefox viel weißraum rechts, was ich auch gerne vermeiden würde.

Gibt es da CSS Hacks o.ä.?

[Karlarsch]

Du weißt aber schon wie man Google bedient, oder?

Eine Suche nach "CSS browser hack" liefert z.B.
http://css-tricks.com/snippets/css/browser-specific-hacks/

Alternativ machst du eine Browser-Detection und schreibst dir via JS eine Klasse in den Body wie z.B. "ie8", dann hast du einen passenden Selektor mit dem du ohne Hacks arbeiten kannst.

Gruß
Karl

[ChrisKam]

Ich würde mich bei dem gezeigten Element auf keinen Fall darauf verlassen, dass die Laufweite allein für eine ausgeglichene Verteilung sorgt - das kann eigentlich nur in die Hose gehen. Gerade auch beim Zoomen. Dann gib' den einzelnen Elementen lieber noch ein feste Breite, in der die Schrift sich mittig zentriert dann ausbreiten kann. Keine allzu elegante Lösung (und es gibt bestimmt bessere), aber es sieht ja nicht so aus, als würden sich Punkte schnell ändern - deshalb durchaus machbar.

Browser Hacks alleine werden Dir im Übrigen nicht viel weiter helfen, denn die Darstellung der Schriften ist noch stärker vom OS abhängig, und da wird es dann kompliziert.

[soy]

Ja ich kann googlen, und ich kenne auch Browserhacks bereits. Allerdings kann ich über CSS ja die Laufweite einer Schrift beeinflussen, und Systeme wie die Boilerplate haben in dem Stylesheet wahnsinnig viele Einstellungen, die das Schriftbild optimieren sollen, von denen viele glaube ich noch nicht gehört haben. Ich habe gedacht, vielleicht gibt es so etwas auch für mein Problem.

Alternativ kann ich mir irgendwie vorstellen, die Schrift in einem erzwungenen Blogsatz zu setzen, dann müsste man nur mittels jQuery immer den Leerraum aufteilen und als variables Padding den Links hinzufügen. Aber das übersteigt auch mein Wissen... (Ist vielleicht auch Quatsch und mit mehr Wissen als impraktikabel entlarvt)

ChrisKam ich glaube du hast Recht, zumal ja noch mobile Geräte und Tablets dazu kommen. Werde das dann wohl so machen müssen!

Vielen Dank für eure Hilfen!
Freundliche Grüße,
Soy.

[Morgo]

Wenn du ganz innovativ sein möchtest und gerne experimentierst, könntest du das übrigens für die neueste Browser-Generation auch über CSS mittels Flexbox versuchen...