CSS Anzeigefehler bei Update von 3.5.35 auf 4.9.16

Hallo zusammen,

wir haben in den letzten Tagen ein Projekt von Contao 3.5 auf 4.9 geupgradet. Nun haben wir ein Kuriosum, dass einige wenige CSS Klassen scheinbar nicht richtig funktionieren. Genau haben wir von 3.5.35 auf 4.9.16 aktualisiert. Es wurden alle Daten, Datenbandk etc wieder in die neue Installation hochgeladen und das Installtool durchlaufen lassen.
Zum Beispiel sieht die Navigation wird zwar per CCS angepasst, aber scheinbar entgegengesetzt. Beim Kontaktformular wird das Absende-Feld anders angezeigt und die SPAM-Schutz
Schaltfläche gar nicht, wobei wir diese eh entfernen wollen.
Ich hatte allerdings hier in der Community gestern gelesen, man soll erst auf die 3.5.40 und dann auf Version 4 updaten. Könnte das die Ursache sein? Das Projekt ist unter: ferienwohnung-loebau.de, die Aktualisierung unter neu.ferienwohnung-loebau.de erreichbar.

Hat jemand ein Tipp?

Gruß Olli

Bei den Selektoren in der Navigation ist "span" durch "strong" zu ersetzen

Moin,

bei einigen Elementen hat sich in Contao 4 das Markup etwas geändert. Du musst Dein CSS entsprechend anpassen.

Deine Navigation in Contao 3:

HTML-Code:

---

<nav class="mod_navigation nav-collapse block">
  <a href="kontakt.html#skipNavigation200" class="invisible">Navigation überspringen</a>
  <ul class="level_1">
    <li class="submenu sibling first"><a href="ferienwohnung-i.html" title="Fewo I" class="submenu sibling first" aria-haspopup="true">Fewo I</a>
      <ul class="level_2">
        <li class="first last"><a href="belegung-fewo1.html" title="Belegung Ferienwohnung I" class="first last">Belegung</a></li>
      </ul>
    </li>
    <li class="submenu sibling"><a href="ferienwohnung-ii.html" title="Fewo II" class="submenu sibling" aria-haspopup="true">Fewo II</a>
      <ul class="level_2">
        <li class="first last"><a href="belegung-fewo2.html" title="Belegung Ferienwohnung II" class="first last">Belegung</a></li>
      </ul>
    </li>
    <li class="sibling"><a href="umgebung.html" title="Umgebung" class="sibling">Umgebung</a></li>
    <li class="sibling"><a href="buchungsanfrage.html" title="Buchungsanfrage" class="sibling">Buchungsanfrage</a></li>
    <li class="active last"><span class="active last">Kontakt</span></li>
  </ul>
  <a id="skipNavigation200" class="invisible">&nbsp;</a>
</nav>

---

Und in Contao 4

HTML-Code:

---

<nav class="mod_navigation nav-collapse block" itemscope="" itemtype="http://schema.org/SiteNavigationElement">
  <a href="kontakt.html#skipNavigation200" class="invisible">Navigation überspringen</a>
  <ul class="level_1">
    <li class="submenu sibling first"><a href="ferienwohnung-i.html" title="Fewo I" class="submenu sibling first" aria-haspopup="true" itemprop="url"><span itemprop="name">Fewo I</span></a>
      <ul class="level_2">
        <li class="first last"><a href="belegung-fewo1.html" title="Belegung Ferienwohnung I" class="first last" itemprop="url"><span itemprop="name">Belegung</span></a></li>
      </ul>
    </li>
    <li class="submenu sibling"><a href="ferienwohnung-ii.html" title="Fewo II" class="submenu sibling" aria-haspopup="true" itemprop="url"><span itemprop="name">Fewo II</span></a>
      <ul class="level_2">
        <li class="first last"><a href="belegung-fewo2.html" title="Belegung Ferienwohnung II" class="first last" itemprop="url"><span itemprop="name">Belegung</span></a></li>
      </ul>
    </li>
    <li class="sibling"><a href="umgebung.html" title="Umgebung" class="sibling" itemprop="url"><span itemprop="name">Umgebung</span></a></li>
    <li class="sibling"><a href="buchungsanfrage.html" title="Buchungsanfrage" class="sibling" itemprop="url"><span itemprop="name">Buchungsanfrage</span></a></li>
    <li class="active last"><strong class="active last" itemprop="name">Kontakt</strong></li>
  </ul>
  <a id="skipNavigation200" class="invisible">&nbsp;</a>
</nav>

---

Da sind für nicht aktive Navigationspunkte span-Tags dazugekommen, und beim aktiven Punkt wurde aus dem span ein strong Tag.

Beim Formular sieht es ähnlich aus. Der Absendebutton ist in Contao 3 noch ein input Element, in Contao 4 ein button Element.

Und der Spamschutz funktioniert anders in Contao 4. Der ist immer noch da, aber standardmäßig auf "display:none" gesetzt. Das ist jetzt ein Honeypot.

Gruß
Mathias

Hallo zusammen,

habe das Projekt ein wenig aus dem Auge verloren. Nun habe ich die Seite komplett angepasst und es läuft alles. Danke euch für die Hilfe.

Das Mobile Menü ist aktuell eine Quicknavigation. Welche Mobille NAvigation würdet Ihr empfehlen mit den "3 Balken"?

Das kommt darauf an. Das Hamburger Menü ist sicher am weitesten verbreitet.