Buttontext erscheint nicht zentriert

[christian]

Hallo zusammen!

Ich habe das gleiche Problem wie opi in diesem thread:

http://forum.de.selfhtml.org/archiv/2005/6/t108976/

Wenn ich buttons mit der css-Angabe min-width=8em gleich breit machen will, werden die Texte der buttons linksbündig angezeigt. Und zwar nur in den aktuellen Browsern mozilla1.7 und firefox1.06. In älteren Versionen wird der Text zentriert so wie gewünscht angezeigt.

Für den IE mußte ich mir eh was anderes überlegen, weil der min-width ja nicht kapiert.

Gibt es schon einen Lösungsansatz für dieses Problem?

Danke und alles,
Christian

.Button {
min-width:8em;
overflow:visible;
text-align:center;
}

[Ingo Turski]

Hi,

min-width:8em;

warum min-width? Ohne width paßt sich die Breite dem Inhalt an oder mit width in em passend zum längsten Inhalt definiert hat man einheitliche Breiten.

overflow:visible;

das ist die Voreinstellung.

freundliche Grüße
Ingo

[christian]

Hi,

min-width:8em;
warum min-width? Ohne width paßt sich die Breite dem Inhalt an oder mit width in em passend zum längsten Inhalt definiert hat man einheitliche Breiten.

overflow:visible;
das ist die Voreinstellung.

freundliche Grüße
Ingo

Hallo Ingo!

Schon mal Danke für Deine Antwort. In der Webanwendung, an der ich sitze, gibt es eine Menge Buttons, die einen kurzen Text haben. Für diese Knöpfe soll eine einheitliche Breite vorgegeben werden. Deswegen min-width.

Die Inhalte der Knöpfe sind dynamisch. Deswegen kann ich keine width angeben (ich kenne den längsten Inhalt nicht). Für Buttons mit längeren Inhalten (kommt nicht so häufig vor) soll sich der Button dann entsprechend strecken.

Es funktioniert eigentlich ja auch, bis auf die Ausrichtung der Beschriftung in den genannten Browsern.

Haariges Problem, gelle? Ich habe auch im Netz nicht viel dazu gefunden, obwohl ich denke, dass es eigentlich häufig auftreten müßte. Deswegen glaube ich ja auch, daß es eine Lösung geben muß.

Bestes,

Christian

[Detlef G.]

Hallo Christian

Wenn ich buttons mit der css-Angabe min-width=8em gleich breit machen will, werden die Texte der buttons linksbündig angezeigt.

Gibt es schon einen Lösungsansatz für dieses Problem?

Eine Lösung ist es vielleicht nicht, eher ein Würgearound.

<button class="Button" ...><span>Der Text</span></button>

  
.Button span{  
  display:block;  
  min-width:8em;  
  text-align:center;  
}  

Dazu noch zwei Fragen:
Müssen es Buttons sein?
Warum hat jeder dieser Buttons extra eine Klasse?

Wenn es für alle Buttons gelten soll, wäre die Klasse nicht nötig, wenn es
für alle Buttons in einem bestimmten Bereich, Element oder Formular gelten
soll, wären diese Klassen auch nicht nötig, dann könnte es über
Element button {...}, .ElementKlasse button {...} oder #ElementId button {...}
angesprochen werden.

Auf Wiederlesen
Detlef

[christian]

Hi Detlef!

Ja, das ist doch schon mal ein Ansatz. Vielen Dank für den Hinweis. Auch die Extraklasse für die Buttons erscheint mir jetzt überflüssig. Ich habe gerade zwar keine Zeit, das auszuprobieren, aber bin guter Hoffnung.

Beste Grüße,
Christian