Text in Firefox

[2-Pack]

Hallo Forum,

habe das Problem das mir der Text im Firefox nicht richtig angezeigt wird.
Die Seite wird richtig dargestellt im IExplore, Safari und Chrome. Im Firefox werden die Abstände nicht richtig eingehalten siehe Bild.
Habe dort Firefox und IExplore übereinandergelegt.



Der Zeilenabstand erhöht sich um 2 Pixel.

thx 2-Pack

[speedjunkie]

Ich weiß nicht genau aber ich denke wenn Du für die Elemente <p>< b>< h1> usw. den Style selbst definierst sollte die Abweichung nicht so groß sein und ich würde auch keine System Fonts verwenden.

Und CSS Reset

CSS

@import url("reset.css");
@import url("http://fonts.googleapis.com/css?family=Expletus+Sans:400,500,600,700");
				
.Headline {
    font-family: 'Expletus Sans', serif;
    color: #fff;
    font-size: 16px;
    text-shadow: 2px 2px 2px #aaa;
}

.Subheadline {
    font-family: 'Expletus Sans', serif;
    color: #fff;
    font-size: 14px;
    text-shadow: 2px 2px 2px #aaa;
}
				
.Floattxt {
    font-family: 'Expletus Sans', serif;
    color: #fff;
    font-size: 13px;
    text-shadow: 2px 2px 2px #aaa;
}

html

<h1 class="Headline">Lorem ipsum dolor sit amet</h1>
<h2 class="Subheadline">Lorem ipsum dolor sit amet</h2>
<br>
<p class="Floattxt">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>

Reset Stylesheet
HTML5 Reset Stylesheet
WEB FONTS

turbine CSS Framework auf PHP Basis bringt verschiedene css hacks schon mit

[2-Pack]

Hi speedjunkie,

ich habe die schrift in einer externen css datei defeniert.

p {
	margin-top: 2px;
	margin-bottom: 2px;	
	font-size: 11px;
	font-family:Verdana, Geneva, sans-serif;
}
h2{
	color: #333;
	font-family:Verdana, Geneva, sans-serif;
	font-size: 18px;
	font-weight: bold;
	margin-top: 5px;
	margin-bottom: 5px;	
}
h5{
	color: #333;
	font-family:Verdana, Geneva, sans-serif;
	font-size: 12px;
	font-weight: bold;
	margin-top: 5px;
	margin-bottom: 5px;
}

 <h2>Haftungsausschluss:</h2> 
  <h5>Haftung für Inhalte</h5> 
  <p>Die Inhalte unserer Seiten wurden mit größter Sorgfalt erstellt. Für
  die Richtigkeit, Vollständigkeit und Aktualität </p>

[Martin Kraft]

Dein Hauptproblem ist ja der Zeilenabstand?! Diesen solltest Du auch in CSS definieren.

Das die Buchstaben selbst unterschiedlich breit laufen, liegt am Antialiasing und Textrendering der verschiedenen Browser, Betriebssysteme und BenutzerEinstellungen (z.B. Cleartype). Da kann es abhängig von der Schriftgröße erhebliche Abweichungen geben, die sich natürlich auch auf die Umbrüche und damit die Absatzlänge auswirken.

Wir hatten das irgendwann mal nachgelassen und kamen auf bis zu 40px Differenz pro Textzeile. Am krassesten ist das Antialiasing IMHO im Safari auf Windows - hier werden die Buchstaben total weich und breit dargestellt.

Leider hat man auf das Textrendering keinerlei Einfluss. Pixelgenaue Textlayouts lassen sich in HTML (anders als in Flash) nicht browserübergreifend umsetzen.

[Martin Kraft]

Was mir noch einfällt:
Der Nutzer kann ja mittlerweile in fast allen Browsern die Inhalte selbst vergrößern bzw. verkleinern. Im FF funktioniert das besonders einfach über die Str-Taste und das Mouserad. Vielleicht ist ja bei Dir einfach nur eine leichte Vergrößerung eingestellt?! Mit Str + 0 kommst Du wieder auf 100%.

[2-Pack]

Erst mal vielen Dank für die Antworten,

kannte den Befehl für die Zeilenhöhen nicht. Funktioniert jetzt, zwar nicht 100% aber bekommen jetzt alles so hin wie ich es wollte.

thx 2-Pack