Text-Buttons mit CSS: klappt nur im IE

[Timo]

Hallo zusammen,

ich möchte für meine Navigation mehrere Textbuttons/Textlinks in einer Tabellenzelle als Boxen mit selber Größe.
Ich habe es so gelöst:

.button {
 font-family: Arial, Helvetica, sans-serif;
 font-size: 11px;
 font-style: normal;
 height: 25px;
 width: 100px;
 text-decoration: none;
 color: #000000;
 background-color: #EAEAEA;
 text-align: center;
 vertical-align: middle;
 padding-top: 5px;
 font-weight: normal;

}

Im IE 6/7 werden die Buttons genau richtig angezeigt, im Mozilla/Firefox ist der Button nur so groß wie der enthaltene Link, nicht 100x25 wie er sein sollte.

Was mache ich denn falsch?

[Stefan Richter]

Also wenn du deinen Button so angibst:

<input type="button" class="button" value="Test">

kann ich keine Unterschiede in allen mögichen Browsern IE / Firefox / Opera / Mozilla / Seamonkey feststellen!

[Timo]

Also wenn du deinen Button so angibst:

<input type="button" class="button" value="Test">

kann ich keine Unterschiede in allen mögichen Browsern IE / Firefox / Opera / Mozilla / Seamonkey feststellen!

Dann hatte ich mich mit Button falsch ausgedrückt.
Ich möchte das als Link realisieren:

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

Dann bekomme ich das Problem.

[Steffen Bruchmann]

Hallo Timo,

Im IE 6/7 werden die Buttons genau richtig angezeigt, im Mozilla/Firefox ist der Button nur so groß wie der enthaltene Link, nicht 100x25 wie er sein sollte.

Falsch. Mozilla/Firefox macht es richtig, nicht der IE.

Was mache ich denn falsch?

Du versuchst einem Inline-Element eine Höhe und Breite zuzuweisen, was nicht funktioniert, bei Block-Elementen hingegen schon. Füge deiner Klasse einfach folgende Zeile hinzu:

.button {  
display: block;  
}

Weiter Informationen zu der Eigenschaft display erhälst du in SELFHTML.

Mfg,
Steffen Bruchmann

[Timo]

Hallo Timo,

Im IE 6/7 werden die Buttons genau richtig angezeigt, im Mozilla/Firefox ist der Button nur so groß wie der enthaltene Link, nicht 100x25 wie er sein sollte.

Falsch. Mozilla/Firefox macht es richtig, nicht der IE.

Was mache ich denn falsch?

Du versuchst einem Inline-Element eine Höhe und Breite zuzuweisen, was nicht funktioniert, bei Block-Elementen hingegen schon. Füge deiner Klasse einfach folgende Zeile hinzu:

.button {

display: block;
}

>   
> Weiter Informationen zu der Eigenschaft `display`{:.language-css} erhälst du in [SELFHTML](http://de.selfhtml.org/css/eigenschaften/positionierung.htm#display).  
>   
> Mfg,  
> Steffen Bruchmann  
  
Hallo Steffen,  
  
das "display: block;" hatte ich schon getestet. Das Problem dabei ist, dass jeder Button dann in einer neuen Zeile ist.  
  
Ich müsste nun nur noch die neue Zeile nach jedem Button wegkriegen, dann würde es stimmen...

[Steffen Bruchmann]

Hallo Timo,

Das Problem dabei ist, dass jeder Button dann in einer neuen Zeile ist.

So gehört sich das auch für ein Block-Element.

Ich müsste nun nur noch die neue Zeile nach jedem Button wegkriegen, dann würde es stimmen...

Versuche es ungefähr so: Pack deine Links in eine ungeordnete Liste, diese Liste packst du in einen Div-Container.
Den Listenpunkten weist du [link:http://de.selfhtml.org/css/eigenschaften/positionierung.htm#float@title=float]: left zu und dem Container gibst du die Eigenschaft [link:http://de.selfhtml.org/css/eigenschaften/positionierung.htm#clear@title=clear]: left.

Warnung: ungetestet.

Mfg,
Steffen Bruchmann

[Felix Riesterer]

Lieber Steffen,

Pack deine Links in eine ungeordnete Liste,

genau richtig!

diese Liste packst du in einen Div-Container.

Wozu diesen Container? Reicht nicht die <ul> als Container aus? Ein <div> sehe ich nur als gerechtfertigt, wenn Du außer der <ul> noch andere HTML-Elemente dazugruppierst, wie z.B. eine <h2> für die <ul>:

<div id="navi-block">  
    <h2>Navigation</h2>  
    <ul>  
        <li><a href="impr.htm">Impressum</a></li>  
    </ul>  
</div>

Den Listenpunkten weist du [link:http://de.selfhtml.org/css/eigenschaften/positionierung.htm#float@title=float]: left zu

Es würde auch display: inline reichen, dann kann man die <li>s auch zentriert darstellen lassen. Innerhalb der <li>s sollte man dann aber die <a>s auf display: block; stellen.

und dem Container gibst du die Eigenschaft [link:http://de.selfhtml.org/css/eigenschaften/positionierung.htm#clear@title=clear]: left.

Hmm, da gab es doch etwas mit :after, um das Clearen zu erreichen... Hab's selbst noch nie angewendet, daher kenne ich mich damit noch nicht "aus dem ff" damit aus.

Liebe Grüße aus Ellwangen,

Felix Riesterer.

[Der Martin]

Hallo Felix,

diese Liste packst du in einen Div-Container.
Wozu diesen Container? Reicht nicht die <ul> als Container aus?

das dachte ich im stillen auch schon.

Hmm, da gab es doch etwas mit :after, um das Clearen zu erreichen... Hab's selbst noch nie angewendet, daher kenne ich mich damit noch nicht "aus dem ff" damit aus.

Das "ff" ist genau das richtige Stichwort: Die Pseudoklasse :after würde wohl im FF (Firefox) funktionieren, und auch in anderen Browsern, die CSS ordentlich beherrschen. Dem IE geht :after bekanntlich an selbigem vorbei (wobei ich nicht sicher bin, ob das für den IE7 immer noch gilt).

Übrigens ist mir im Augenblick nicht ganz klar, wie du mit :after etwas erreichen willst, das den Effekt von clear hat.

Schönen Sonntag noch,
 Martin

[wahsaga]

hi,

Übrigens ist mir im Augenblick nicht ganz klar, wie du mit :after etwas erreichen willst, das den Effekt von clear hat.

Na ganz einfach - Pseudocontent hinter einem Element erzeugen, und diesen dann mit clear formatieren.

gruß,
wahsaga