CSS Button-Größe geht nicht im Firefox!

Tobbe · 04.06.2006, 12:58

Hallo Leute,

ich habe folgendes Problem:

Ich würde auf meiner Homepage gerne ein paar CSS Buttons in die Navigation einbauen.
Dazu muss ich aber die Größe definieren, da ich das ganze hinterher in eine Tabelle einbinden und ein
Hintergrundbild in den Button-Hover einfügen möchte.

Dazu verwende ich die Befehle "height: 50px; width: 222px;"

Das funktioniert soweit auch, aber nur im IE.

Hier mal ein Beispiel...
Im Internet Explorer wird die Button-Größe verändert, im Firefox bleibt der Button aber immer so groß wie der Text.

Hier noch mal der komplette Code:

Code:

<html>
<head>
<title>Test</title>
<meta name="author" content="Tobias">
<style type="text/css">
<!--
a.button
{
height: 50px;
width: 222px;
padding:14px
font-family:Book Antiqua;
font-size:15px;
font-weight:bold;
color: #837857;
background-Color: #EDE6B3;
border-left: 1px solid #D1CB98;
border-top: 1px solid #D1CB98;
border-right: 1px solid #D1CB98;
border-bottom: 1px solid #D1CB98;
text-decoration: none;
text-align: center;
}

a.button:hover
{
Color: #332E21;
background-Color: #D1CB98;
border-left: 1px solid #B9B481;
border-top: 1px solid #B9B481;
border-right: 1px solid #B9B481;
border-bottom: 1px solid #B9B481;
text-decoration: none;
}
-->
</style>
</head>
<body>

<a class="button" href="">Button-Text</a>

</body>
</html>

Was mache ich falsch?
Kann mir vielleicht jemand weiterhelfen? Würde mich über jeden Tipp freuen...

liebe Grüße Tobbe

04.06.2006, 13:06

ein anker ist ein inlineelement und ursprungsgemäss nur so breit/hoch wie sein inhalt.
um größenangaben oder aussen- bzw. innenabstände zu verwenden musst du den link als blockelement formatieren. das geht so:

Code:

a.button {
    display: block;
}

Tobbe · 04.06.2006, 13:17

Ah... ich hatte sowas schonmal auf SELFHTML gelesen,
war mir aber nicht sicher, wo ich es in dem Befehl einbinden soll.

Na ja, es hat funktioniert! Besten Dank für Deine Hilfe!

liebe Grüße Tobbe