nicht angemeldet
Text-Buttons mit CSS: klappt nur im IE
0 0 0 0
Text-Buttons mit CSS: klappt nur im IE
Der MartinHallo 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?
-
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!
-
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.
-
-
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
displayerhälst du in SELFHTML.Mfg,
Steffen Bruchmann--
Mein Selfcode: ie:{ fl:( br:> va:) ls:& fo:| rl:( n4:& ss:| de:> js:| ch:{ mo:} zu:}-
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...-
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]: leftzu 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--
Mein Selfcode: ie:{ fl:( br:> va:) ls:& fo:| rl:( n4:& ss:| de:> js:| ch:{ mo:} zu:}-
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]: leftzuEs würde auch
display: inlinereichen, dann kann man die <li>s auch zentriert darstellen lassen. Innerhalb der <li>s sollte man dann aber die <a>s aufdisplay: 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.
--
ie:% br:> fl:| va:) ls:[ fo:) rl:° n4:? de:> ss:| ch:? js:) mo:} zu:)-
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--
Mir geht es gut. Ich mag die kleinen Pillen, die sie mir dauernd geben.
Aber warum bin ich ans Bett gefesselt?-
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--
/voodoo.css:
#GeorgeWBush { position:absolute; bottom:-6ft; }
-
-
-
-
-