Schrift wird unterschiedlich dargestellt

[Melina]

Guten Abend,

ich bin etwas am verzweifeln, wie kann es sein, dass der Firefox und Google Chrome eine Schrift unterschiedlich groß darstellt?

Hier ein Bild vom Google Chrome

Hier ein Bild vom Firefox in der aktuellsten Version

Wie es im Google Chrome aussieht, so sollte es auch im Firefox aussehen. Mein HTML und CSS sieht so aus:

  
  
.logo {  
	display:inline-block;  
	width:39%;  
	padding-left:2em;  
}  
  
.logo a {  
	cursor:pointer;  
}  
  
header h1{  
	display:none;  
}  
  
.slogen {  
	position:absolute;  
	font-family: 'Niconne', cursive;  
	font-size:3em;  
	text-align:right;  
	margin-left:13em;  
	margin-top:-2.5em;  
	font-style:italic;  
	color:#999;  
}  

  
<header class="logo">  
	<h1>Logo</h1>  
        <a <?php if($_SERVER['PHP_SELF'] != '/index.php') echo 'href="index"' ?>><img src="img/logo.png" alt="Logo"></a>  
  	<div class="slogen">Wir helfen mit Sicherheit!</div>  
 </header>  

[Camping_RIDER]

Aloha ;)

Aus dem Bauch heraus? 3em ist eine relative Angabe für die Schriftgröße, in diesem Fall abhängig von der Schriftgröße des Elternelements. Schätzungsweise haben FF und Chrome unterschiedliche Ausgangs-Schriftgrößen.

Wenn du die Schriftgröße absolut kontrollieren willst, musst du eine absolute Maßeinheit verwenden.

Übrigens: Slogan schreibt man mit a ;)

Grüße,

RIDER

[Melina]

Hallo,

Aus dem Bauch heraus? 3em ist eine relative Angabe für die Schriftgröße, in diesem Fall abhängig von der Schriftgröße des Elternelements. Schätzungsweise haben FF und Chrome unterschiedliche Ausgangs-Schriftgrößen.

Wo kann ich schauen welche Ausgangs-Schriftgrößen die beiden Browser haben? Ist mir bis jetzt so noch nie wirklich aufgefallen, dass in einem etwas größer und im anderen etwas kleiner dargestellt wird.

Wenn du die Schriftgröße absolut kontrollieren willst, musst du eine absolute Maßeinheit verwenden.

Dann müsste ich ja px nehmen und das sollte ich ganz schnell vergessen :D

[Camping_RIDER]

Aloha ;)

Wenn du die Schriftgröße absolut kontrollieren willst, musst du eine absolute Maßeinheit verwenden.

Dann müsste ich ja px nehmen und das sollte ich ganz schnell vergessen :D

:D ich weiß, dass dir das gesagt wurde, ich weiß aber nicht ganz genau warum. Zumindest ist das nicht in meinem Standard-Ratschlag-Repertoire. Für Schriftarten benutze ich übrigens gerne die Einheit, die man aus Office und Co. kennt: pt (point)

Alternativen zu pt und px findest du im Wiki.

Grüße,

RIDER

[Camping_RIDER]

Aloha ;)

:D ich weiß, dass dir das gesagt wurde, ich weiß aber nicht ganz genau warum.

Okay, das wurde in den anderen Beiträgen deutlich. Memo @ me: zuerst lesen, dann schreiben.

Grüße,

RIDER

[Der Martin]

Hi,

Für Schriftarten benutze ich übrigens gerne die Einheit, die man aus Office und Co. kennt: pt (point)

die ist allerdings nur für Print-Stylesheets wirklich sinnvoll, weil sie bei der Bildschirmdarstellung auf beliebige Phantasie-Skalierungen abgebildet werden kann.

Ciao,
 Martin

[Camping_RIDER]

Aloha ;)

Für Schriftarten benutze ich übrigens gerne die Einheit, die man aus Office und Co. kennt: pt (point)

die ist allerdings nur für Print-Stylesheets wirklich sinnvoll, weil sie bei der Bildschirmdarstellung auf beliebige Phantasie-Skalierungen abgebildet werden kann.

Gebe ich zu, ja. Also dann doch wenn-dann Pixel? Oder lieber ganz antiquarisch mit Zollstock? ;)

Meiner Erfahrung entspricht allerdings, dass pt ordentlich dargestellt wird.

Grüße,

RIDER

[Der Martin]

Moin,

Für Schriftarten benutze ich übrigens gerne die Einheit, die man aus Office und Co. kennt: pt (point)
die ist allerdings nur für Print-Stylesheets wirklich sinnvoll, weil sie bei der Bildschirmdarstellung auf beliebige Phantasie-Skalierungen abgebildet werden kann.
Gebe ich zu, ja. Also dann doch wenn-dann Pixel? Oder lieber ganz antiquarisch mit Zollstock? ;)

ich weiß nicht, wie inzwischen die "allgemeine" Empfehlung lautet. Ich setze für Schriftgrößen jedenfalls überwiegend Prozent oder em ein, weil die Schriften meistens zueinander eine bestimmte Größen-Abstufung haben (sollen), die sich dann über mehrere Stufen indirekt auf die Basisschriftgröße des Browsers bezieht, die sich der Nutzer passend einstellen kann. Oder er lässt es, wenn er um die Möglichkeit nicht weiß, denn die Basisschriftgröße ist ja meist einigermaßen sinnvoll voreingestellt.

Nur da, wo die Schriftgröße mit einem Element korrelieren soll, dessen Größe auf px beruht (typischerweise eine Grafik), gebe ich gelegentlich auch mal px an.

Meiner Erfahrung entspricht allerdings, dass pt ordentlich dargestellt wird.

Das schon. Aber man darf dann eben nicht dem Irrglauben erliegen, 12pt wären auf jedem Bildschirm 12pt, also 1/6". Die tatsächliche Größe wird variieren. Kein Wunder, wenn man bedenkt, dass wir allein im Desktop-Bereich Full-HD-Displays (1920x1080) von 20" bis weit jenseits der 30" haben. Und die werden alle mit demselben Skalierungsfaktor bedient.

So long,
 Martin

[Camping_RIDER]

Aloha ;)

...und...

<header class="logo">
<h1>Logo</h1>
        <a <?php if($_SERVER['PHP_SELF'] != '/index.php') echo 'href="index"' ?>><img src="img/logo.png" alt="Logo"></a>
   <div class="slogen">Wir helfen mit Sicherheit!</div>
</header>

  
...<div> ist kein angemessenes Element für Text. Genauso darf (afaik) <a> nicht einfach so in der Gegend stehen (wie's in <header> mit a aussieht weiß ich nicht ganz genau, müsste man [nachlesen](http://www.w3.org/TR/html5)). Ich empfehle ein <p> (o.ä.) um <a> und den Slogan, der dann mit <span> statt <div> auszuzeichnen ist.  
  
Grüße,  
  
RIDER  
  

-- 
Camping\_RIDER a.k.a. Riders Flame a.k.a. Janosch Zoller  
  
ch:? rl:| br:> n4:? ie:% mo:| va:) js:) de:> zu:) fl:( ss:| ls:[  

[Melina]

Hallo,

...<div> ist kein angemessenes Element für Text. Genauso darf (afaik) <a> nicht einfach so in der Gegend stehen (wie's in <header> mit a aussieht weiß ich nicht ganz genau, müsste man nachlesen). Ich empfehle ein <p> (o.ä.) um <a> und den Slogan, der dann mit <span> statt <div> auszuzeichnen ist.

ok, ich kann mein <div> gerne in ein <span> ändern oder in ein <p> ich sehe da zwar kein Sinn aber ok :) Laut http://validator.w3.org/ hat meine Seite keine Fehler, also ist es wohl erlaubt, das <a> einfach so stehen zu lassen. Außerdem ist das <a> ja um ein Bild, steht also nicht allein da.

[MrMurphy]

Hallo

ich sehe da zwar kein Sinn

Es gibt geschriebene Regeln, an die man sich halten muss, um Fehler zu vermeiden. Und es gibt Vorgehensweisen, die sich zusätzlich bewährt haben, um ein optimales Ergebnis zu erreichen und Unterschiede auszugleichen. Die werden auch "Best Practices" genannt.

Dazu gehört, Text nur in bestimmte Elementen einzubinden, wie p, h1 bis h6, li u.s.w.

Eher ungeeignet sind Container wie div, header, main, footer u.s.w.

Das span-Element und das a-Element sollten wiederum nur innerhalb der geeigneten Elemente genutzt werden und nicht direkt innerhalb der ungeeigneten Elemente.

Ähnliches gilt für Einheiten.

Zudem sollte man bestimmte Anpassungen vornehmen, um die unterschiedlichen Vorgaben der Browser zu überschreiben.

Gruss

MrMurphy

[Melina]

Hallo,

Es gibt geschriebene Regeln, an die man sich halten muss, um Fehler zu vermeiden. Und es gibt Vorgehensweisen, die sich zusätzlich bewährt haben, um ein optimales Ergebnis zu erreichen und Unterschiede auszugleichen. Die werden auch "Best Practices" genannt.

Dazu gehört, Text nur in bestimmte Elementen einzubinden, wie p, h1 bis h6, li u.s.w.

Eher ungeeignet sind Container wie div, header, main, footer u.s.w.

Das span-Element und das a-Element sollten wiederum nur innerhalb der geeigneten Elemente genutzt werden und nicht direkt innerhalb der ungeeigneten Elemente.

Ähnliches gilt für Einheiten.

Hallo, aber jetzt mal ganz ehrlich man muss doch nicht alles schlecht reden oder? Klar gibt es vorgaben wie man es machen _könnte_ es steht aber nirgends geschrieben dass z.B. ein Text _nicht_ in ein <div> gepackt werden darf. Ich denke hier hat jeder seine eigene Vorgehensweise, wie er etwas umsetzt. Ihr mögt in vielen Sachen recht haben, aber man muss es auch nicht enge sehen als es nötig ist.

Aber  ich muss sagen auch wenn ich den Slogan in ein <span> packe ist mein Problem nicht gelöst und es wird weiterhin eine Unterschiedliche Größe ausgegeben.

Zudem sollte man bestimmte Anpassungen vornehmen, um die unterschiedlichen Vorgaben der Browser zu überschreiben.

Ich dachte eigentlich dass durch die normalize.css Datei dieses bereits umgesetzt wurde. Früher hat man ja alles auf 0 gesetzt mit der normalize.css wird alles etwas angeglichen. Außerdem habe ich im html folgende Angaben gesetzt:

  
html {  
	font-family:Tahoma, Geneva, sans-serif;  
	font-size:0.9em;  
}  

Aber ich bin ganz ehrlich ich habe die Schnauze gestrichen voll, ich werde wohl wieder auf px umsteigen, dann habe ich solche Problem nicht.

[MrMurphy]

Hallo

ich werde wohl wieder auf px umsteigen, dann habe ich solche Problem nicht.

Glaubst du das wirklich? Erst probieren - dann Behauptungen aufstellen.

Gruss

MrMurphy

[Mattes]

html {
font-size:0.9em;

Aber ich bin ganz ehrlich ich habe die Schnauze gestrichen voll, ich werde wohl wieder auf px umsteigen, dann habe ich solche Problem nicht.

Es ist natürlich eine Möglichkeit, dass Problem, das du vermeintlich hast, einfach auf die Besucher der Seite abzuwälzen.

Irgendwo scheint mir aber, dass du den Sinn der relativen Maße nicht begriffen hast. Es ist eigentlich so gedacht, dass jeder Benutzer die Schriftgrößen so einstellt, wie _er selbst_ es am Besten lesen kann. Auf dieser Grundgröße basierend werden mit em & Co. die Größen aller anderen Schriften festgelegt.

Versuchst du, die Schriftgrößen mit px festzunageln, zwingst du den Besuchern deine Sehschärfe auf deinem Monitor auf. Das Gleiche passiert letztlich, wenn du, wie oben zu sehen, die Standardgröße mal eben um 10% verkleinerst.
Es hat nicht jeder deine Augen und deinen Monitor. Hältst du dieses Vorgehen also für besucherfreundlich? Für wen baust du die Seiten, für dich oder nicht doch eher für die Leute, die die Seiten später durchlesen sollen?

In deinem speziellen Fall muss ich darüber hinaus noch sagen, dass ich dein vorgebrachtes Problem nicht wirklich nachvollziehen kann. Man muss schon zweimal hingucken, um die unterschiedliche Laufweite zu erkennen – und wegen dieses Kleckerkrams willst du eine echte Komfortfunktion blockieren?

Mein Rat: Etwas lockerer werden. Gute und auch schöne Gestaltung hängt nicht von absolut gemessenen fünf Millimetern ab, sondern von der Balance zwischen allen Elementen.

[Camping_RIDER]

Aloha ;)

Ich dachte eigentlich dass durch die normalize.css Datei dieses bereits umgesetzt wurde. Früher hat man ja alles auf 0 gesetzt mit der normalize.css wird alles etwas angeglichen. Außerdem habe ich im html folgende Angaben gesetzt:

html {
font-family:Tahoma, Geneva, sans-serif;
font-size:0.9em;
}

  
Und auch hier: eine relative Angabe. Die bringt dir nichts, um was zu zementieren... Du bist also auch was das angeht, noch von der Standardeinstellung des Browsers abhängig. Wenn nomrmalize.css die Schriftgröße nicht absolut zementiert (keine Ahnung), das tut es jedenfalls auch nicht.  
  
Grüße,  
  
RIDER  
  

-- 
Camping\_RIDER a.k.a. Riders Flame a.k.a. Janosch Zoller  
  
ch:? rl:| br:> n4:? ie:% mo:| va:) js:) de:> zu:) fl:( ss:| ls:[  

[Der Martin]

Hallo,

ich bin etwas am verzweifeln, wie kann es sein, dass der Firefox und Google Chrome eine Schrift unterschiedlich groß darstellt?

ich vermute mal, es liegt an unterschiedlichen Algorithmen zur Kantenglättung (Anti-Aliasing), die die Laufweite des Textes beeinflussen. Dagegen kannst du allerdings nichts tun. Wenn du um jeden Preis erzwingen willst, dass die Maßhaltigkeit in jedem Fall gewährleistet ist, musst du den Text als Grafik übermitteln. Ich würde das aber nicht tun wollen.

Ciao,
 Martin

[Camping_RIDER]

Aloha ;)

Mir kam grad noch was...

Hier ein Bild vom Google Chrome

Hier ein Bild vom Firefox in der aktuellsten Version

Sicher, dass der Slogan nicht passt? Für mich sieht der beides Mal ziemlich gleich aus.

Viel eher ist es die Navigation, die in beiden Fällen eine unterschiedliche Gesamtbreite annimmt.

Grüße,

RIDER

[MudGuard]

Hi,

Hier ein Bild vom Google Chrome

Hier ein Bild vom Firefox in der aktuellsten Version

Sicher, dass der Slogan nicht passt? Für mich sieht der beides Mal ziemlich gleich aus.

W und i-Punkt sind im zweiten Bild verschmolzen.
Evtl. wird Kerning unterschiedlich interpretiert.

Viel eher ist es die Navigation, die in beiden Fällen eine unterschiedliche Gesamtbreite annimmt.

ja, aber das zur Navigations-Schrift passende CSS fehlt leider ...

cu,
Andreas

[Melina]

Hallo,

Viel eher ist es die Navigation, die in beiden Fällen eine unterschiedliche Gesamtbreite annimmt.

ja, aber das zur Navigations-Schrift passende CSS fehlt leider ...

die CSS für die Navigation sieht so aus

  
.nav {  
	display:inline-block;  
	width:58%;  
	text-align:right  
}  
  
.nav ul {  
	list-style:none;  
}  
  
.nav ul li {  
	display:inline-block;  
}  
  
.nav ul li a:first-child {  
	padding: 10px 20px 20px 0px;  
}  
  
.nav ul li a:last-child {  
	padding: 0;  
	margin: 10px 0px 20px 15px;  
}  
  
.nav ul li a {  
	font-size:0.9em;  
	color:#625c58;  
	padding: 10px 20px 20px 15px;  
	text-decoration:none;  
	text-transform:uppercase;  
	font-weight:bold;  
}  
  
.nav ul li a:hover {  
	text-decoration:none;  
	border-bottom: 1px solid #333;  
	padding-bottom: 3px;  
}  
  
.nav ul li a:not([href])  {  
	text-decoration:none;  
	border-bottom: 1px solid #333;  
	padding-bottom: 3px;  
	cursor:pointer;  
}  

[Camping_RIDER]

Aloha ;)

Hm, ich sags nur ungern, aber mein Kopfeigener CSS-Interpreter ist leider ein wenig langsam. Ich plädiere in diesem Sinne für ein Live-Beispiel, wenn ich helfen soll. Dann würde ich sogar meinen Desktop-PC für dich anwerfen und die Entwicklertools von Firefox und Chrome dazu befragen ;)

CSS-Debugging anhand von Quellcode ist in meinen Augen maximal ineffizient. Mach ich bei meinen Projekten schon nicht und noch ungerner an Projekten anderer ;) Ich benutze dazu seit Jahren nur noch die Entwicklertools - und es funktioniert prächtig.

Und bevor du fragst: Offensichtliche Fehler bzw. Ursachen hab ich jetzt keine gefunden.

Grüße,

RIDER

[Melina]

Hallöchen :)

Hm, ich sags nur ungern, aber mein Kopfeigener CSS-Interpreter ist leider ein wenig langsam. Ich plädiere in diesem Sinne für ein Live-Beispiel, wenn ich helfen soll. Dann würde ich sogar meinen Desktop-PC für dich anwerfen und die Entwicklertools von Firefox und Chrome dazu befragen ;)

Ich habe es mal in meine Demo Seite eingebaut und extra für dich hochgeladen :) Vielleicht kommen wir der Sachen so auf den Grund! Schau es dir mal bitte im Firefox und Chrome an, solltest du beide auf dem Rechner haben

http://melina.bplaced.net/

[Camping_RIDER]

Aloha ;)

Ich habe es mal in meine Demo Seite eingebaut und extra für dich hochgeladen :) Vielleicht kommen wir der Sachen so auf den Grund! Schau es dir mal bitte im Firefox und Chrome an, solltest du beide auf dem Rechner haben

http://melina.bplaced.net/

Okay - mal eine erste Analyse, vielleicht morgen noch mehr wenn ich mehr Zeit habe. Aber vorerst mal:

1.: Breite des Slogan

Im Firefox: 391.25px
Im Chrome: 395.1875px

Also tatsächlich ein Unterschied, wenn er auch bloß 4px beträgt.

Interessant wirds, wenn man sich die Höhe der Box noch dazu anschaut...

Im Firefox: 54px
Im Chrome: 52px

Also eigentlich entgegen meiner Intuition. An der zugrunde liegenden Basisschriftgröße wirds also wohl nicht liegen (denn wenn das der Fall wäre, müsste die breitere Schrift auch höher sein - ist aber nicht der Fall). Deshalb habe ich mal frei aus dem Bauch heraus getestet, was die Größe der Box tut, wenn die Schriftgröße absolut fixiert wird. Das Ergebnis (bei font-size:45px)

FF: 407x55
Ch: 411,75x55

Davon ausgehend steht also für mich fest, dass der sichtbare Unterschied tatsächlich durch unterschiedliches Rendern der Schriftart entsteht. Mit dieser Sache wirst du dich wohl oder übel arrangieren müssen...

2.: Die Navigation

I) Abmessungen der li im FF
II) Abmessungen der li im Ch

I)  | 90x18 |  88x18 | 90x18  | 72x18 |
---------------------------------------
II) | 95x17 | 100x17 | 101x17 | 78x17 |

Hier sind die Unterschiede meiner Meinung nach deutlich eklatanter. Das entsprach ja auch schon meiner Anschauung.

Nimmt man die Anweisung font-weight:bold heraus, geht der Unterschied deutlich zurück (ist aber immer noch merklich - pro li zwischen 1 und 3 px statt - wie jetzt - zwischen 5 und 12 px.

Ich habe einfach mal testweise die Schriftart Tahoma - wie von dir verwendet - mit der Schritfart Niconne aus der Überschrift getauscht. Und siehe da - auch wenn die Navigationslinks in Niconne vollkommen unleserlich waren, die Differenzen waren deutlich geringer (0-1px). Die geringen Unterschiede blieben dann auch gering, egal ob fetter Text oder nicht.

Mir scheint also, dass die Unterschiede in der Darstellung bei der Verwendung eingebauter Systemschriftarten noch größer ist als bei einer extern eingebundenen Schriftart. Vielleicht kannst du also ja damit experimentieren, eine Schriftart für die Navigation auch per Google Fonts einzubauen. Bin mal gespannt, ob das das Problem (größstenteils) behebt.

Fände ich interessant. Interessant ist eigentlich die ganze Geschichte. Ich hätte nie gedacht, dass Browser alleine durch das Rendern von Schrift um eine deutlich merkliche Anzahl Pixel verschiebt - und das unabhängig von absoluter oder relativer Angabe. Das ist definitiv Neuland für mich... Habe ich auch davor noch nie wat von gehört...

Grüße,

RIDER

[Mitleser]

http://melina.bplaced.net/

Du landest im Subpixel-Rendering, ein lustiges Lotteriespiel, garantiert inkonsistent. FF macht (bei mir) aus den EMs für die Schriftgröße der Navigation: 12.9667px. Chrome behauptet: 13px. Sobald man in beiden Browsern auf 150% zoomt, nivelliert sich der Effekt. Ebenso, sobald man feste PX-Werte setzt und damit dem Browser die Raterei abnimmt.

Meine Meinung: verwende PX, wenn Du dir solchen Kummer ersparen willst. Leichte Abweichungen wirst Du auch dann hinnehmen müssen, evtl. noch mit +-1px nachjustieren, damit bin ich bislang stets in akzeptablen Bereichen geblieben.

An die Beschützer des heiligen Grals: http://forum.de.selfhtml.org/archiv/2014/11/t218875/#m1508942

Los. jetzt haut drauf :-)

[Melina]

Hallo,

Meine Meinung: verwende PX, wenn Du dir solchen Kummer ersparen willst. Leichte Abweichungen wirst Du auch dann hinnehmen müssen, evtl. noch mit +-1px nachjustieren, damit bin ich bislang stets in akzeptablen Bereichen geblieben.

habe ich vor zwei Tagen auch schon geschrieben. Wenn es so weiter geht schmeiße ich alle EM Angaben wieder raus und nutze px, damit hatte ich noch nie Probleme. Auch wenn hier jetzt die Aussage "vergiss dass es px gibt und du damit leben musst, dass die Seite in verschiedenen Browsern unterschiedlich dargestellt wird" kann ich dieses nicht hinnehmen.

Meiner Meinung nach muss eine Seite in _allen_ Browsern gleich aussehen.

[Gunnar Bittersmann]

@@Melina:

nuqneH

Meiner Meinung nach muss eine Seite in _allen_ Browsern gleich aussehen.

Deine Meinung ist falsch. Ohne [tm].

Do websites need to look the same in every browser?

Eine Seite DARF GAR NICHT in allen Browsern gleich aussehen. Wie soll eine Seite auf einem Smartphone auch genauso aussehen wie auf einem Desktop?

Qapla'

[Melina]

Hallo,

Eine Seite DARF GAR NICHT in allen Browsern gleich aussehen. Wie soll eine Seite auf einem Smartphone auch genauso aussehen wie auf einem Desktop?

auf einem Smartphone würde ich die Schriftart in diesem Beispiel eh änder. Aber ich kann doch wohl in der heutigen Zeit verlangen wenn ich eine Schrift wähle, dass die in allen Browsern zumindest auf dem Desktop gleich aussieht? Oder kannst du mir auf Anhieb 1-2 Seiten zeigen wo selbst auf dem Desktop sich die Schriften zu stark wie bei mir ändern?

Ich habe gerade mal den IE aufgemacht, selbst dieser zeig es "richtig" an!

[Camping_RIDER]

Aloha ;)

auf einem Smartphone würde ich die Schriftart in diesem Beispiel eh änder. Aber ich kann doch wohl in der heutigen Zeit verlangen wenn ich eine Schrift wähle, dass die in allen Browsern zumindest auf dem Desktop gleich aussieht? Oder kannst du mir auf Anhieb 1-2 Seiten zeigen wo selbst auf dem Desktop sich die Schriften zu stark wie bei mir ändern?

Ich vermute mal: nicht nur 1-2 Seiten, sondern ALLE. Mit dem einzigen Unterschied, dass man a) beliebige Seiten nicht gleichzeitig in unterschiedlichen Browsern geöffnet hat und b) auf nicht-eigenen Seiten auch nicht bis auf ein/zwei Pixel genau nachmisst.

Was verrät uns das aber auch? Es ist schlichtweg schnurz. Natürlich nicht, wenn es bei einzelnen Wörtern bis auf 12px Unterschied auswuchert wie bei Tahoma. Die Lösungsstrategie liegt darin, die Schriftart zu wechseln - auf eine zentral eingebundene Alternative - denn der Unterschied kann gut daher kommen, dass die Browser alle ihre eigene Interpretation von Systemschriften mitbringen. Das Problem fällt bei eingebundenen Schriftarten raus. Dann hast su nur noch die Renderunterschiede - bei einzelnen Wörtern 0-1px, bei deinem Slogan bis zu 4px. Wenn du das immer noch für nicht-akzeptabel hältst, dann rate ich dir, in Zukunft die Finger vom Webdesign zu lassen und auf Printmedien umzusteigen. Denn dann verschwendest du definitiv deine Lebenszeit auf die Verwirklichung von vollkommen unwichtigen und unerfüllbaren Zielen. (Und ja, vielleicht machen die Browserhersteller das irgendwann einheitlicher... das kannst du aber in keiner Weise beeinflussen und schon gar nicht irgendwie in Eigenbau ersetzen...)

Bei dieser Diskussion kommt mir unweigerlich und drängelnd die Darstellung des IE6 von Acid 2 in den Sinn. Hach, das waren noch Zeiten... da war man froh, wenn etwas wenigstens im Entfernten in allen Browsern (oder wenigstens in aufeinander folgenden Versionen desselben Browsers) gleich aussah...

Oh brave new world that has such people in it!

Grüße,

RIDER

[Gunnar Bittersmann]

@@Melina:

nuqneH

http://melina.bplaced.net/

Bevor du dir Gedanken machst, dass die Schrift in verschiedenen Browsern leicht unterschiedlich gerendert wird (was zum Grundverständnis eines Webdesigners gehört), solltest du dir Gedanken darüber machen, dass gar kein Menü zu sehen ist:

Qapla'

[Melina]

Hallo,

Bevor du dir Gedanken machst, dass die Schrift in verschiedenen Browsern leicht unterschiedlich gerendert wird (was zum Grundverständnis eines Webdesigners gehört),

Also von "leicht" wurde ich hier nicht mehr reden :/

solltest du dir Gedanken darüber machen, dass gar kein Menü zu sehen ist:

ich bin gerade etwas geschockt.

A) Warum ist die Schrift bei dir so groß
B) Wo ist die Navigation hin?

Mit was für einem Browser schaust du dir die Seite an?

[Auge]

Hallo

Ich habe es mal in meine Demo Seite eingebaut und extra für dich hochgeladen :)

http://melina.bplaced.net/

Ich habe im Gegensatz zu meinen zwei Vorpostern keine Messungen vorgenommen. ich möchte nur ein paar allgemeine Anmerkungen machen.

Dass das Rendering der Schriften je nach Browser unterschiedlich ist, steht ja nun auch für uns nachgewiesen messtechnisch fest. Ich vermute, dass es dieses Phänomen auch auf die Betriebssysteme bezogen gibt. Grundsätzlich wirst du damit leben müssen, dass eine Seite in unterschiedlichen Umgebungen unterschiedlich dargestellt wird. Das ist eine der grundlegenden Eigenschaften von HTML(-Anzeigeprogrammen). Es sollte aber kein Problem sein, diese Unterschiede durch Einstellungen und – speziell hier –, wie von Camping Rider empfohlen, die Wahl der Schriftart zu minimieren.

Bei der Navigation der Beispielseite fiel mir auf, dass beim Hovern mit der Maus zwar der ganze Listenpunkt farblich hinterlegt wird, aber der Link nur in der Höhe der Schrift, wen auch in der gesamten Breite des Menüpunkts, anklickbar ist. Ich würde als Benutzer erwarten, die gesamte Fläche des Menüpunkts nutzen zu können.

Tschö, Auge

[Melina]

Hallo Auge,

Bei der Navigation der Beispielseite fiel mir auf, dass beim Hovern mit der Maus zwar der ganze Listenpunkt farblich hinterlegt wird, aber der Link nur in der Höhe der Schrift, wen auch in der gesamten Breite des Menüpunkts, anklickbar ist. Ich würde als Benutzer erwarten, die gesamte Fläche des Menüpunkts nutzen zu können.

was meinst du damit? Wenn ich auf die Beispielseite gehe, dann den Punkt Leistung 2 wähle, kann ich entweder auf die Schrift klicken oder hinten in den grauen Bereich. Oder meinst du etwas ganz anderes?

[Auge]

Hallo

Bei der Navigation der Beispielseite fiel mir auf, dass beim Hovern mit der Maus zwar der ganze Listenpunkt farblich hinterlegt wird, aber der Link nur in der Höhe der Schrift, wen auch in der gesamten Breite des Menüpunkts, anklickbar ist. Ich würde als Benutzer erwarten, die gesamte Fläche des Menüpunkts nutzen zu können.

was meinst du damit? Wenn ich auf die Beispielseite gehe, dann den Punkt Leistung 2 wähle, kann ich entweder auf die Schrift klicken oder hinten in den grauen Bereich.

Korrekt mit „Aber“. Vorausgeschickt sei, dass ich das mit dem FF34.0.5 und im Chromium38 gesehen habe. Ich kann, wie du es selbst beschreibst, die Links zwar über die ganze Breite aber nicht über die ganze optische Höhe des Menüpunkts nutzen. Ober- und unterhalb der line-height wird der Menüpunkt zwar grau hinterlegt – weshalb ich annehmen würde, dass ich dort auch den Link klicken kann – der Link ist in diesem Bereich aber nicht da, also nicht klickbar.

Das liegt am padding, das du den Listenelementen mitgibst. Nimmst du diese Angaben dort weg (padding: 0;) und fügst sie stattdessen den Links hinzu, ist die gesamte Fläche der Links anklickbar.

Tschö, Auge

[Melina]

Hallo,

Korrekt mit „Aber“. Vorausgeschickt sei, dass ich das mit dem FF34.0.5 und im Chromium38 gesehen habe. Ich kann, wie du es selbst beschreibst, die Links zwar über die ganze Breite aber nicht über die ganze optische Höhe des Menüpunkts nutzen. Ober- und unterhalb der line-height wird der Menüpunkt zwar grau hinterlegt – weshalb ich annehmen würde, dass ich dort auch den Link klicken kann – der Link ist in diesem Bereich aber nicht da, also nicht klickbar.

Das liegt am padding, das du den Listenelementen mitgibst. Nimmst du diese Angaben dort weg (padding: 0;) und fügst sie stattdessen den Links hinzu, ist die gesamte Fläche der Links anklickbar.

danke für den Hinweis, habe ich nun geändert http://melina.bplaced.net/ man kann nun die ganze Fläche anklicken.

[Auge]

Hallo

Das liegt am padding, das du den Listenelementen mitgibst. Nimmst du diese Angaben dort weg (padding: 0;) und fügst sie stattdessen den Links hinzu, ist die gesamte Fläche der Links anklickbar.

danke für den Hinweis, habe ich nun geändert http://melina.bplaced.net/ man kann nun die ganze Fläche anklicken.

Nach [STRG]+[F5] kann ich das auch. :-)

Tschö, Auge

[Mattes]

http://melina.bplaced.net/

Anstatt dich über 0,4 Pixel aufzuregen, solltest du dich lieber mal um grundsätzliche Stabilität kümmern:

Ab vom Offensichtlichen sind die vier Menüpunkte sind zudem nur benutzbar, befindet sich die Maus im Bereich von drei, vier Pixeln um den Unterstrich.

(Aber irgendwie wundert mich das alles, auch Gunnars Problem, bei Pixelzementieren nicht – das ist im Gegenteil eher das Übliche.)

[Melina]

Hallo,

Anstatt dich über 0,4 Pixel aufzuregen, solltest du dich lieber mal um grundsätzliche Stabilität kümmern:

wie auch hier gefragt, welches Betriebsystem bzw. Browser nutzt du? Denn auf Windows kann ich dieses Fehlverhalten nicht nachvollziehen.

Ab vom Offensichtlichen sind die vier Menüpunkte sind zudem nur benutzbar, befindet sich die Maus im Bereich von drei, vier Pixeln um den Unterstrich.

Auch dieses Problem kann ich unter Windows mit den Browsern Firefox, Chrome und IE nicht nachvollziehen. Ich kann über das komplett Wort z.B. Startseite fahren und auch anklicken.

[Gunnar Bittersmann]

@@Melina:

nuqneH

Denn auf Windows kann ich dieses Fehlverhalten nicht nachvollziehen.

Da liegt kein Fehlverhalten vor. Das ist das normale Verhalten.

Das Fehlverhalten liegt auf seiten des „Web“designers, der meint, Webseiten systemübergreifend pixelgenau gestalten zu müssen.

“The phrase ‘pixel-perfect’ means nothing to me as neither ‘pixels’ nor ‘perfect’ are in my vocabulary anymore.” —Brad Frost

Qapla'

[Melina]

Das Fehlverhalten liegt auf seiten des „Web“designers, der meint, Webseiten systemübergreifend pixelgenau gestalten zu müssen.

Dann sag mir mal bitte, wo ich hier px eingesetzt habe? In meiner CSS Datei steht dieses:

  
position: absolute;  
font-family: 'Niconne', cursive;  
font-size: 3em;  
text-align: right;  
margin-left: 13em;  
margin-top: -2.5em;  
font-style: italic;  
color: #999;  

Die Schriftgröße ist 48px wenn man von 1em = 16px ausgeht.

Daher nochmals die Frage, mit was für einem Browser seid ihr auf meiner Seite?

[Gunnar Bittersmann]

@@Melina:

nuqneH

Das Fehlverhalten liegt auf seiten des „Web“designers, der meint, Webseiten systemübergreifend pixelgenau gestalten zu müssen.

Dann sag mir mal bitte, wo ich hier px eingesetzt habe?

Du _erwartest_, dass das Layout auf allen Systemen pixelgenau umgesetzt wird. Das ist dein Fehler. Ob du deinen Fehler mit em oder mit px begehst, ist dabei zweitrangig.

Daher nochmals die Frage, mit was für einem Browser seid ihr auf meiner Seite?

Gerade mit Firefox und Chrome (Windows). Das Fehlverhalten tritt auf beiden auf.

Qapla'

[Auge]

Hallo

Das Fehlverhalten liegt auf seiten des „Web“designers, der meint, Webseiten systemübergreifend pixelgenau gestalten zu müssen.

Dann sag mir mal bitte, wo ich hier px eingesetzt habe?

Du _erwartest_, dass das Layout auf allen Systemen pixelgenau umgesetzt wird. Das ist dein Fehler. Ob du deinen Fehler mit em oder mit px begehst, ist dabei zweitrangig.

Daher nochmals die Frage, mit was für einem Browser seid ihr auf meiner Seite?

Gerade mit Firefox und Chrome (Windows). Das Fehlverhalten tritt auf beiden auf.

Dieses Verhalten tritt mit den genannten Browsern unter dem genannten Betriebssystem offensichtlich bei niemand anderem als bei dir auf. Wie wäre es denn mal damit, von deinem hohen Ross herabzusteigen statt selbstreferenziell auf dem Fehler herumzureiten und das Offensichtliche zu tun, nämlich weitere Umstände preiszugeben, die dein Setup von dem aller anderen hier unterscheidet.

Tschö, Auge

[Gunnar Bittersmann]

@@Auge:

nuqneH

Gerade mit Firefox und Chrome (Windows). Das Fehlverhalten tritt auf beiden auf.

Dieses Verhalten tritt mit den genannten Browsern unter dem genannten Betriebssystem offensichtlich bei niemand anderem als bei dir auf. Wie wäre es denn mal damit, von deinem hohen Ross herabzusteigen […]

Um das Fehlverhalten zu reproduzieren, muss man auf kein Ross steigen, sondern einfach mal das Browserfenster nicht über die ganze Bildschirmbreite gehen lassen. Was auch der Fall ist, wenn man das Developer-Tool seitlich öffnet.

[…] statt selbstreferenziell auf dem Fehler herumzureiten und das Offensichtliche zu tun, nämlich weitere Umstände preiszugeben, die dein Setup von dem aller anderen hier unterscheidet.

Dass Browserfenster bei verschiedenen Nutzern verschieden groß sind, sollte im Webdesign offensichtlich sein.

Qapla'

[Melina]

Hallo,

Um das Fehlverhalten zu reproduzieren, muss man auf kein Ross steigen, sondern einfach mal das Browserfenster nicht über die ganze Bildschirmbreite gehen lassen. Was auch der Fall ist, wenn man das Developer-Tool seitlich öffnet.

Du hättest mir aber gleich zu Beginn sagen können, dass du das Fenster nicht ganz offen hast, dann hätte ich mir das Suchen sparen können.

Dass Browserfenster bei verschiedenen Nutzern verschieden groß sind, sollte im Webdesign offensichtlich sein.

Mag ja sein, aber ich gehe jetzt erstmal nur von einer bestimmten Größe aus. Mit den Mediaqueries habe ich ja schon einmal begonnen, aber dann doch wieder bleiben lassen, da ich hier nicht wirklich weiter kommen und anhand meiner Google Analytics Auswertung sehe, welche Größen die User auf meiner Seite nutzten.

[Gunnar Bittersmann]

@@Melina:

nuqneH

Du hättest mir aber gleich zu Beginn sagen können, dass du das Fenster nicht ganz offen hast, dann hätte ich mir das Suchen sparen können.

Du hättest mir aber gleich zu Beginn sagen können, dass du nicht weißt, dass nicht alle Nutzer das Fenster nicht ganz offen haben.

Only half-joking. Natürlich kannst du nichts sagen, was du nicht weißt. (*)

Mag ja sein, aber ich gehe jetzt erstmal nur von einer bestimmten Größe aus. […] anhand meiner Google Analytics Auswertung sehe, welche Größen die User auf meiner Seite nutzten.

Dass du keine Nutzer mit schmaleren Browserfenstern als 800 Pixel in deiner Statistik siehst, könnte ja auch daran liegen, dass deine Seite mit schmalen Browserfenstern gar nicht benutzbar ist.

Was also sagt deine Statistik aus? Selbes Problem wie oben. (*)

Qapla'

[Melina]

Hallo,

Dass du keine Nutzer mit schmaleren Browserfenstern als 800 Pixel in deiner Statistik siehst, könnte ja auch daran liegen, dass deine Seite mit schmalen Browserfenstern gar nicht benutzbar ist.

doch kann ich, da auf meiner jetzigen Seite die derzeit noch online ist solche Fehler nicht passieren, die Seite muss gescrollt werden. Wenn auch nicht schön aber besser als so. Aber darum geht es mir auch nicht.

Mein Problem war und ist, warum im Firefox die ganze Sache anderes dargestellt wird. Ich werde nun für den Firefox eine andere CSS Datei einbinden, dann sollte das Problem auch gelöst sein.

[Matthias Apsel]

Om nah hoo pez nyeetz, Melina!

Ich werde nun für den Firefox eine andere CSS Datei einbinden, dann sollte das Problem auch gelöst sein.

Nei-en!

Außerdem: Wie willst du das anstellen?

Matthias

[Camping_RIDER]

Aloha ;)

Ich werde nun für den Firefox eine andere CSS Datei einbinden, dann sollte das Problem auch gelöst sein.

Nei-en!

Außerdem: Wie willst du das anstellen?

Na, mit JavaScript... Wie denn sonst -.-

Grüße,

RIDER

[Gunnar Bittersmann]

@@Matthias Apsel:

nuqneH

Ich werde nun für den Firefox eine andere CSS Datei einbinden
Wie willst du das anstellen?

UA sniffing, „das weiß man doch“. <duckundweg/>

Qapla'

[Camping_RIDER]

Aloha ;)

Mein Problem war und ist, warum im Firefox die ganze Sache anderes dargestellt wird. Ich werde nun für den Firefox eine andere CSS Datei einbinden, dann sollte das Problem auch gelöst sein.

Solange, bis Firefox sein Renderverhalten - von dir dann unbemerkt - wieder umstellt. Wie gesagt: dein Part ist getan, lass die Browserhersteller ihren erledigen. Alles andere ist verschwendete Liebesmüh und ausgesprochen kurzsichtig. Überdenke deine Prioritäten. Mit Extra-Behandlungen, die nicht nötig sind und in kommenden Versionen entweder obsolet oder sogar gefährlich werden, löst du keine Probleme - du schaffst damit nur neue.

Du kannst aber auch weiter versuchen mit dem Kopf durch die Wand zu gehen. Ich erinnere dich dann in einem Jahr, wenn du wieder hierstehst, an diese Entscheidung.

Grüße,

RIDER

Zum Wiederfinden:
#MemoAnMelina

[Melina]

Hallo,

Solange, bis Firefox sein Renderverhalten - von dir dann unbemerkt - wieder umstellt. Wie gesagt: dein Part ist getan, lass die Browserhersteller ihren erledigen. Alles andere ist verschwendete Liebesmüh und ausgesprochen kurzsichtig. Überdenke deine Prioritäten. Mit Extra-Behandlungen, die nicht nötig sind und in kommenden Versionen entweder obsolet oder sogar gefährlich werden, löst du keine Probleme - du schaffst damit nur neue.

das heißt also wenn das _deine_ Seite wäre, würdest du dieses Verhalten in Kauf nehmen dass es nicht "schön" in allen Browsern ausschaut und die User dadurch vielleicht nicht wieder kommen?

[Matthias Apsel]

Om nah hoo pez nyeetz, Melina!

das heißt also wenn das _deine_ Seite wäre, würdest du dieses Verhalten in Kauf nehmen dass es nicht "schön" in allen Browsern ausschaut und die User dadurch vielleicht nicht wieder kommen?

Ja. Wenn es tatsächlich nur um den Schriftzug geht. Beachte allerdings unbedingt: m1511880

Matthias

[Melina]

Hallo Matthias,

Ja. Wenn es tatsächlich nur um den Schriftzug geht. Beachte allerdings unbedingt: m1511880

dazu habe ich bereits etwas geschrieben dieses Verhalten, dass alles zusammen fallen soll, wenn die Schrift nicht geladen wird, kann ich nicht nachvollziehen. Weder im Firefox noch im Chrome. Selbst der IE stellt es dann so wie auf dem Bild dar.

[Camping_RIDER]

Aloha ;)

das heißt also wenn das _deine_ Seite wäre, würdest du dieses Verhalten in Kauf nehmen dass es nicht "schön" in allen Browsern ausschaut und die User dadurch vielleicht nicht wieder kommen?

Nur fürs Protokoll, damit ich's selber auch noch gesagt habe: Ja, würde ich. Übrigens: von 'dass es nicht "schön" in allen Browsern ausschaut' sind wir noch weit entfernt, über was reden wir denn hier? Ein bis vier Pixel, die dem Standarduser nicht auffallen, zumal der eh nur 'seinen' Browser benutzt und nicht mit der Lupe akribisch alle Browse. auf Unterschiede durchcheckt...

Was für ne - mit Verlaub - sinnlose / schlechte Seite (inhaltlich-funktional) programmierst du eigentlich, dass der User seine Wiederkehr von Pixelzählerei abhängig macht (oder, dass dir das zumindest plausibel erscheint)? Da hast du dir aber mächtig selbst ins Bein geschossen...

Grüße,

RIDER

[Auge]

Hallo

das heißt also wenn das _deine_ Seite wäre, würdest du dieses Verhalten in Kauf nehmen dass es nicht "schön" in allen Browsern ausschaut und die User dadurch vielleicht nicht wieder kommen?

Definiere schön! Und überhaupt, der typische User™ nutzt typischerweise einen Browser auf seinem Desktop-PC oder Laptop und einen auf einem Smartphone oder Tablet. Natürlich immer vorausgesetzt, er hat derlei Gerätschaften. Der typische User™ schaut sich die Seiten, die er besucht, typischerweise auf einem Gerät nicht mit verschiedenen Browsern an. Der typische User™ wird die Unterschiede demnach mit aller Wahrscheinlichkeit nicht bemerken.

Tschö, Auge

[Auge]

Hallo

Du hättest mir aber gleich zu Beginn sagen können, dass du das Fenster nicht ganz offen hast, dann hätte ich mir das Suchen sparen können.

Hätte er sagen sollen. Wobei, was ist „nicht ganz offen“?

Tschö, Auge

[Melina]

Hallo,

Hätte er sagen sollen. Wobei, was ist „nicht ganz offen“?

:) damit meine ich, dass das Fenster nicht über die ganze Breite geht, wie MAC User dieses z.B. sehr gerne machen. Bei Windows Usern habe ich dieses noch nicht so oft gesehen, die haben die Fenster meistens über den ganzen Bildschirm (was ich so beobachtet habe).

[Auge]

Hallo

Hätte er sagen sollen. Wobei, was ist „nicht ganz offen“?

:) damit meine ich, dass das Fenster nicht über die ganze Breite geht, wie MAC User dieses z.B. sehr gerne machen. Bei Windows Usern habe ich dieses noch nicht so oft gesehen, die haben die Fenster meistens über den ganzen Bildschirm (was ich so beobachtet habe).

Kenne ich und ich schüttele auch imemr wieder den Kopf, warum man sich den browser im Vollbildmodus antut.

iche: kein Vollbildmodus unter Windows und Linux.

Tschö, Auge

[Auge]

Hallo

Dass Browserfenster bei verschiedenen Nutzern verschieden groß sind, sollte im Webdesign offensichtlich sein.

Ja natürlich. Aber verdammte Axt, lass dir doch nicht alles einzeln aus der Nase ziehen sondern sag es bitte gleich dazu (wenn dies dann das).

Tschö, Auge

[Gunnar Bittersmann]

@@Auge:

nuqneH

Dass Browserfenster bei verschiedenen Nutzern verschieden groß sind, sollte im Webdesign offensichtlich sein.

Ja natürlich. Aber verdammte Axt, lass dir doch nicht alles einzeln aus der Nase ziehen sondern sag es bitte gleich dazu (wenn dies dann das).

Ich hätte dazusagen sollen, dass der Screenshot im Maßstab 1:1 ist‽ ;-)

Qapla'

[Auge]

Hallo

Dass Browserfenster bei verschiedenen Nutzern verschieden groß sind, sollte im Webdesign offensichtlich sein.

Ja natürlich. Aber verdammte Axt, lass dir doch nicht alles einzeln aus der Nase ziehen sondern sag es bitte gleich dazu (wenn dies dann das).

Ich hätte dazusagen sollen, dass der Screenshot im Maßstab 1:1 ist‽ ;-)

Wenn du es ins Lächerliche ziehen willst, ja.

Tschö, Auge

[Gunnar Bittersmann]

@@Auge:

nuqneH

Wenn du es ins Lächerliche ziehen willst, ja.

Ich finde eher lächerlich zu erwähnen, dass Browserfenster bei verschiedenen Nutzern verschieden groß sind. Zumal Melina das weiß.

Qapla'

[Matthias Apsel]

Om nah hoo pez nyeetz, Auge!

Gerade mit Firefox und Chrome (Windows). Das Fehlverhalten tritt auf beiden auf.

Dieses Verhalten tritt mit den genannten Browsern unter dem genannten Betriebssystem offensichtlich bei niemand anderem als bei dir auf.

Das Menü verschwindet bei einer Fenstergröße < ca 800px.

@Melina: Die Mediaqueries sollten sich ebenfalls am Inhalt orientieren.

Matthias

[Melina]

Hallo,

Das Menü verschwindet bei einer Fenstergröße < ca 800px.

Ahhhh, jetzt kommen wir der Sache näher. Das stimmt, vor Weihnachten haben ich mit den Mediaqueries  gespielt. Dass Gunnar Bittersmann so eine kleine Auflösung hat, hätte ich nicht gedacht. Dann ist mir nun klar, warum das Menü verschwindet und die Schrift so groß ist.

@Melina: Die Mediaqueries sollten sich ebenfalls am Inhalt orientieren.

Da werde ich mich nochmals dran setzten wenn ich mehr Zeit habe. Mediaqueries sind für mich derzeit noch ein Buch mit sieben Siegel. Was daraus geworden ist, kannst du ja sehen, die Seite sieht derzeit durch die Mediaqueries total scheiße aus.

[Gunnar Bittersmann]

@@Melina:

nuqneH

Dass Gunnar Bittersmann so eine kleine Auflösung hat, hätte ich nicht gedacht.

Hab ich auch nicht.

Qapla'

[Mattes]

Anstatt dich über 0,4 Pixel aufzuregen, solltest du dich lieber mal um grundsätzliche Stabilität kümmern

welches Betriebsystem bzw. Browser nutzt du? Denn auf Windows kann ich dieses Fehlverhalten nicht nachvollziehen.

Doch, bestimmt. Kommentiere einfach mal bei .slogan die font-family-Zeile aus, schon fällt da oben alles auseinander.

Du wirst jetzt sicher einwenden, dass die Schriftart ja garantiert immer geladen würde, ich würde dir auch zustimmen, dass das Antreffen von Blockadekrimskrams (in meinem Falle RequestPolicy) in der freien Natur eher als homöopathisch zu bezeichnen ist.
Trotzdem finde ich es fürs Gesamtkunstwerk bedenklich, wenn eine derartige Belanglosigkeit wie der Rückfall auf die Standardschrift gleich für so ein Durcheinander sorgt.

Mir kommt das zusammen mit deinem Pixelproblemchen alles in allem ein wenig vor, als wenn du dich als Villen-Architektin mehr für das Blümchenmuster der Fenstervorhänge interessiert hast als für die Art und Weise, wie die Mauern hochgezogen wurden. Und solche Prioritätensetzung sehe ich immer mit leicht kopfschüttelndem Erstaunen, daher mein Interesse.

[Mattes]

Noch'n Nachtrag:

Für ein dekoratives Element wie das hier betroffene Sprüchlein kannst du auch eine Grafik einsetzen. Die ist dann wirklich pixelgenau, auf jedem grafischen Browser unter allen Umständen, und von unterwegs vielleicht sogar noch schneller geladen.

Der einzige Grund für deine Vorgehensweise dürfte sein, dass es der letzte Schrei der Technik ist. Das ist auch schön und nett, mache ich auch gern, aber wenn man sich für reine Kosmetik solche Probleme einbaut, tatsächlich oder vermeintlich, womöglich noch alles verschlimmbessert (dein Drang, die ganze Seite doch wiesder mit px zu zementieren), sehe ich den Nutzen nicht – außer "hab' ich". Und das kann's nicht sein.

[Melina]

Hallo,

Für ein dekoratives Element wie das hier betroffene Sprüchlein kannst du auch eine Grafik einsetzen. Die ist dann wirklich pixelgenau, auf jedem grafischen Browser unter allen Umständen, und von unterwegs vielleicht sogar noch schneller geladen.

und ich könnte mit dir wetten, hätte ich dafür eine Grafik genommen und dieses Beispiel hier gezeigt, wäre bestimmt von einige der Spruch "Warum nimmst du für eine Schrift eine Grafik, wenn es auch anderes geht" gekommen.

[Gunnar Bittersmann]

@@Mattes:

nuqneH

Für ein dekoratives Element wie das hier betroffene Sprüchlein kannst du auch eine Grafik einsetzen.

Aber bitte Vektorgrafik oder wenn Rastergrafik, dann doppelt so groß und im Browser runterskaliert. Oder zukünftig mit srcset-Attribut. Sonst sieht’s auf hochauflösenden Displays richtig blöd aus, wenn der normale Text scharf, das Sprüchlein aber verpixelt ist.

und von unterwegs vielleicht sogar noch schneller geladen.

Ja, eine Textgrafik kann durchaus kleiner sein als eine Webfont-Datei, die nur an einer Stelle verwendet wird.

Qapla'

[Melina]

Hallo,

Doch, bestimmt. Kommentiere einfach mal bei .slogan die font-family-Zeile aus, schon fällt da oben alles auseinander.

kann ich nicht bestätigen, bei mir sieht es dann so aus

Mir kommt das zusammen mit deinem Pixelproblemchen alles in allem ein wenig vor, als wenn du dich als Villen-Architektin mehr für das Blümchenmuster der Fenstervorhänge interessiert hast als für die Art und Weise, wie die Mauern hochgezogen wurden. Und solche Prioritätensetzung sehe ich immer mit leicht kopfschüttelndem Erstaunen, daher mein Interesse.

Für mich muss eine Seite "schön" aussehen! Die Technik dahinter ist MIR erstmal ganz egal. Ein User muss schnell etwas finden und auf alle Desktop Browsern gut aussehen. Der Rest kommt erst später. Und bevor jetzt wieder einige Mecker, ist es ist nur meine Meinung. Jeder sollte und darf seine eigene Meinung haben und die sollte auch akzeptiert werden.

[Gunnar Bittersmann]

@@Melina:

nuqneH

Für mich muss eine Seite "schön" aussehen!

Für mich muss eine Seite gut designt sein. „Schönheit“ ist nur ein Teil davon, und bei weitem nicht der bedeutendste.

Die Technik dahinter ist MIR erstmal ganz egal.

Die Technik dahinter ist DEM NUTZER ganz egal.

DU ALS WEBDESIGNER solltest die Technik beherrschen, um eine Seite „schön“ aussehen zu lassen.

und auf alle Desktop Browsern gut aussehen.

Streiche „Desktop“.

Desktop-Nutzer sind über kurz oder lang (eher kurz) in der Minderheit.

Und „gut aussehen“ heißt keinesfalls „gleich aussehen“.

Jeder sollte und darf seine eigene Meinung haben und die sollte auch akzeptiert werden.

Bevor ich eine Meinung akzeptiere, hinterfrage ich die Begründung. Und wenn keine akzeptable Begründung kommt, kann ich zwar akzeptieren, dass der andere eine falsche Meinung hat, werde aber dennoch sagen, dass sie falsch ist. Mit Begründung, natürlich.

Qapla'

[Mattes]

Für mich muss eine Seite "schön" aussehen! Die Technik dahinter ist MIR erstmal ganz egal.

Der Rest kommt erst später.

Um mal bei der Villa zu bleiben: Gleich ein anständiges Fundament zu legen erzeugt weniger Verdruss als hinterher, wenn die Blümchenvorhänge schon hängen, das Fundament auszubessern.
Aber natürlich sind es deine Nerven und deine Besucher; hier hält dich niemand davon ab, es so zu machen, wie du es für angebracht hältst.

es ist nur meine Meinung. Jeder sollte und darf seine eigene Meinung haben und die sollte auch akzeptiert werden.

Andere Leute haben andere Meinungen. Warum sollte jemand deine Meinung akzeptieren, nur weil du seine Meinung nicht akzeptieren möchtest?
Mit der Forderung, dass ich deine Meinung akzeptieren solle, würdest du mir genau diese Möglichkeit nehmen, die du für dich selbst einforderst, nämlich dass du gefälligst meine Meinung zu akzeptieren hast. Du wirst einsehen, dass das so nicht laufen kann.

Selbstverständlich kannst du deine Meinung kundtun, aber wenn du das tust, dann solltest du dich nicht wundern, wenn andere Leute diese in Zweifel ziehen. Ehrlich Meinungsfreiheit einfordern kann man eigentlich nur für die Meinung anderer.

[Mitleser]

ich bin etwas am verzweifeln, wie kann es sein, dass der Firefox und Google Chrome eine Schrift unterschiedlich groß darstellt?

Die schlechte Nachricht:

Das unterschiedliche Systeme / Clients Fonts leicht unterschiedlich rendern, musst Du akzeptieren. Schau Dir Dein Beispiel z.B. mal unter MacOS X an, Du wirst weitere Unterschiede entdecken.

Die gute Nachricht: der Unterschied im Screen ist für die hierbei bekannten Abweichungen zu groß, das wird sich lösen lassen. Allerdings hier im Forum wirklich nur sinnvoll mit einem reduzierten Online-Beispiel.

Was man so schon sagen kann:

Das Rendering des Slogans mit dem eigenen Font unterscheidet sich nur marginal, wurde ja schon bemerkt.

Zu dem unterschiedlichen Rendering der Navigation kann man spekulativ noch anmerken:

Hier ein Bild vom Google Chrome

Das sieht mir rein optisch nicht nach der von Dir gesetzten Tahoma aus, wirkt eher wie Verdana.

Hier ein Bild vom Firefox in der aktuellsten Version

Das sieht schon eher nach Tahoma aus.

[Tabellenkalk]

Hallo,

Das sieht schon eher nach Tahoma aus.

ich weiß nicht wo du die Information her hast, welche Schriftart Melina in der Navigation verwendet.
Außerdem kann ich auf meinem System kaum Unterschiede zwischen Verdana und Tahoma ausmachen. Aber wenn ich mir das große E anschaue, dann ist das nicht Tahoma.

Gruß
Kalk

[Mitleser]

ich weiß nicht wo du die Information her hast, welche Schriftart Melina in der Navigation verwendet.

Aus diesem Forum ;-)

Außerdem kann ich auf meinem System kaum Unterschiede zwischen Verdana und Tahoma ausmachen. Aber wenn ich mir das große E anschaue, dann ist das nicht Tahoma.

Möglich, war ja auch nur spontaner Spekulatius zu dem drastischen Unterschied in der Laufweite.