Darstellungsproblem bei <button mit Bild

[eagle275]

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:

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* ..

[Kropff]

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:

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"?

[AmicaNoctis]

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

[eagle275]

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

[wahsaga]

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.

[eagle275]

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