Anna: Überschriften formatieren sich seltsam

Hallo allerseits,

ich wollte Euch mal fragen, ob es irgendeine Ecke des Computers, des Browsers, des ... ?? gibt, woher Überschriftenformatierungen noch beeinflusst werden können.

Laut selfhtml und anderen Tutorials, die ich mir reingezogen habe, sind Überschriften, sofern nicht anders bestimmt, linksbündig ausgerichtet.
Das ist aber bei mir aus unerfindlichen Gründen nicht der Fall. Wenn ich das nicht festlege, dann sind sie zentriert.

Und wenn ich es bestimme, dann gibt es da seltsame Inkonsistenzen.

Die Überschriften auf Ebene h5 beispielsweise habe ich im Stylesheet folgendermaßen formatiert:

	h5 {  
	  font-size: 90%;  
	  font-style:italic;  
	  text-align: left;  
	  margin: 5px 50px 5px 50px;  
	}

Das klappt zunächst mal wunderbar. Der Text sitzt jetzt genau da, wo ich ihn haben will.
Nun wollte ich h4 genauso haben, nur nicht kursiv. Also:

	h4 {  
	  font-size: 90%;  
	  text-align: left;  
	  margin: 5px 50px 5px 50px;  
	}

Resultat: Schriftbild völlig anders als h5, und vor allem: das ganze mit seltsamer Einrückung. Lasse ich "text-align: left" weg, ist das ganze auch noch zentriert.
Verschiedene Browser habe ich übrigens auch schon probiert - sieht überall gleich aus. Validiert habe ich das ganze auch mehrfach - nirgendwo ein vergessenes Zeichen zu entdecken.

Seht Ihr vielleicht schon auf Anhieb irgendeinen Denkfehler direkt bei der Formatierung dieser Überschriften?

Oder könnt Ihr mir sagen, auf welcher Ebene und in welcher Ecke ich noch nach Faktoren suchen muss, die die Formatierung von Überschriften beeinflussen?

Vielen Dank schonmal im voraus und Gruß,
Anna

  1. Hi,

    ich wollte Euch mal fragen, ob es irgendeine Ecke des Computers, des Browsers, des ... ?? gibt, woher Überschriftenformatierungen noch beeinflusst werden können.

    ja, durch die Anordnung (fast) aller anderen Elemente drumherum.

    h5 {  
    

    font-size: 90%;
      font-style:italic;
      text-align: left;
      margin: 5px 50px 5px 50px;
    }

    
    >   
    > Das klappt zunächst mal wunderbar. Der Text sitzt jetzt genau da, wo ich ihn haben will.  
    > Nun wollte ich h4 genauso haben, nur nicht kursiv. Also:  
    >   
    > ~~~css
    
    	h4 {  
    
    > 	  font-size: 90%;  
    > 	  text-align: left;  
    > 	  margin: 5px 50px 5px 50px;  
    > 	}
    
    

    Resultat: Schriftbild völlig anders als h5, und vor allem: das ganze mit seltsamer Einrückung.

    Hast du mal kontrolliert, ob sich das h4- oder h5-Element wirklich über die ganze Breite erstreckt? Liegt es in einem Containerelement, das seinerseits nur einen Teil der Breite einnimmt? Wirken vielleicht gefloatete Elemente in der Nachbarschaft auf die Platzaufteilung ein?

    Lasse ich "text-align: left" weg, ist das ganze auch noch zentriert.

    Das heißt, das Elternelement (oder eines der Vorfahrenelemente) legt text-align:center fest und vererbt das an seine Kinder.

    Seht Ihr vielleicht schon auf Anhieb irgendeinen Denkfehler direkt bei der Formatierung dieser Überschriften?

    Möglicherweise. Ich habe den Eindruck, du achtest zu wenig auf den Kontext drumherum. Schnapp dir mal Firebug und frag ihn nach den Formatierungen, die für das fragliche h4- und h5-Element gelten, und woher diese Vorschriften stammen.

    Ciao,
     Martin

    --
    Wenn alle das täten, wass sie mich können,
    käme ich gar nicht mehr zum Sitzen.
    Selfcode: fo:) ch:{ rl:| br:< n4:( ie:| mo:| va:) de:] zu:) fl:{ ss:) ls:µ js:(
    1. Hallo Martin,

      vielen Dank für Deine Antwort!

      ja, durch die Anordnung (fast) aller anderen Elemente drumherum.

      ...

      Hast du mal kontrolliert, ob sich das h4- oder h5-Element wirklich über die ganze Breite erstreckt? Liegt es in einem Containerelement, das seinerseits nur einen Teil der Breite einnimmt?

      Nein, es erstreckt sich nicht über die gesamte Breite, sondern - das ist schon richtig vermutet - es ist beschränkt durch die Breite des Textbereichs. Das war ja zunächst mal auch so gedacht.
      Andere gefloatete Elemente habe ich in dem Bereich nicht.

      Das Seltsame ist ja aber, dass es bei h5 funktioniert und bei h4 nicht, obwohl das "Drumherum" - soweit ich sehe - genau identisch ist.
      Ich kann auch bei den für h4 gedachten Überschrift h4 durch h5 ersetzen, und dann stimmt (bis eben auf die Kursivschreibung) alles. Da habe ich ja am Umfeld nichts geändert.

      Ich kann auch bei h5 die Kursivschreibung wegnehmen, und dann sieht das genau so aus und sitzt genau da, wo ich h4 gerne hätte. Reagieren h4 und h5 irgendwie unterschiedlich? Gibt es da auf irgendeiner Ebene irgendwelche standardmäßigen Voreinstellungen?

      Das heißt, das Elternelement (oder eines der Vorfahrenelemente) legt text-align:center fest und vererbt das an seine Kinder.

      Das leuchtet im Prinzip ein. Aber warum bloß tut es das dann nicht bei h5, auch wenn das an exakt derselben Stelle sitzt, ohne dass ich irgendwo anders irgendetwas verändert hätte?

      Schnapp dir mal Firebug und frag ihn nach den Formatierungen, die für das fragliche h4- und h5-Element gelten, und woher diese Vorschriften stammen.

      Danke für den Tipp; Firebug kannte ich tatsächlich noch nicht. Werde ich mir ansehen.

      Gruß,
      Anna

      1. Hoi!

        Hast Du schonmal ganz einfache Strukturen probiert? Was macht dein Browser wenn Du einfach ein Dokument erstellst in dem du im body lediglich h-Elemente notierst?

        Wenn Die da rumzicken, sind die Browsereinstellungen modifiziert. Das wäre merkwürdig, da du schreibst alle Browser würden sich gleich verhalten.

        Ich tippe drauf, daß due irgendwo eine Formatierung hast, die Dir reinpfuscht. Dafür is Firebug wirklich gut. Ansonsten wäre ein Onlinebeispiel gut.

        --
        Vergesst Chuck Norris.
        Sponge Bob kann unter Wasser grillen!
        1. Hallo Steel,

          danke auch Dir für Deine Antwort!

          Hast Du schonmal ganz einfache Strukturen probiert? Was macht dein Browser wenn Du einfach ein Dokument erstellst in dem du im body lediglich h-Elemente notierst?

          Die Idee ist gut - hab' sie gleich ausprobiert, auch mit der css-Datei. Einmal einfach alles umbenannt, und dann wollte ich stückchenweise Elemente entfernen, um mögliche Probleme auszuschließen.

          Und das Verrückte ist, direkt nach der Umbenennung hat es sofort alles funktioniert. Schon bevor ich auch nur das kleinste bisschen vom "Drumherum" entfernt hatte. Alles genau wie vorher, nur unter anderen Dateinamen. :-o

          Das erkläre mir jetzt mal einer...

          Gruß,
          Anna

          1. Hallo Anna,

            Und das Verrückte ist, direkt nach der Umbenennung hat es sofort alles funktioniert. Schon bevor ich auch nur das kleinste bisschen vom "Drumherum" entfernt hatte. Alles genau wie vorher, nur unter anderen Dateinamen. :-o
            Das erkläre mir jetzt mal einer...

            These Nummer 1: Dein Browser hat phantasiert, beispielsweise Informationen aus dem Cache angezeigt, obwohl sie in Wirklichkeit längst geändert waren.

            These Nummer 2: Du hast das fragliche Projekt zur Untersuchung auch in ein anderes Verzeichnis verpflanzt, und an irgendeiner Stelle, die dir bisher nicht aufgefallen ist, wurde noch ein Stylesheet eingebunden, das nun nicht gefunden wird (und daher keinen Einfluss haben kann).

            Such dir eine These aus - oder vielleicht hast du selbst noch eine andere. ;-)

            Schönes Wochenende,
             Martin

            --
            Früher habe ich mich vor der Arbeit gedrückt, heute könnte ich stundenlang zusehen.
            Selfcode: fo:) ch:{ rl:| br:< n4:( ie:| mo:| va:) de:] zu:) fl:{ ss:) ls:µ js:(
            1. These Nummer 1: Dein Browser hat phantasiert, beispielsweise Informationen aus dem Cache angezeigt, obwohl sie in Wirklichkeit längst geändert waren.

              Na, das wäre ja frech. Wie kann ich denn sowas verhindern? Mit F5 müsste der die Seite doch eigentlich immer erneuern, oder?

              Aber andere Änderungen an der Seite wurden ja auch angezeigt. Insofern kann das doch eigentlich nicht sein...

              These Nummer 2: Du hast das fragliche Projekt zur Untersuchung auch in ein anderes Verzeichnis verpflanzt, und an irgendeiner Stelle, die dir bisher nicht aufgefallen ist, wurde noch ein Stylesheet eingebunden, das nun nicht gefunden wird (und daher keinen Einfluss haben kann).

              Nee, alles im selben Verzeichnis geblieben. Das Stylesheet hatte ich zu Experimentierzwecken zwischenzeitlich zwar auch umbenannt, aber auch im selben Ordner gelassen. Und wie gesagt, bis auf die Umbenennung hatte ich noch gar nichts geändert.

              Such dir eine These aus - oder vielleicht hast du selbst noch eine andere. ;-)

              Nicht die leiseste. Seeehr mysteriös, das ganze.
              Na ja, Hauptsache, es funktioniert jetzt. Aber erklären kann ich mir das nicht. Und da sagt man, Computer wären logisch funktionierende Wesen. ;-)

              Gruß,
              Anna

              1. Na, das wäre ja frech. Wie kann ich denn sowas verhindern? Mit F5 müsste der die Seite doch eigentlich immer erneuern, oder?

                Strg+F5 läd idR auch andere Ressourcen neu.

                1. Na, das wäre ja frech. Wie kann ich denn sowas verhindern? Mit F5 müsste der die Seite doch eigentlich immer erneuern, oder?
                  Strg+F5 läd idR auch andere Ressourcen neu.

                  Jetzt stehe ich wohl gerade auf dem Schlauch. Ich versteh' nicht ganz, was Du damit sagen willst...

                  Gruß,
                  Anna

                  1. Hallo,

                    Na, das wäre ja frech. Wie kann ich denn sowas verhindern? Mit F5 müsste der die Seite doch eigentlich immer erneuern, oder?
                    Strg+F5 läd idR auch andere Ressourcen neu.
                    Jetzt stehe ich wohl gerade auf dem Schlauch. Ich versteh' nicht ganz, was Du damit sagen willst...

                    dass ein "einfaches" Reload, wie es typischerweise mit F5 ausgelöst wird, *vielleicht* das HTML-Dokument neu vom Server anfordert (vielleicht aber auch nicht), die eingebundenen Ressourcen wie Stylesheets, Javascripts oder Bilder aber mit großer Wahrscheinlichkeit aus dem Cache holt. Vor allem der IE ist berüchtigt dafür, sich noch lange an seinen Cache-Inhalten zu erfreuen, auch wenn auf dem Server schon längst neue, geänderte Dokumente vorliegen - die häufigen Hinweise bei IE-Mysterien, die auf "Lösch mal den Cache-Inhalt" hinauslaufen, sprechen eine deutliche Sprache.

                    Mit Ctrl-F5 erzwingt man dagegen bei einigen Browsern ein *vollständiges* Reload.

                    Ciao,
                     Martin

                    --
                    Der Klügere gibt solange nach, bis er der Dumme ist.
                    Selfcode: fo:) ch:{ rl:| br:< n4:( ie:| mo:| va:) de:] zu:) fl:{ ss:) ls:µ js:(
                    1. dass ein "einfaches" Reload, wie es typischerweise mit F5 ausgelöst wird, *vielleicht* das HTML-Dokument neu vom Server anfordert (vielleicht aber auch nicht), die eingebundenen Ressourcen wie Stylesheets, Javascripts oder Bilder aber mit großer Wahrscheinlichkeit aus dem Cache holt.

                      Ah, vielen Dank für die Erklärung. Das wusste ich nicht. Dann also in Zukunft zur Sicherheit immer Strg+F5!

                      (Auch wenn das den Fehler hier nach wie vor nicht schlüssig erklären kann, denn es wurden ja durchaus Änderungen angezeigt, die ich im Stylesheet vorgenommen hatte. Nur eben nicht die, die ich wollte!)

                      Vor allem der IE ist berüchtigt dafür, sich noch lange an seinen Cache-Inhalten zu erfreuen, auch wenn auf dem Server schon längst neue, geänderte Dokumente vorliegen - die häufigen Hinweise bei IE-Mysterien, die auf "Lösch mal den Cache-Inhalt" hinauslaufen, sprechen eine deutliche Sprache.

                      Da bin ich sowieso schon vorsichtig und arbeite praktisch überhaupt nicht mit dem IE, höchstens nochmal als allerletzten Blick, was der denn aus meinem Produkt so macht.

                      Gruß,
                      Anna