• Apfeltalk ändert einen Teil seiner Allgemeinen Geschäftsbedingungen (AGB), das Löschen von Useraccounts betreffend.
    Näheres könnt Ihr hier nachlesen: AGB-Änderung
  • Es regnet, ist neblig und kalt, alle sind krank und der Chef wird zunehmend cholerisch. Das Thema des Monats ist also folgerichtig --> Das Grau(en)
    Wir sind gespannt, war Euch dazu einfällt! Zum Wettbewerb --> Klick

Mein Fehler, oder Safari Bug?

Xcode

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

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

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

Xcode

Empire
Registriert
27.08.06
Beiträge
84
Peter Maurer schrieb:
Safari hat aber eine Untergrenze fuer die Schriftgroesse
Zum Vergrößern anklicken....

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
Zum Vergrößern anklicken....
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
Xcode schrieb:
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^^
Zum Vergrößern anklicken....

Ich habe damit sehr gute Erfahrungen gemacht, lass den Kopf nicht hängen. ;)
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
2003-2024 Apfeltalk | Made on a Mac
Oben Unten