Ich habe eine Frage, auf die ich trotz umfangreicher Suche noch keine Antwort gefunden habe.
Der untenstehende Code wird im Firefox anders angezeigt als in Chrome.
Ich habe eine Hauptseite auf der es 3 Links (hier als "h2" angelegt) zu Unterseiten gibt. Beim Weiterleiten auf die Unterseiten (thema1.html - thema3.html) bleiben die 3 h2-Überschriften aber stehen. Die jeweils zur Seite gehörende h2 wird dann jeweils der Klasse "h2.active" zugeordnet und damit in der Farbe etwas anders dargestellt. Firefox zeigt Alles perfekt an, Chrome zeigt auf den Unterseiten die h2.active-Einträge um ca. 10px nach rechts eingerückt an.
Es gibt noch eine Klasse, die NUR .active heißt und ein padding von 10px hat.
Wenn ich in den Inspektor schaue, scheint Firefox den h2.active-Eintrag anzuwenden und Chrome den .active. Kann mir jemand sagen warum das so ist?
Startseite:
Themenseite (thema1.html):
CSS:
Der untenstehende Code wird im Firefox anders angezeigt als in Chrome.
Ich habe eine Hauptseite auf der es 3 Links (hier als "h2" angelegt) zu Unterseiten gibt. Beim Weiterleiten auf die Unterseiten (thema1.html - thema3.html) bleiben die 3 h2-Überschriften aber stehen. Die jeweils zur Seite gehörende h2 wird dann jeweils der Klasse "h2.active" zugeordnet und damit in der Farbe etwas anders dargestellt. Firefox zeigt Alles perfekt an, Chrome zeigt auf den Unterseiten die h2.active-Einträge um ca. 10px nach rechts eingerückt an.
Es gibt noch eine Klasse, die NUR .active heißt und ein padding von 10px hat.
Wenn ich in den Inspektor schaue, scheint Firefox den h2.active-Eintrag anzuwenden und Chrome den .active. Kann mir jemand sagen warum das so ist?
Startseite:
HTML:
<section class="c30">
<h2><a href="thema1.html">thema1</a></h2>
</section>
<section class="c30">
<h2><a href="thema2.html">thema2</a></h2>
</section>
<section class="c30">
<h2><a href="thema3.html">thema3</a></h2>
</section>
Themenseite (thema1.html):
HTML:
<section class="c30">
<h2 class="active">thema1</h2>
</section>
<section class="c30">
<h2><a href="thema2.html">thema2</a></h2>
</section>
<section class="c30">
<h2><a href="thema3.html">thema3</a></h2>
</section>
CSS:
HTML:
.active {
color: #b3a795;
padding: 0 10px;
}
h2.active {
color: #b3a795;
padding: 0;
}