dave: Firefox - Button mit Pseudo-Element

Hi,

ich habe ein Problem.

Im Firefox wird mir beim button-Element der Text angezeigt.
Warum?

Bei anderen Elementen passiert was ich erwarte, nämlich das der Text nicht sichtbar ist.

Im IE 10 wird der Text auch beim button-Element nicht angezeigt.

~dave

  1. Hallo Dave!

    ich habe ein Problem.

    Ich auch ... ;-)

    Im Firefox wird mir beim button-Element der Text angezeigt.
    Warum?

    Bei anderen Elementen passiert was ich erwarte, nämlich das der Text nicht sichtbar ist.

    Im IE 10 wird der Text auch beim button-Element nicht angezeigt.

    Ehrlich gesagt verstehe ich deine Absicht/ Intention nicht.

    Ich habe es bisher zumindest immer als enormen Vorteil von Buttons angesehen, dass man sie "beschriften" kann. Das verbessert imho nämlich die Usability.

    Aber wenn du einen Button ohne Beschriftung haben willst, dann gib' ihm doch keine (im HTML).

    Und auch was du mit den Pseudoelementen eigentlich erreichen willst, erschließt sich mir nicht.
    Das CSS aus deinem Beispiel verwendest du so hoffentlich auch nur dafür ...?

    Also vielleicht ist es für alle hier hilfreich, wenn du erstmal beschreibst, was du überhaupt erreichen möchtest?

    Gruß Gunther

    1. Hi,

      geht um image replacement.

      Dann nehm ich halt doch wieder text-indent: -999em her. Bitte verpetzt mich nicht an Gunnar.

      ~dave

      1. Om nah hoo pez nyeetz, dave!

        Dann nehm ich halt doch wieder text-indent: -999em her. Bitte verpetzt mich nicht an Gunnar.

        100 %ig

        Matthias

        --
        Der Unterschied zwischen Java und JavaScript ist größer als der zwischen Pin und Pinneberg.

        1. 100 %ig

          Das dacht ich mir auch, bei Buttons (zumindest unter Firefox) reicht das nicht.
          Beispiel und Lösung
          Und ich vermute mal, dass gilt für alle Elemente die ein padding haben.

          MfG
          bubble

          --
          If "god" had intended us to drink beer, he would have given us stomachs. - David Daye
          1. Hi!

            Das dacht ich mir auch, bei Buttons (zumindest unter Firefox) reicht das nicht.
            Beispiel und Lösung
            Und ich vermute mal, dass gilt für alle Elemente die ein padding haben.

            Das liegt am Browser Default-Stylesheet:

            button, input[type="reset"], input[type="button"], input[type="submit"] {  
                -moz-appearance: button;  
                -moz-binding: none;  
                -moz-box-sizing: border-box;  
                -moz-user-select: none;  
                background-color: buttonface;  
                border: 2px outset buttonface;  
                color: buttontext;  
                cursor: default;  
                font: -moz-button;  
                line-height: normal;  
                padding: 0 6px;  
                text-align: center;  
                text-shadow: none;  
                white-space: pre;  
            }
            

            Gruß Gunther

      2. Hi,

        geht um image replacement.

        sag' das doch gleich. ;-)
        Und wo ist in deinem Fiddle das Image!?

        Das ist ja die IR Variante aus dem HTML5 Boilerplate - dann solltest du sie auch richtig übernehmen:

        .ir {  
            background-color: transparent;  
            border: 0;  
            overflow: hidden;  
            /* IE 6/7 fallback */  
            *text-indent: -9999px;  
        }  
          
        .ir:before {  
            content: "";  
            display: block;  
            width: 0;  
            height: 150%;  
        }
        

        Zu der text-indent Variante hat Matthias ja schon etwas gepostet.

        Gruß Gunther

        1. Hi,

          Und wo ist in deinem Fiddle das Image!?

          Inwiefern spielt das bei meinem Problem eine Rolle?

          Das ist ja die IR Variante aus dem HTML5 Boilerplate - dann solltest du sie auch richtig übernehmen:

          Was hat das mit meiner Frage zu tun?
          Was genau ist bei mir falsch "übernommen"?

          Ich fühle mich von deinem Post gerade irgendwa unnötig schwach von der Seite angesprochen. Ich denke das interpretiere ich falsch.
          Ich finde in deinem Post allerdings auch nichts wirklich weiterführendes.

          ~dave

          1. Hi!

            Ich fühle mich von deinem Post gerade irgendwa unnötig schwach von der Seite angesprochen. Ich denke das interpretiere ich falsch.

            Und ich habe mich von deinem Posting "leicht verarscht" gefühlt, denn du enthälst hier Informationen vor (sowohl in deinem Posting, als auch in deinem Fiddle), die für Helfende durchaus sehr hilfreich wären. Als Grund vermutet man dann sehr schnell "Faulheit & Bequemlichkeit" als Ursache beim Fragesteller.

            Gruß Gunther

            1. Om nah hoo pez nyeetz, Gunther!

              Und ich habe mich von deinem Posting "leicht verarscht" gefühlt, denn du enthälst hier Informationen vor (sowohl in deinem Posting, als auch in deinem Fiddle), die für Helfende durchaus sehr hilfreich wären. Als Grund vermutet man dann sehr schnell "Faulheit & Bequemlichkeit" als Ursache beim Fragesteller.

              Das sehe ich anders. Ich habe mich zwar auch gewundert, warum man den Text auf so komplizierte Weise verschwinden lassen möchte, aber die Problembeschreibung war vorbildlich.

              • Das hab ich gemacht.
              • Das hab ich erwartet.
              • Aber das passiert.
              • Und zwar nur, wenn ...

              dave for president!

              Matthias

              --
              Der Unterschied zwischen Java und JavaScript ist größer als der zwischen Reif und Reifrock.

              1. Om nah hoo pez nyeetz, Matthias!

                Das sehe ich anders. Ich habe mich zwar auch gewundert, warum man den Text auf so komplizierte Weise verschwinden lassen möchte, aber die Problembeschreibung war vorbildlich.

                • Das hab ich gemacht.
                • Das hab ich erwartet.
                • Aber das passiert.
                • Und zwar nur, wenn ...

                dave for president!

                Das sehe ich anders. :-P

                Das Ausgangsposting lautete wiefolgt:

                Im Firefox wird mir beim button-Element der Text angezeigt.
                Warum?
                Bei anderen Elementen passiert was ich erwarte, nämlich das der Text nicht sichtbar ist.
                Im IE 10 wird der Text auch beim button-Element nicht angezeigt.

                Da fehlt bspw. schon der äußerst relevante Begriff "Image Replacement".
                Denn "Text nicht sichtbar" kann man sehr einfach durch 'display: none' erreichen.

                Und wenn man sich (völlig legitim) bestimmter Techniken aus anderen Werken bedient, könnte eine kurze Erwähnung zumindest nicht schaden.

                Dass der OP dies mangels Wissen nicht gleich hätte schreiben können, ist hier auch nicht gegeben.

                Aber inzwischen hat er ja die "Lösung" für sein Problem erhalten, weshalb ich mich dann über sein Posting "geärgert" habe - was ich ansonsten für mich behalte.

                "Natürlich" hätte man die Intention des OPs auch gleich erahnen können - hab' ich aber nicht. Und du ja offensichtlich auch nicht ... ;-)

                Gruß Gunther

                1. Hi,

                  ich habe image replacement bewusst nicht zu Beginn erwähnt da sonst nur alternative Möglichkeiten aufgezählt werden würden. Da kenne ich selber genug.

                  Ich hatte gehofft es gäbe für diesen Bug, der an sich rein gar nichts mit image replacement zu tun hat, evtl. einen workaround. Der hätte mich interessiert.
                  Deshalb die Frage, warum sich der Firefox so verhält.

                  Meine Intention ist nur interessant wenn du mir alternative Wege zeigen möchtest. Ich habe kein Interesse daran, einen alternativen Weg zu sehen. Den suche ich mir schon selbst.
                  Ich möchte nur wissen warum sich Browser so verhalten wie sie es tun. Deshalb meine Frage.

                  Du hast die drei Fragen aus meinem letzten Posting nicht beantwortet. Das ist Schade.
                  Dann hier noch ein paar Fragen, die du ignorieren kannst:
                  Wenn ich erklärt hätte dass es mir um image replacement geht, was hättest du geantwortet?
                  Welche Rolle spielt es ob bei html5boilerplate die selbe Technik verwendet wird? Und soll ich jetzt alle Projekte raussuchen bei denen diese Technik zum Einsatz kommt?

                  Ich bin dann auf jeden Fall die nächste Zeit wieder nur lesend unterwegs.

                  ~dave

                  1. Om nah hoo pez nyeetz, dave!

                    Ich bin dann auf jeden Fall die nächste Zeit wieder nur lesend unterwegs.

                    was sehr schade wäre.

                    Matthias

                    --
                    Der Unterschied zwischen Java und JavaScript ist größer als der zwischen NOS und Nostalgie.

                  2. Hi Dave!

                    ich habe image replacement bewusst nicht zu Beginn erwähnt da sonst nur alternative Möglichkeiten aufgezählt werden würden.

                    Wie kommst du denn darauf!?
                    Und wenn du nicht an solchen Alternativen interessiert bist, reicht doch eine kurze Aussage diesbezüglich.

                    Ich hatte gehofft es gäbe für diesen Bug, der an sich rein gar nichts mit image replacement zu tun hat, evtl. einen workaround. Der hätte mich interessiert.
                    Deshalb die Frage, warum sich der Firefox so verhält.

                    Imho ist das kein Bug, denn der Grund liegt im Browser Default-Stylesheet und der Browser verhält sich absolut regelkonform.

                    Meine Intention ist nur interessant wenn du mir alternative Wege zeigen möchtest.

                    Nein, was jemand beabsichtigt zu erreichen mit seinem Code ist durchaus äußerst hilfreich für eine Suche nach möglichen "Fehlern".

                    Ich habe kein Interesse daran, einen alternativen Weg zu sehen. Den suche ich mir schon selbst.

                    Wow, coole Einstellung. Aber gut zu wissen, damit man sich ggf. in Zukunft die Mühe sparen kann.

                    Ich möchte nur wissen warum sich Browser so verhalten wie sie es tun. Deshalb meine Frage.

                    Dagegen ist doch auch gar nichts einzuwenden. Aber "pampige" Antworten zu verfassen, wenn jemand, der durchaus gewillt ist, dir bei deinem "Problem" zu helfen, moniert, dass du einige Informationen hättest auch direkt schreiben können, stößt bei mir halt auch nur sehr begrenzt auf Verständnis. Denn immerhin habe ich so "unnötig" Zeit mit der Sache verbracht.

                    Du hast die drei Fragen aus meinem letzten Posting nicht beantwortet. Das ist Schade.

                    Du hast doch in diesem Thread mittlerweile die Antwort auf deine Frage erhalten. Was willst du denn noch?

                    Dann hier noch ein paar Fragen, die du ignorieren kannst:
                    Wenn ich erklärt hätte dass es mir um image replacement geht, was hättest du geantwortet?

                    Woher soll ich das wissen. Aber dann hätte ich gleich "in die richtigen Richtung" überlegen können.

                    Welche Rolle spielt es ob bei html5boilerplate die selbe Technik verwendet wird?

                    Weil man bei solch häufig verwendeten "Techniken" meist nicht der Erste und Einzige ist, der dabei über gewisse Dinge "stolpert".

                    Und soll ich jetzt alle Projekte raussuchen bei denen diese Technik zum Einsatz kommt?

                    Nein, hat doch keiner gesagt. Aber du gestehst mir zu, dass ich es zumindest für unwahrscheinlich halte, dass dir das genau so ganz von alleine eingefallen ist?

                    Ich bin dann auf jeden Fall die nächste Zeit wieder nur lesend unterwegs.

                    Das bleibt ja dir überlassen.

                    Gruß Gunther

  2. Om nah hoo pez nyeetz, dave!

    Warum?

    Tja, Formularelemente sind halt anders.

    Ich kann weder eine Begründung noch einen Fix anbieten, aber wir hatten schon mehrfach Beiträge, bei denen es um unerwüschtes Verhalten von Formularelementen ging.

    Matthias

    --
    Der Unterschied zwischen Java und JavaScript ist größer als der zwischen Grat und Gratifikation.