1. Herzlich willkommen bei WPDE.org, dem grössten und ältesten deutschsprachigen Community-Forum rund um das Thema WordPress. Du musst angemeldet oder registriert sein, um Beiträge verfassen zu können.
    Information ausblenden

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

Dieses Thema im Forum "Design" wurde erstellt von SpeedyBP, 15. Januar 2019.

  1. SpeedyBP

    SpeedyBP Member

    Registriert seit:
    11. September 2012
    Beiträge:
    24
    Zustimmungen:
    0
    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

    [​IMG]

    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.

    [​IMG]

    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
     
  2. Henk1060

    Henk1060 Well-Known Member

    Registriert seit:
    4. September 2014
    Beiträge:
    3.172
    Zustimmungen:
    221
    hy,

    sieh so aus als hättest du
    #header { max-height: 200px;
    }

    angepasst.
    oder eingetragen
     
  3. SpeedyBP

    SpeedyBP Member

    Registriert seit:
    11. September 2012
    Beiträge:
    24
    Zustimmungen:
    0
    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;
    }
     
  4. Henk1060

    Henk1060 Well-Known Member

    Registriert seit:
    4. September 2014
    Beiträge:
    3.172
    Zustimmungen:
    221
    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*
     
  5. SpeedyBP

    SpeedyBP Member

    Registriert seit:
    11. September 2012
    Beiträge:
    24
    Zustimmungen:
    0
    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>
     
  6. Henk1060

    Henk1060 Well-Known Member

    Registriert seit:
    4. September 2014
    Beiträge:
    3.172
    Zustimmungen:
    221
    dann kommt es aus einen header widget oder von diesen Slider dings ;)
     
  7. SpeedyBP

    SpeedyBP Member

    Registriert seit:
    11. September 2012
    Beiträge:
    24
    Zustimmungen:
    0
    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.
     
  8. Henk1060

    Henk1060 Well-Known Member

    Registriert seit:
    4. September 2014
    Beiträge:
    3.172
    Zustimmungen:
    221
    bin gerade mal die Doku überflogen.
    Der Meta slider sollte ja gar nicht dort sein wo der aktuell ist.

    Dort ist nur ein header bild vorgesehen, deshalb wird der img tag ausgeben.
    http://docs.graphene-theme.com/Slider_options
     
  9. SpeedyBP

    SpeedyBP Member

    Registriert seit:
    11. September 2012
    Beiträge:
    24
    Zustimmungen:
    0
    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?.
     
  10. Henk1060

    Henk1060 Well-Known Member

    Registriert seit:
    4. September 2014
    Beiträge:
    3.172
    Zustimmungen:
    221
    Jeder Browser tickt anders.
     
  11. b3317133

    b3317133 Well-Known Member

    Registriert seit:
    21. November 2014
    Beiträge:
    7.666
    Zustimmungen:
    802
    Weil jeder Browser anders auf das fehlerhafte HTML <img src="" alt="" title="" /> 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:
    Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!
     
  12. SEpp55

    SEpp55 Well-Known Member

    Registriert seit:
    3. Februar 2016
    Beiträge:
    2.326
    Zustimmungen:
    354
    @Henk1060 - das stimmt so nicht ganz.. Das Theme bietet ein Headerwidget im Customizer an.
    upload_2019-1-15_18-17-26.png

    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 ;)
    upload_2019-1-15_18-25-12.png

    Nun hat unser Biker das "flex-control-paging" offensichtlich weg rationalisiert und die Webseiteninfo deaktiviert.
    upload_2019-1-15_18-42-38.png

    PS @b3317133 - thats it ;)
     
  13. SpeedyBP

    SpeedyBP Member

    Registriert seit:
    11. September 2012
    Beiträge:
    24
    Zustimmungen:
    0
    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:

    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
     
  14. b3317133

    b3317133 Well-Known Member

    Registriert seit:
    21. November 2014
    Beiträge:
    7.666
    Zustimmungen:
    802
    Vermutlich ein logischer Fehler im Theme in graphene_header_image() oder graphene_get_image_html(), der zu einer fehlerhaften Ausgabe führt.

    Du kannst mal testweise in der Datei wp-content/themes/graphene/functions.php die Zeile 91
    Code:
    Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!
    ersetzen durch
    Code:
    Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!
    und dann im Quelltext im Browser nachschauen, ob dort statt
    Code:
    Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!
    dann das hier erscheint
    Code:
    Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!
    So oder ähnlich könnte man die Stelle identifizieren und dann eine entspr. Abfrage bzw. einen Bugfix für das Theme erstellen.
     
  15. SpeedyBP

    SpeedyBP Member

    Registriert seit:
    11. September 2012
    Beiträge:
    24
    Zustimmungen:
    0
    Hallo b3317133,

    meine functions.php hat aber nur 55 Zeilen und der von dir genannte Code ist da auch nicht zu finden.

    Soll ich den Inhalt der functions.php mal hier posten?
     
  16. b3317133

    b3317133 Well-Known Member

    Registriert seit:
    21. November 2014
    Beiträge:
    7.666
    Zustimmungen:
    802
    Habe nochmal geschaut, die Stelle ist in der Datei wp-content/themes/graphene/inc/functions.php in Zeile 91
     
  17. SpeedyBP

    SpeedyBP Member

    Registriert seit:
    11. September 2012
    Beiträge:
    24
    Zustimmungen:
    0
    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.
     
  18. b3317133

    b3317133 Well-Known Member

    Registriert seit:
    21. November 2014
    Beiträge:
    7.666
    Zustimmungen:
    802
    Würde mal folgendes versuchen, um das weiter einzugrenzen:

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

    Vorher:
    Code:
    Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!
    Nachher:
    Code:
    Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!
    Erscheint dann noch die <img test="1" ... Zeile im HTML Code?
     
  19. SpeedyBP

    SpeedyBP Member

    Registriert seit:
    11. September 2012
    Beiträge:
    24
    Zustimmungen:
    0
    Nein, der Code <img test="1" src="" alt="" title="" /> erscheint dann nicht mehr im Seitenquelltext.

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

    SpeedyBP Member

    Registriert seit:
    11. September 2012
    Beiträge:
    24
    Zustimmungen:
    0
    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?
     
  1. Diese Seite verwendet Cookies, um Inhalte zu personalisieren, diese deiner Erfahrung anzupassen und dich nach der Registrierung angemeldet zu halten.
    Wenn du dich weiterhin auf dieser Seite aufhältst, akzeptierst du unseren Einsatz von Cookies.
    Information ausblenden
  1. Diese Seite verwendet Cookies, um Inhalte zu personalisieren, diese deiner Erfahrung anzupassen und dich nach der Registrierung angemeldet zu halten.
    Wenn du dich weiterhin auf dieser Seite aufhältst, akzeptierst du unseren Einsatz von Cookies.
    Information ausblenden