Mein Fehler, oder Safari Bug?

Xcode

Empire
Registriert
27.08.06
Beiträge
84
Hallo,

ersteinmal Code :p

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<title>Safari Bug?</title>
		<link rel="stylesheet" type="text/css" href="screen.css" media="screen" />
	</head>
	<body>
		<h1>Lorem ipsum</h1>
		<h2>von Xcode & TomCat (13. Mai 2007)</h2>
	</body>
</html>

Code:
* {
	font-family: "Lucida Grande", Verdana, Arial, sans-serif;
	padding: 0;
	margin: 0;
}

body {
	font-size: 62.5%;
}

h1 {
	font-size: 2em;
	padding-left: 10em;
	margin-bottom: .2em;
}

h2{
	font-size: 1em;
	padding-left: 20em;
}

Ich habe in Safari folgendes Problem: Die beiden Überschriften sind mit standard Einstellungen bündig. Sobald ich den Text allerdings kleiner skaliere rutscht die h1 zu weit nach links (ist also zu h2 nicht mehr bündig). Hochskalieren dagegen klappt wunderbar.

Das Problem tritt nur in Safari auf. Firefox und sogar der IE6 machen keine Probleme :-[
 

Hilarious

Gelbe Schleswiger Reinette
Registriert
10.08.05
Beiträge
1.759
Mit Deinem Beispiel komme ich bei allen genannten Browsern zu nahezu identischen Ergebnissen. Kannst Du's nur mit obigem Beispiel reproduzieren?
 

Xcode

Empire
Registriert
27.08.06
Beiträge
84
Meiner meinung nach reproduzierbar, da da das Problem ja im denkbar simpelsten Fall bereits auftritt. Ich kann (und habe) es ja noch ein bisschen verschachteln :p aber das ändert ja auch nix)

Ja das sieht in allen Browsern eigentlich gleich aus. Nur beim runterskalieren macht Safari halt das hier (Screens im Anhang).

Habe das stylesheet jetzt noch weiter vereinfacht:
Code:
body {
	font-size: 62.5%;
}

#h1 {
	font-size: 2em;
	padding-left: 10em;
}

#h2{
	font-size: 1em;
	padding-left: 20em;
}

Es spielt übr. keinerlei Rolle, ob es ein h1 und ein h2 Element oder zwei h1 mit unterschiedlichen Klassen sind.
 

Anhänge

  • 00000002.png
    00000002.png
    21 KB · Aufrufe: 94
  • 00000002-1.png
    00000002-1.png
    20,7 KB · Aufrufe: 100

Peter Maurer

Pommerscher Krummstiel
Registriert
16.03.04
Beiträge
3.077
Mal eine Theorie: Bei Deiner mehr oder weniger zufaellig buendigen Einrueckung machst Du Dir das Groessenverhaeltnis der beiden Header zunutze (Header groesser -> braucht zur selben Einrueckung weniger em-Einheiten).

Safari hat aber eine Untergrenze fuer die Schriftgroesse; und wenn Du mit dem kleineren Header an diese Grenze stoesst, aendert sich das o.g. Groessenverhaeltnis, was zwangslaeufig dazu fuehren muss, dass Deine Rechnung nicht mehr aufgeht.

Ich weiss, codemaessig sieht das dann nicht mehr so huebsch aus; aber ich wuerde, wenn mich das stoeren wuerde, an Deiner Stelle wohl versuchen, beide Header mit denselben Einheiten einzuruecken (vermittels div oder so).
 

Xcode

Empire
Registriert
27.08.06
Beiträge
84
Safari hat aber eine Untergrenze fuer die Schriftgroesse

Daran liegt's also :)

Ja mir war vorher gar nicht aufgefallen, dass die kleinere Überschrift ab einem bestimmten Punkt einfach stehen bleibt (--> scheinbar Grenze erreicht).

Ein div zum einrücken mag ich nciht so sehr... das gibt wieder langes Grübeln^^

Bei Deiner mehr oder weniger zufaellig buendigen Einrueckung
Amen.

Ich glaub das war's für mcih erstmal mit über ems skalierbaren Elementen. text skalieren ist ja schön und gut, aber die ganze Seite - lieber nicht^^
 
Zuletzt bearbeitet:

Nogger

Damasonrenette
Registriert
05.11.05
Beiträge
494
Nebenbei: Meine Standardtextgröße ist 14px. Und du schreibst auf deiner Seite, dass der Fließtext bitte in 14*0,625 = 8,75 = 9px dargestellt werden soll? Ööh, wird die Seite vom Bundesverband der Optiker gesponsert? Kein Wunder, dass die Browser eine Mindestschriftgröße zum Schutz der Benutzer erzwingen.
 

Hilarious

Gelbe Schleswiger Reinette
Registriert
10.08.05
Beiträge
1.759
Daran liegt's also :)

Ja mir war vorher gar nicht aufgefallen, dass die kleinere Überschrift ab einem bestimmten Punkt einfach stehen bleibt (--> scheinbar Grenze erreicht).

Ein div zum einrücken mag ich nciht so sehr... das gibt wieder langes Grübeln^^

Amen.

Ich glaub das war's für mcih erstmal mit über ems skalierbaren Elementen. text skalieren ist ja schön und gut, aber die ganze Seite - lieber nicht^^

Ich habe damit sehr gute Erfahrungen gemacht, lass den Kopf nicht hängen. ;)