Mouseover-Buttons in Firefox/IE

[Mark]

Hallo,

ich habe gemäß des Tipps "Mouseover-Buttons und -Effekte mit CSS" Mouseover-Buttons mit Hintergrundbildern erstellt und nun immer noch ein Problem.

Mein CSS sieht so aus:

a.buttonleft{
 height: 30px;
 width: 130px;
 font-family: Arial, Helvetica, sans-serif;
 font-size: 12;
 color: #FFFFFF;
 text-decoration: none;
 text-align: left;
 background-image: url(./pics/bgleft.gif);
 background-repeat: no-repeat;
 background-position: 0px 0px;
 display:block;
 text-indent: 15px;

}

HTML:

<a href="index.php" class="buttonleft">Aktuelles</a>
<a href="index.php" class="buttonleft">Aktuelles2</a>

Das wird im FireFox und im IE 6 korrekt angezeigt.
Nun möchte ich aber, dass der Text, der in dem Link steht, vertikal zentriert wird. Eingerückt habe ich ihn ja schon.

Wenn ich das mit "padding:" versuche, klappt es im IE, im Firefox sind dann aber nicht nur die Texte vertikal zentriert, sondern die untereinander liegenden Buttons haben einen gewissen vertikalen Abstand.

Wie bekomm ich das denn hin?

[Stefano Albrecht]

Hallo Mark ;~)

hast Du es schon mit margin-top:auto; und margin-bottom:auto; versucht?

Freundliche Grüße
Stefano Albrecht

[Mark]

Hallo Mark ;~)

hast Du es schon mit margin-top:auto; und margin-bottom:auto; versucht?

So gehts leider auch nicht:
Gleiches Ergebnis auch mit "margin... auto". Im IE gehts, im Firefox ist wieder der Abstand.:(

Was mach ich denn da?

a.buttonleft{
 height: 30px;
 width: 130px;
 font-family: Arial, Helvetica, sans-serif;
 font-size: 12;
 color: #FFFFFF;
 text-decoration: none;
 text-align: left;
 background-image: url(./pics/bgleft.gif);
 background-repeat: no-repeat;
 background-position: 0px 0px;
 display:block;
 text-indent: 15px;
 margin-top:auto;
 margin-bottom:auto;
 padding: 5;

}

[wahsaga]

hi,

Nun möchte ich aber, dass der Text, der in dem Link steht, vertikal zentriert wird.

Dann setze noch zusätzlich line-height auf den (fast) gleichen Wert wie height.

Sei dir aber im klaren, dass das bei Schriftgradänderung durch den User auseinanderfallen wird, so lange du absolute Maßeinheiten wie px verwendest.

gruß,
wahsaga

[Mark]

Dann setze noch zusätzlich line-height auf den (fast) gleichen Wert wie height.

So das ging! Danke!