<div><button><img> -> Position des Bildes anpassen

acquire

acquire

Mitglied
Hallo zusammen,

am folgendem Problem sitze ich seit einigen Tagen.

Ich habe einen selbstgestalteten Button durch ein div und ein button-Tag, bei dem das div das Hintergrundbild liefert und der Button die linke Hälfte des Hintergrundes (damit verschiedene Buttongrößen möglich sind).
Im button-Tag habe ich neben den Buttontext auch noch ein img-Tag. Das img-Tag muss ich auf vertical-align:middle; stellen, damit der Buttontext mittig angeordnet ist. Einstellungen auf das IMG-Tag wirken kurioser Weise immer für alle Inhalte im button-Tag.
Im Firefox 3 ist das Bild leider nicht mittig positioniert. Nun möchte ich das Bild genauso mittig wie den Text - in allen Browsern. Und das ohne browserspezifische Hacks und den Anmerkungen in der HTML-Datei.

Bitte den folgenden HTML-Code in zusammen mit den Bildern aus dem Anhang in einer Datei speichern. Dann könnt ihr das Problem nachvollziehen.
HTML: 
<?xml version="1.1" encoding="utf-8"?>
<!DOCTYPE html
     PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <style>
div.button {height:18px; line-height:18px; background:url(button-right.gif) right no-repeat; width:auto; float:left; cursor:pointer !important;}
 div.button button {height:18px; line-height:18px; background:url(button-left.gif) left  no-repeat; color:#8bb1d8; font-weight:bold; border:none; overflow:visible; display:inline; margin:0px; padding:0px 4px 2px 4px; cursor:pointer !important;}
 div.button button img {vertical-align:middle;}
  </style>
  </head>
  <body style="background-color: #ddd;">
Problem: im IE 7 ok, im Firefox 3 ist das Bild zu weit unten.<br>
<div class="button"><button><img src="tick.png" alt="" /> Login</button></div>
<br>Wenn div.button button img {position:absolute;}, dann ist die Position gut beim Bild, beim Text jedoch nicht mehr.<br>
Ich habe schon ewig herumprobiert, Einstellungen auf das IMG-tag wirken auf den ganzen Button-Inhalt (Text aus). Und mit einem SPAN oder DIV Tag um den Text/das Bild ist es nicht getan...<br>
Da nicht bei jedem Button ein Bild hinterlegt wird, kann ich nicht einfach sagen, dass ich das Bild absolut positioniere und dann über paddings o.ä. den Button-Text verschiebe, da bei fehlendem Bild die Verschiebung bliebe.
  </body>
</html>
Ich hoffe es weiß jemand Rat, wo der Haken steckt.

Ich freue mich auf Rat und Tat!

Gruß, acquire
 
Zuletzt bearbeitet:
Hi,

es wird wohl mit den Angaben zur jeweiligen Elementhöhe (div und button), sowie der assymetrischen padding:0px 4px 2px 4px-Deklaration in der Vertikalen für das button-Element zusammenhängen, dass der Text darin nicht in der vertikalen Mitte erscheint, denn mit deinen vorgestellten CSS-Regeln besitzt der Button eine tatsächliche Boxenhöhe von 20px (height:18px + padding-bottom:2px), das umschliessende DIV aber nur 18px, und die Grafikdatei "tick.png" selbst blos 16px.

mfg Maik
 
Vielen Dank für die ausgezeichnete Erklärung.
Ich habe folgeden Änderung:
HTML: 
 div.button button {height:18px; line-height:18px; background:url(button-left.gif) left  no-repeat; color:#8bb1d8; font-weight:bold; border:none; overflow:visible; display:inline; margin:0px; padding:0px 4px; cursor:pointer !important;}
 div.button button img {padding:2px 0; vertical-align:middle;}

Leider weiß ich jetzt wieder warum ich das padding-bottom 2px hatte: Ansonsten ist die Schrift beim Buchstaben "g" mit einem Pixel auf dem Rand.
Bei der aktuellen Einstellung ist der gesamte Buttoninhalt zwei Pixel zu tief. Wie kriege ich die nun korrekt nach oben, ohne das wieder nur der Text oder das Bild korrekt positioniert sind?
 
Zuletzt bearbeitet:
Hi,

ich hab mir das Ganze nochmal in Ruhe angeschaut, auch mal ohne CSS-Formatierung für <button><img ...></button>, und komme zu dem Schluß, dass du hier stattdessen mit <input type="image" src="tick.png"> (Grafische Buttons zum Absenden definieren) bedeutend besser aufgestellt bist :-)

mfg Maik
 
Danke, dass du dir die Mühe gemacht hast.
Ich werde deinem Rat folgen.

//edit

Das Problem mit dem Input Type Image ist nur, dass der Value, dem ich den zuordne nicht im Button nach dem Bild ausgegeben wird. Der Value wird gar nicht ausgegeben. Ich brauche aber diese Beschriftung!
 
Von welchem "Value" sprichst du? Etwa dem "Login"?

Den kannst du doch, wie in deinem eingangs gezeigten Codeschnipsel nach dem Grafikelement, ebenso nach dem input-Element ausgeben.

Die Browser-Ansicht (Grafik + Text) unterscheidet sich in beiden Varianten nicht voneinander.

mfg Maik
 
Also<input type="image" src="bg.gif" name="submit" value="Login" />
funktioniert nicht. Da wird nur die Grafik angezeigt, der Text erscheint nicht nach ihr.
 
Moin,

dann stell das Markup um, was die Erzeugung der abgerundeten Box im Hintergrund betrifft, und greif hierauf zurück:

HTML: 
<input type="submit" value="Login" style="background:url(tick.png) no-repeat; padding-left:13px;">

mfg Maik
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück