Darstellungsproblem bei <button mit Bild

Einklappen
X
 
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • Darstellungsproblem bei <button mit Bild

    so, hab mal wieder eine Stelle erreicht, wo mir irgendwie die Kombination aus CSS und Browsertücke die Darstellung vermiest ...

    ich habe eine Liste von Buttons, die jeweils ein Bild bekommen sollen. Nach eingehender Lektüre von Fachliteratur hab ich mich für die Html 4 Variante <button entschieden und folgendes erstellt:

    HTML-Code:
    button.todo {
            border-top: 1px solid #A1A1A1;
            border-left: 1px solid #A1A1A1;
            border-right: 1px solid #000000;
            border-bottom: 1px solid #000000;
            padding-left: 0px;
            padding-top: 0px;
            color: #003B69;
            width: 18px;
            height: 18px;
    }
    
    ......
    <button class="todo" type="submit" name="btn1" value="2" >
    <img src="./img/question.jpeg" width="16" height="16" border="0" />
    </button>
    soweit klappt das auch, der Button liefert den erwarteten Post-wert usw - aber das Bild, dass nach meiner Mathematik exakt innerhalb des 1 px breiten Borders der Klick-Fläche liegen müsste, ist seltsam verschoben .. ca 1 px nach unten und 2 oder 3 px nach rechts.. da die Schaltfläche nicht größer sein KANN und obendrein die Graue Farbe der Schaltfläche einfach mal zum brechen aussieht, stellt sich mir die Frage :

    Wie schieb ich das Bildchen exakt an die Stelle, wo es hingehört ?

    ok, ich hab nochmal ganz genau nachgeschaut .. im IE zeichnet "er" zusätzlich einen 1px breiten Rahmen um das Bildchen, wo die Hintergrund-Farbe des Buttons zu sehen ist .. die hab ich inzwischen im Stylesheet auf #FFFFFF geändert, damit es sich mit dem Hintergrund meines Bildes (zufällig auch weiß) verträgt.. aber der Firefox verschiebt das zusätzlich nach rechts ...

    nach kurzer Beratung haben wir im Team beschlossen, dass der 1px Abstand des IE toleriert wird (macht die Tabelle, wo die Buttons dann zur Anwendung kommen, besser lesbar - ich musste den Buttons nun 20px Breite und Höhe geben ...
    Aber im Firefox ... *kopfschüttel* ..
    Zuletzt geändert von eagle275; 19.08.2010, 19:27.
    [font=Verdana]
    Wer LESEN kann, ist klar im Vorteil!
    [/font]

  • #2
    Zitat von eagle275 Beitrag anzeigen
    so, hab mal wieder eine Stelle erreicht, wo mir irgendwie die Kombination aus CSS und Browsertücke die Darstellung vermiest ...

    ich habe eine Liste von Buttons, die jeweils ein Bild bekommen sollen. Nach eingehender Lektüre von Fachliteratur hab ich mich für die Html 4 Variante <button entschieden und folgendes erstellt:

    HTML-Code:
    button.todo {
            border-top: 1px solid #A1A1A1;
            border-left: 1px solid #A1A1A1;
            border-right: 1px solid #000000;
            border-bottom: 1px solid #000000;
            padding-left: 0px;
            padding-top: 0px;
            color: #003B69;
            width: 18px;
            height: 18px;
    }
    
    ......
    <button class="todo" type="submit" name="btn1" value="2" >
    <img src="./img/question.jpeg" width="16" height="16" border="0" />
    </button>
    soweit klappt das auch, der Button liefert den erwarteten Post-wert usw - aber das Bild, dass nach meiner Mathematik exakt innerhalb des 1 px breiten Borders der Klick-Fläche liegen müsste, ist seltsam verschoben .. ca 1 px nach unten und 2 oder 3 px nach rechts.. da die Schaltfläche nicht größer sein KANN und obendrein die Graue Farbe der Schaltfläche einfach mal zum brechen aussieht, stellt sich mir die Frage :

    Wie schieb ich das Bildchen exakt an die Stelle, wo es hingehört ?

    Hm - vielleicht ist der Hinweis auf Browsertücke irreführend .. es sieht ausnahmsweise sowohl im IE6 (den muss ich unterstützen) als auch im FF (3.6 oder so) exakt gleich aus ....
    Mach erst mal ein richtiges padding: 0. Vielleicht liegt es daran. Ansonsten gibt du dem Bild ein negatives margin.

    Peter

    PS. Warum kein input type="image"?
    Nukular, das Wort ist N-u-k-u-l-a-r (Homer Simpson)
    Meine Seite

    Kommentar


    • #3
      Hallo,

      neben padding: 0 (wie Peter schon sagte) für den Button solltest du auch für das Bild selbst border: 0 none transparent; setzen.

      Gruß,

      Amica
      [COLOR="DarkSlateGray"]Hast du die [COLOR="DarkSlateGray"]Grundlagen zur Fehlersuche[/color] gelesen? Hast du Code-Tags benutzt?
      Hast du als URL oder Domain-Beispiele example.com, example.net oder example.org benutzt?
      Super, danke!
      [/COLOR]

      Kommentar


      • #4
        danke für eure Tipps ...

        das mit dem Border fürs Bild hab ich gemacht - NULL Wirkung - aber wenigstens ändert sich die Darstellung nicht .. negatives Margin-Left hab ich auch probiert .. da hab ich keinen Unterschied gesehen .. ich probier jetzt nochmal eure Vorschläge bezüglich padding: 0 statt 0px 0px

        Und input type=image .... da krieg ich sehr merkwürdige Post-Daten ... es macht wenig Spass den betreffenden Button herauszufinden, wenn ich als einziges den Namen und die Koordinaten (jedenfalls irgendwelche Werte ala <name>.x <name.y kriege ..

        zumindest dann nicht, wenn in der Tabelle mal 100 Buttons stehen


        auch padding: 0; ändert nix ...

        und Firefox mit negativen margin... macht der das überhaupt? JAWOLL der macht es ..

        Danke euch - nu muss ich nur noch dafür sorgen, dass die beiden Browser jeweils die "richtige" Variante vorgesetzt bekommen und es haut hin
        Zuletzt geändert von eagle275; 19.08.2010, 19:44.
        [font=Verdana]
        Wer LESEN kann, ist klar im Vorteil!
        [/font]

        Kommentar


        • #5
          Zitat von eagle275 Beitrag anzeigen
          Und input type=image .... da krieg ich sehr merkwürdige Post-Daten ... es macht wenig Spass den betreffenden Button herauszufinden, wenn ich als einziges den Namen und die Koordinaten (jedenfalls irgendwelche Werte ala <name>.x <name.y kriege ..
          Na dann teste das mit dem Button aber mal gründlich in älteren IE-Versionen, da gibt es damit noch ganz andere Probleme.
          I don't believe in rebirth. Actually, I never did in my whole lives.

          Kommentar


          • #6
            ja , hab ich auch gemerkt .. und damit wieder zu input type="image" zurückgekehrt ...

            damit überträgt leider keiner der Browser ein schönes $_POST[name]=value ...

            aber das hab ich inzwischen auch gelöst
            [font=Verdana]
            Wer LESEN kann, ist klar im Vorteil!
            [/font]

            Kommentar

            Lädt...
            X