HTML/CSS: Buttons mit Text

[farchris]

Hallo,
ich habe ein Button und möchte mit CSS einen Text auf diesen bekommen.

Hier ist mein CSS-Code:

.button
{
display:inline;
background-image:url(button.png);
padding-top:6px;
width:150px;
height:25px;
font-size:12px;
font-family:Verdana, Arial, sans-serif;
font-weight:bold;
text-decoration:none;
text-align:center;
}

Und hier der HTML-Code:

<a class="button" href="index.html">Startseite</a>

Der Button wird nun allerdings nicht komplett angezeigt, sondern passt sich nach der Größe des Textes an.
Der Button soll allerdings komplett angezeigt werden. Wenn der Text größer als der Button ist, soll der Button aber auch nicht wiederholt werden, sondern der Text soll einfach über die Größe des Buttons gehen.

Danke für Hilfe!

 

[BcF]

Eine feste Breite kannst du nur Blockelementen zuweisen. Gegen Wiederholen hilft overflow:visible.

 

[farchris]

hm und wie bekomme ich es dann so hin, dass der Button voll angezeigt wird?
display:block

... ist ja untereinander

 

[BcF]

So: http://css4you.de/float

Du musst einfach alle Blöcke nach links "floaten" lassen, dann sind sie nebeneinander.

 

[prm]

Link-Buttons

 

[Asterixus]

display:inline-block;

Das gibt dir die Vorteile von Block- und Inlineelementen.

 

[BcF]

display:inline-block;

Das gibt dir die Vorteile von Block- und Inlineelementen.

Funktioniert aber in älteren Browsern nicht und im IE7 nicht richtig.