width von link in Mozilla bei inline macht nichts

[Pascal]

Hallo zusammen

Vielleicht handelt es sich bei diesem Problem um ein altbekanntes "Problem", ich wurde aber trotz SelfSuche, Google etc nicht fündig:

Ich möchte einen Streifen mit Menüfelder, dazu habe ich Links, deren Eigenschaften mit css definiert werden.

Der Code:

<div id="menu">
  <a href="#">Link</a>
</div>

und

#menu a{
 ...
 display: inline;
 background: #ff0;
 width: 20%;
 ...
}

Das funktioniert in Opera und IE, aber Mozilla macht das Feld nicht 20% Prozent gross, sondern nur gerade so gross wie der Text ist.
Auch min-width nützt nicht. Habe auch etwas mit padding und so ausprobiert.
Habt Ihr eine Idee, wieso der Mozilla das Feld (sobald es sich um einen Link handelt) nicht so gross macht, wie ich will?

Gruss
Pascal

[wahsaga]

hi,

#menu a{
 ...
 display: inline;
 background: #ff0;
 width: 20%;
 ...
}

Habt Ihr eine Idee, wieso der Mozilla das Feld (sobald es sich um einen Link handelt) nicht so gross macht, wie ich will?

AFAIK ist für inline-elemente eine breitenangabe nicht zulässig.

nimm display:block in kombination mit float stattdessen.

gruss,
wahsaga

[Pascal]

nimm display:block in kombination mit float stattdessen.

ah, da geht mir ein Lichtlein auf... Ich werde sowas mal probieren

*bin am nachlesen wie das mit float funktioniert*

Vielen Dank für die schnelle Hilfe
 Gruss
Pascal

[MudGuard]

Hi,

display: inline;
background: #ff0;
width: 20%;

'width'
    Value:   <length> | <percentage> | auto | inherit
    Initial:   auto
    Applies to:   all elements but non-replaced inline elements, table rows, and row groups

Du hast spätestens mit display:inline dafür gesorgt, daß width ignoriert wird. a ist aber von Haus aus ein inline-Element.

Habt Ihr eine Idee, wieso der Mozilla das Feld (sobald es sich um einen Link handelt) nicht so gross macht, wie ich will?

Weil er sich an den Standard hält, der genau das verbietet.

Wenn das Element eine Breitenangabe bekommen soll, darf es eben kein inline-Element sein (und auch keine table-row oder row-group).

cu,
Andreas

[Pascal]

Uiuiui

'width'
    Value:   <length> | <percentage> | auto | inherit
    Initial:   auto
    Applies to:   all elements but non-replaced inline elements, table rows, and row groups

Ok, das versteh ich. Nur doof, dass das die anderen Browser akzeptieren.
Was soll ich nun tun, wenn ich will, dass
a) die Felder nicht untereinander (block) sondern nebeneinander sind.
b) die Felder trotzdem eine bestimmte Grösse haben sollen.

Ich habs übrigens auch schon mit einer Tabelle probiert, aber dann wurde zwar im Opera und IE das ganze Feld ausgefüllt (wie gewünscht), aber der Mozilla hat die Hintergrundfarbe wieder nur dem Text hinterlegt.

css des Links, der in einem Tabellenfeld ist
a.tab {
 ...
 width: 100%;
 background: #ff0;
 ...
}

Ist ev. padding-right: 1000px eine Lösung (wäre aber unschön)?
Was soll ich tun?

[CarstenP]

Hallo,

Was soll ich nun tun, wenn ich will, dass
a) die Felder nicht untereinander (block) sondern nebeneinander sind.
b) die Felder trotzdem eine bestimmte Grösse haben sollen.

Du suchst "display:inline-block", das meines Wissens bisher aber nur Opera versteht. Daher sollstest Du wie von wahsaga vorgeschlagen mit float arbeiten.

Ich habs übrigens auch schon mit einer Tabelle probiert, aber dann wurde zwar im Opera und IE das ganze Feld ausgefüllt (wie gewünscht), aber der Mozilla hat die Hintergrundfarbe wieder nur dem Text hinterlegt.

css des Links, der in einem Tabellenfeld ist
a.tab {
...
width: 100%;
background: #ff0;
...
}

Auch für die unschöne Tabellenvariante gilt: width und height gibt es nicht für Inline-Elemente, was der Link aber immer noch ist. Auch hier ist die Lösung ein display:block; für die Links.

Viele Grüße
Carsten

[Pascal]

Alles klar

Vielen Dank für Eure Hilfe, dieses Forum ist wirklich toll!

Gruss
Pascal

[CarstenP]

Hallo,

Wie immer gilt: nicht durch die Anzeige anderer Browser verwirren lassen. In der Regel hat Mozilla recht.

"width" gibt es nicht für Inline-Elemente. Du mußt für die Links die display-Eigenschaft auf block setzen.

Viele Grüße
Carsten