Theme Graphene - Slideshow im Header um ein paar Pixel nach unten verrutscht - nur bei Firefox nicht

    Hallo,

    ich habe ein etwas komisches Problem, das mich nun einige Tage an Ursache und Lösung finden und rumprobieren gekostet hat. Verzweifelt wende ich mich nun an euch.

    Ich verwende das Theme Graphene für meine Website http://www.kbgw.de

    [Blockierte Grafik: http://www.kbgw.de/wp381/wp-content/uploads/2019/01/Website-in-Firefox.jpg]

    Beim Basteln der Website habe ich zum Testen immer den Browser Firefox verwendet. Die Seite erscheint in Firefox genau so wie ich sie haben möchte. Nun kommt es. Als ich mehr zufällig die Seite mal in Chrome geöffnet habe fiel ich aus allen Wolken. Ich habe über das Header-Widget eine kleine Slideshow in den Header des Themes eingebaut. Diese Slideshow ist in Chrome um einige Pixel nach unten versetzt. Beim Edge-Browser und auf meinem Tablet und auf meinem Handy übrigens auch. Wie gesagt, nur bei Firefox ist alles ok.

    [Blockierte Grafik: http://www.kbgw.de/wp381/wp-content/uploads/2019/01/Website-in-Chrome.jpg]

    Ich habe beim Erstellen der Website ein paar Änderungen an der style.css vorgenommen. Um ausschließen zu können, dass da etwas schief gelaufen ist habe ich das Graphene-Theme auch schon mal komplett neu installiert, ohne Anpassungen. Leider der selbe Fehler.

    Kann mir vielleicht jemand von euch sagen, an was dieses Phänomen liegen könnte? Ich bin, wie gesagt, schon einige Tage am rumprobieren.

    Herzlichen Dank im Voraus.

    SpeedyBP

    • Gerade eben
    • Anzeige

    Hallo!

    Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

    • ✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
    • ✔️ Deutsche Server & DSGVO-konform
    • ✔️ Persönlicher Support (kein 0815-Ticket-System)

    Mehr erfahren

    Hallo Henk1060,

    vielen Dank für deine schnelle Antwort.

    Das soll ja auch so sein. Die Bilder in dem Slider sind 1080 x 200 Pixel groß und damit soll der Header auch so groß sein.

    Du meinst schon die style.css. Da finde ich nämlich nur:

    #header {
    max-height: 250px;
    }

    ah sorry.. musst mir das in firefox ansehen.
    hast du in der der header php was geändert?

    der fehler liegt hier
    <div id="header" class="row">

    <img src="" alt="" title=""> *das ist der fehler*

    Nein ich habe in der header.php nichts geändert.

    Ich füge dir mal den Teil der header.php an, der mit <div id="header" class="row"> beginnt. Vielleicht kannst du mir bitte sagen WO ich da WAS ändern muss. Das was du in deiner Antwort geschrieben hast finde ich nämlich nicht.

    <div id="header" class="row">

    <?php
    if ( ! $graphene_settings['slider_as_header'] ) graphene_header_image();
    else do_action( 'graphene_header_slider' );
    ?>

    <?php graphene_container_wrapper( 'start' ); ?>
    <?php
    if ( ! $graphene_settings['slider_as_header'] && ! is_front_page() && $graphene_settings['link_header_img'] ) {
    echo '<a href="' . apply_filters( 'graphene_header_link' , home_url() ) . '" id="header_img_link" title="' . esc_attr__( 'Go back to the front page', 'graphene' ) . '">&nbsp;</a>';
    }

    /* Header widget area */
    if ( $graphene_settings['enable_header_widget'] && is_active_sidebar( 'header-widget-area' ) ) {
    echo '<div class="header-widget">'; dynamic_sidebar( 'header-widget-area' ); echo '</div>';
    }

    do_action( 'graphene_header' );
    ?>
    <?php graphene_container_wrapper( 'end' ); ?>
    </div>

    Danke nochmal.

    Das komische ist nur, wie schon oben erwähnt, dass im Firefox alles richtig angezeigt wird und bei anderen Browsern nicht.

    Hat vielleicht dazu noch einer eine Idee?

    Ich bin echt am verzweifeln. Ich bin Anfänger und bin echt stolz auf meine Website. War für mich sehr viel Arbeit. Und nun wird sie NUR in Firefox richtig angezeigt. Chrome-Nutzer z.B. sagen, "Das hat er aber schlecht gemacht".

    Bin für jede Hilfe dankbar.

    Da hast du natürlich recht.
    Wenn ich über den Customizer ein Header-Bild einfüge und das Slider-Widget rausnehme, wird das Bild auf allen Browsern richtig angezeigt.
    Warum gibt es dann aber unter Widgets ein Widget Namens "Graphene - Header" und warum funktioniert es im Firefox und bei den anderen nicht?.

    Zitat von SpeedyBP

    und warum funktioniert es im Firefox und bei den anderen nicht?.


    Weil jeder Browser anders auf das fehlerhafte HTML [FONT=Courier New]<img src="" alt="" title="" />[/FONT] reagiert.

    Mit diesem CSS Workaround funktioniert es auch in Chome, eine echte Lösung wäre aber, das fehlerhafte HTML zu korrigieren bzw. zu entfernen.

    Code
    #header > img {
    display: none;
}

    @Henk1060 - das stimmt so nicht ganz.. Das Theme bietet ein Headerwidget im Customizer an.

    Nun das Headerbild deaktivieren den Hachen setzten und das Headerwidget mit dem Shortcode vom Metaslider befüllen und schon gibts da den Slider.
    Aber der Effekt mit dem Zwischenraum zwischen Top-bar und Slider ist in meiner lokalen Testinstallation genau der selbe ;-( Firefox ignoriert die Teile und Edge und Chrome nicht.
    Das ist die Zeile sonst für das Headerbild genutzt wird ;)

    Nun hat unser Biker das "flex-control-paging" offensichtlich weg rationalisiert und die Webseiteninfo deaktiviert.

    PS @b3317133 - thats it ;-)

    nothing is as easy as it looks. --- Wenns gefällt - gibts dafür einen Button ;)
    Manchmal komme ich mir wie eine Suchmaschine vor ....:rolleyes:

    Hallo,

    bin grade erst nach Hause gekommen. Deshalb melde ich mich erst jetzt wieder.

    Also, erst mal vielen, herzlichen Dank für vielen tollen Antworten.

    Ich habe mal die Zeilen:

    #header > img {
    display: none;
    }

    im Customizer unter "Zusätzliches CSS" eingefügt und siehe da, der Slider wird nun auch in Chrome, in Edge, usw. korrekt im Header angezeigt.
    Vielen, vielen Dank b3317133.

    Du schreibst aber auch:

    Zitat

    Mit diesem CSS Workaround funktioniert es auch in Chome, eine echte Lösung wäre aber, das fehlerhafte HTML zu korrigieren bzw. zu entfernen.

    Wenn du mir jetzt noch sagen kannst, in welcher Datei ich wo genau etwas korrigieren bzw. entfernen muss, dann flip ich aus vor lauter Glück.
    Wie gesagt, ich suche schon seit Tagen eine Lösung und dann muss man nur 3 Zeilen CSS eingeben und es funktioniert. :D:D:D

    Vermutlich ein logischer Fehler im Theme in [FONT=Courier New]graphene_header_image()[/FONT] oder [FONT=Courier New]graphene_get_image_html()[/FONT], der zu einer fehlerhaften Ausgabe führt.

    Du kannst mal testweise in der Datei [FONT=Courier New]wp-content/themes/graphene/functions.php[/FONT] die Zeile 91

    Code
    $html = '<img src="' . $image_src_or_id . '" alt="' . $alt . '" title="' . $alt . '" />';

    ersetzen durch

    Code
    $html = '<img test="1" src="' . $image_src_or_id . '" alt="' . $alt . '" title="' . $alt . '" />';

    und dann im Quelltext im Browser nachschauen, ob dort statt

    Code
    <img src="" alt="" title="" />

    dann das hier erscheint

    Code
    <img test="1" src="" alt="" title="" />

    So oder ähnlich könnte man die Stelle identifizieren und dann eine entspr. Abfrage bzw. einen Bugfix für das Theme erstellen.

    Habe deine Anleitung befolgt und im Seitenquelltext steht nun tatsächlich <img test="1" src="" alt="" title="" />

    Das bringt uns zwar ein Stück weiter, aber ich traue mich gar nicht zu fragen ob du mir da weiterhin helfen willst.
    Ich habe nämlich keine Ahnung wie ich eine "entspr. Abfrage bzw. einen Bugfix für das Theme erstellen" soll.

    Ich bin dir nicht böse wenn du nicht mehr willst. Dann lasse ich es halt mit

    #header > img {
    display: none;
    }

    im "Zusätzlichen CSS". Funktioniert ja.

    Würde mal folgendes versuchen, um das weiter einzugrenzen:

    In der Datei [FONT=Courier New]wp-content/themes/graphene/inc/loop.php[/FONT] bei ca. Zeile 1145 in der Funktion [FONT=Courier New]graphene_header_image()[/FONT] eine Zeile [FONT=Courier New]if ( ! $header_img ) return;[/FONT] einfügen:

    Vorher:

    Code
    if ( ! $graphene_settings['slider_as_header'] ) {
       $header_img = graphene_get_header_image( $post_id );
   } else {
       $header_img = get_header_image();
       if ( ! $header_img ) return;


       $alt = get_bloginfo( 'name' );
   }


    Nachher:

    Code
    if ( ! $graphene_settings['slider_as_header'] ) {
       $header_img = graphene_get_header_image( $post_id );
       if ( ! $header_img ) return;
   } else {
       $header_img = get_header_image();
       if ( ! $header_img ) return;


       $alt = get_bloginfo( 'name' );
   }


    Erscheint dann noch die <img test="1" ... Zeile im HTML Code?

    Nein, der Code <img test="1" src="" alt="" title="" /> erscheint dann nicht mehr im Seitenquelltext.

    Der Code <img src="" alt="" title="" /> allerdings auch nicht.

    Hab gerade das "Zusätzliche CSS" rausgenommen und die Seite in Chrome, Edge, etc. aufgerufen. Es wird alles korrekt angezeigt.

    Ich kann es nicht glauben. War es das?

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!

Benutzerkonto erstellen Anmelden