Firefox und inline-block ....

[Binni]

Hallo zusammen,

ich ärger mich gerade mit dem Firefox rum ...
Habe eine Navigations-Leiste erstellt, bei der ich die einzelnen Links mit css formatiere, per display: inline-block; sollten daraus schöne block-Elemente werden, die NICHT umbrechen, was aber im Firefox 2 nicht funktioniert, mit dem Fifo 3 klappt es ...

Was ich hier schon im Forum gefunden habe, ist die ganze Sache mal mit display: -moz-inline-block; zu probieren, doch auch das hilft nicht ...

schaut euch das ganze mal an

hier einen Screenshot wie es aussehen soll, und vom Firefox-Mist

der Code nochmal dazu:

a.blog_navi {
 text-align: center;
 text-decoration: none;
 font-size: 12px;
 height: 18px;
 width: 18px;
 border: 1px solid #EEC591;
 background-color: #F5F5DC;
 color: #000000;
 display: -moz-inline-block;
 display: inline-block;
}

<a href="#" class="blog_navi">1</a>
<a href="#" class="blog_navi">2</a>
<a href="#" class="blog_navi">3</a>
<a href="#" class="blog_navi">4</a>
<a href="#" class="blog_navi">5</a>

Hat nun jemand eine Idee wie man das lösen kann? Schließlich klappt es selbst im IE 6 ...

Viele Grüße - der Binni

[Gunther]

Hallo,

a.blog_navi {
text-align: center;
text-decoration: none;
font-size: 12px;
height: 18px;
width: 18px;
border: 1px solid #EEC591;
background-color: #F5F5DC;
color: #000000;
display: inline-block;
}

<a href="#" class="blog_navi">1</a>
<a href="#" class="blog_navi">2</a>
<a href="#" class="blog_navi">3</a>
<a href="#" class="blog_navi">4</a>
<a href="#" class="blog_navi">5</a>

also in meinem FF 2.0.0.12 funktioniert das einwandfrei, d.h. die einzelnen Links werden nebeneinander in einer Reihe dargestellt.

Gruß Gunther

[Gunther]

Hallo,

da war ich leider etwas zu vorschnell - sorry! Es funktioniert auch bei mir nicht!

Ich habe in einer Mailingliste einen interessanten & hilfreichen Beitrag gefunden, dessen Essenz man kurz so zusammenfassen kann: Benutze es nicht!

Alternativ könntest du deine Links doch auch auf display: block setzen und sie dann floaten lassen.

Gruß Gunther

[Binni]

Hallo Gunter,

Alternativ könntest du deine Links doch auch auf display: block setzen und sie dann floaten lassen.

das hatte ich Anfangs auch probiert - da ich aber nicht bloß die Ziffernblöcke drin habe in der Navigationsleiste sondern noch normalen Text hat es mir immer den Text dann nach ganz rechts gesetzt ...
jedoch ist mir gerade das Brett vorm Kopf abgefallen - ich kann den Text ja in einen span packen und dann auch floaten ... :-D

Danke für den Denkanstoß! Problem ist nun gelöst!

Viele Grüße - der Binni

[Orlando]

display: inline-block;

also in meinem FF 2.0.0.12 funktioniert das einwandfrei

In meinem auch.

Roland

[Gunther]

Hi Roland!

display: inline-block;

also in meinem FF 2.0.0.12 funktioniert das einwandfrei

In meinem auch.

Schon mal einen Blick auf die Fehler-Konsole geworfen?
"Warnung: Fehler beim Verarbeiten des Wertes für Eigenschaft 'display'.  Deklaration ignoriert.
Quelldatei: http://homepage.ntlworld.com/spartanicus/ie_block_level_element_inline-block_hack.htm
Zeile: 10"
und
"Warnung: Fehler beim Verarbeiten des Wertes für Eigenschaft 'display'.  Deklaration ignoriert.
Quelldatei: http://homepage.ntlworld.com/spartanicus/ie_block_level_element_inline-block_hack.htm
Zeile: 12"

Gruß Gunther

[Binni]

Hallo Roland,

display: inline-block;

also in meinem FF 2.0.0.12 funktioniert das einwandfrei

In meinem auch.

das Problem ist dann allerdings im Firefox 2, dass er die div's nicht auf die 300px Breite skaliert - bei meinem Beispiel bekomm ich also meine Ziffern nicht in eine einheitliche Box ...

siehe hier - oben korrekt im Safari und unten im Firefox 2 ...

Viele Grüße - der Binni

[Orlando]

das Problem ist dann allerdings im Firefox 2, dass er die div's nicht auf die 300px Breite skaliert

Logisch, denn das würde inline widersprechen. Was passiert, wenn du diesen Elementen ein Kind-Element mit der passenden Breite spendierst?

Roland

[Binni]

Logisch, denn das würde inline widersprechen. Was passiert, wenn du diesen Elementen ein Kind-Element mit der passenden Breite spendierst?

okay, da geht es dann - Variante 2 zur Lösung :-)
der Ansatz mit dem Floaten geht auch!

Danke!

Viele Grüße - der Binni

[Gunther]

Was passiert, wenn du diesen Elementen ein Kind-Element mit der passenden Breite spendierst?

Man erhält
a) immer noch nicht das gewünschte Ergebnis, oder
b) invaliden Code

Ausgehend davon, dass es dem OP um <a> Elemente geht.
Also entweder setzt man die <a>'s auf display:block und floatet sie, oder man muss die <a>'s in andere (Block-)Elemente verpacken.

Gruß Gunther

[ChrisB]

Hi,

Also entweder setzt man die <a>'s auf display:block und floatet sie

Das display:block kann man sich in solchen Faellen beim floaten sparen - siehe auch Relationships between 'display', 'position', and 'float'.

MfG ChrisB

[Gunther]

Hi,

Also entweder setzt man die <a>'s auf display:block und floatet sie

Das display:block kann man sich in solchen Faellen beim floaten sparen - siehe auch Relationships between 'display', 'position', and 'float'.

Ich meine mich aber dunkel daran erinnern zu können, dass die IEs(<7) das (gefloatete Elemente haben automatisch display:block - das meintest du doch, oder?) aber (natürlich) nicht so machen. Also ist das display:block zumindest für IEs doch erforderlich.

Aber bitte: Ohne Gewähr (denn ich finde im Augenblick keine zuverlässige Quelle dazu)!

Gruß Gunther

[ChrisB]

Hi,

(gefloatete Elemente haben automatisch display:block - das meintest du doch, oder?)

Nein, sie haben automatisch das, was in der Tabelle auf der verlinkten Seite steht :-)

Ich meine mich aber dunkel daran erinnern zu können, dass die IEs(<7) das aber (natürlich) nicht so machen. Also ist das display:block zumindest für IEs doch erforderlich.

Nicht, dass ich wuesste.
float ist im IE eine der Eigenschaften, die hasLayout triggert - und ein Element mit dieser Eigenschaft nimmt bereitwillig Formatierungen wie bspw. width und height an.

MfG ChrisB

[Gunther]

Hi,

(gefloatete Elemente haben automatisch display:block - das meintest du doch, oder?)

Nein, sie haben automatisch das, was in der Tabelle auf der verlinkten Seite steht :-)

Das verstehe ich im übrigen nicht. Vielleicht bist du ja so nett, und hilfst mir mit der Tabelle mal auf die Sprünge? ;-)

Ich interpretiere die Tabelle wiefolgt;
Also wir haben in unserem Fall ein <a> Tag, welches gefloatet wird_ohne_Angabe zu display.

Dann müsste ja 3. zutreffen: "# Otherwise, if 'float' has a value other than 'none', the box is floated and 'display' is set according to the table below."

Und in der Tabelle erste Spalte "Specified value" (den wir ja nicht haben), müsste demnach die letzte Zeile zutreffen:"others"

Woraus sich dann gemäß Spalte 2 der "Computed value" ergibt:"same as specified"

Da wir aber gar keinen angegeben haben, dürfte das Element aber laut der Tabelle auch keinen "Computed value" (berechneten Wert) haben. Damit dürfte aber kaum ein Browser klarkommen. Also "vergibt" der Browser den computed value und der ist bei gefloateten Elementen = block.

Gruß Gunther

[ChrisB]

Hi,

Und in der Tabelle erste Spalte "Specified value" (den wir ja nicht haben), müsste demnach die letzte Zeile zutreffen:"others"

Ich interpretiere das so: Wir haben einen impliziten "specified value", *weil* wir keine Angabe zu display gemacht haben, und der Default inline ist.

MfG ChrisB

[Gunther]

Hi,

Und in der Tabelle erste Spalte "Specified value" (den wir ja nicht haben), müsste demnach die letzte Zeile zutreffen:"others"

Ich interpretiere das so: Wir haben einen impliziten "specified value", *weil* wir keine Angabe zu display gemacht haben, und der Default inline ist.

was aber eigentlich nicht sein kann, denn dann könntest du gefloateten Inline-Elementen_ohne_explizites display:block bspw. keine width oder margin Angaben verpassen.

Gruß Gunther

[ChrisB]

Hi,

Ich interpretiere das so: Wir haben einen impliziten "specified value", *weil* wir keine Angabe zu display gemacht haben, und der Default inline ist.
was aber eigentlich nicht sein kann, denn dann könntest du gefloateten Inline-Elementen_ohne_explizites display:block bspw. keine width oder margin Angaben verpassen.

*Noch*mal nachlesen :-)

Unser Element ist ein inline-Element, hat also display:inline (als Defaultwert, weil keine explizite Angabe gemacht wurde, oder aus dem Browserstylesheet).
Das ist jetzt unser "specified value".

Da wir jetzt float verwendet haben, trifft Punkt 3) zu,

Otherwise, if 'float' has a value other than 'none', the box is floated and 'display' is set according to the table below.

Also schauen wir in die table below, finden dort den "specified value" inline in der zweiten Zeile - und schauen nach rechts, und sehen, dass daraus der "computed value" block resultiert.

MfG ChrisB

[Gunther]

Hi,

Unser Element ist ein inline-Element, hat also display:inline (als Defaultwert, weil keine explizite Angabe gemacht wurde, oder aus dem Browserstylesheet).
Das ist jetzt unser "specified value".

Ah, hier ist der Punkt, der mich leicht verwirrt hat. Wenn die die Spaltenbezeichnung mal erweitern würden, wäre die ganze Tabelle verständlicher.

Da wir jetzt float verwendet haben, trifft Punkt 3) zu,

Otherwise, if 'float' has a value other than 'none', the box is floated and 'display' is set according to the table below.

Also schauen wir in die table below, finden dort den "specified value" inline in der zweiten Zeile - und schauen nach rechts, und sehen, dass daraus der "computed value" block resultiert.

Danke für die Nachhilfe. ;-)
Meine bisherige Interpretation

gefloatete Elemente haben automatisch display:block

traf es vom Ergebnis her aber ja auch schon ziemlich exakt.

Gruß Gunther