Sprung bei Anchorlink nicht in allen (aktuellen) Browsern perfekt

[ScoutX]

Moin,

folgende WP Seite in der Entwicklung:
https://coaching-impulswerk.de

Das Desktop-Menü (sowohl landing menu als auch das nach dem scrollen erscheinende) haben von mir einen "Offset" über CSS bekommen, so dass die Überschrift direkt hinter dem Header erscheint. In den meisten Browsern scheint der Sprung OK zu sein. Firefox ärgert mich. Vergleiche Firefox vs. Chrome.

Jemand eine Idee, wie man dies ein für alle Mal verbessern / perfektionieren kann für alle aktuellen Browser.

 

[xenon-seven]

Scheinbar interpretieren verschiedene Browser CSS unterschiedlich. Du solltest das also nicht unbedingt in den cascading style stetes festlegen.

 

[Sparta8]

Deine IDs sind komisch gesetzt.

<h2 class="elementor-heading-title elementor-size-default">
    <a id="oaching"></a>
    Coaching
    <a class="azwei" id="Coaching"></a>
</h2>

Du hast zwei leere a-Tags. Der zweite a-Tag hat die richtige ID. Über die css Klasse "azwei" setzt du den a-Tag auf top: -125px; und visability: hidden;.

Du brauchst die a-Tags doch gar nicht. Die ID kannst du auch direkt an die Überschrift h2 vergeben.

 

[ScoutX]

Über die Klasse azwei spreche ich meine CSS an, von der ich spreche z. B. die erwähnte azwei.

a.azwei {
    display: block;
    position: relative;
    top: -125px;
    visibility: hidden;
    }

Offtopic: Ich brauche 2 Ids, da das Mobile Menu (das dritte Menu, welches erst einmal nicht relvant ist) nur unter Chrome bei gesetzter Klasse nicht klickbar ist, somit nur ID brauchbar.

Diese Seite ist mit Elementor erzeugt, dem wohl bekanntesten WP- Wysiwyg Baukasten. Nachteil: H2 Elementen manuell eine ID zu geben, kann leider zum Absturz des Plugins führen, da div / Container als eine Art Widget geladen werden. Elementor --> Erweitert bei Überschriften --> eigene ID: Kann man setzen. Die CSS bzw die Klasse, die der ID zugewiesen wird, wird aber von den meisten Browsern dann wieder ignoriert.
Die Webseite wird später nicht von mir geführt; Elementor ist notwendig für den User.

@Sparta8
Ich mein den Header Bereich (https://wiki.selfhtml.org/wiki/HTML/Seitenstrukturierung/header)

Edit: Nach ein paar Tagen und einem Elementor Update und einer weiteren wichtigen Veränderungen in einem weiteren Plugin geht folgendes:

.desk::before {
  display: block;
  content: " ";
  margin-top: -125px;
  height: 125px;
  visibility: hidden;
  pointer-events: none;
}

.mob::before{
  display: block;
  content: " ";
  margin-top: -90px;
  height: 90px;
  visibility: hidden;
  pointer-events: none;
}

Die Klassen der Überschriften konnten nun über Elementor gesetzt werden. Zudem habe ich einen weiteren Trick verwandt. Es existieren jeweils zwei "selbe" Überschriften direkt untereinander , die je nach Auflösung angezeigt werden oder nicht und entsprechend mit der Klasse versehen sind, die den richtigen Offset enthält. Damit konnte ich auch das Problem der unterschiedlichen Headerhöhen und Platzierung der Sprungmarken lösen. Die ::before CSS scheint die einzig brauchbare zu sein, auf allen Browsern exakte Sprünge bei Wordpress mit Elementor zu setzen.