1. Diese Seite verwendet Cookies. Wenn du dich weiterhin auf dieser Seite aufhältst, akzeptierst du unseren Einsatz von Cookies. Weitere Informationen

Mein Fehler, oder Safari Bug?

Dieses Thema im Forum "Web-Programmierung" wurde erstellt von Xcode, 30.04.07.

  1. Xcode

    Xcode Empire

    Dabei seit:
    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 :-[
     
  2. Hilarious

    Hilarious Gelbe Schleswiger Reinette

    Dabei seit:
    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?
     
  3. Xcode

    Xcode Empire

    Dabei seit:
    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:

  4. Peter Maurer

    Peter Maurer Carmeliter-Renette

    Dabei seit:
    16.03.04
    Beiträge:
    3.274
    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).
     
  5. Xcode

    Xcode Empire

    Dabei seit:
    27.08.06
    Beiträge:
    84
    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^^
     
    #5 Xcode, 01.05.07
    Zuletzt bearbeitet: 01.05.07
  6. Nogger

    Nogger Damasonrenette

    Dabei seit:
    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.
     
  7. Hilarious

    Hilarious Gelbe Schleswiger Reinette

    Dabei seit:
    10.08.05
    Beiträge:
    1.759
    Ich habe damit sehr gute Erfahrungen gemacht, lass den Kopf nicht hängen. ;)
     

Diese Seite empfehlen