[CSS] display: inline-block

[BF1942 Freak]

Hallo!

Ich habe mal ein Problem der ganz besonderen Art...
Hätte nicht, dass es das gibt, aber ich habe das Problem, dass der Firefox eine ganz bestimmte CSS-Eigenschaft nicht kennt, die der Internet Explorer schon seit der Version 5 beherrscht. Es handelt sich dabei um display: inline-block.
Wie gesagt, wird von IE 5.0 bis IE 7.0 wunderbar interpretiert, der Fuchs macht aber Probleme. Gibt es irgendwie die Chance das zum Laufen zu bringen?
Mir fiel da im Moment nur eine Kombination aus display: block und float: left ein, aber float will ich eigentlich nicht verwenden, da dann an anderer Stelle Probleme auftreten und display: inline-block schließlich genau das ist, was ich brauche.
Außerdem müsse ich das dann ja nur für Mozilla-Browser einbinden. Die IEs würde das float ja nämlich stören. Gibt es soetwas wie Conditional Comments auch für den Firefox?
Oder gibt es sonst eine Möglichkeit im FF display: inline-block zum funktionieren zu bringen?

 

[Zweipunktnull]

Hm, probier's mal mit:

display: -moz-inline-block;
display: inline-block;

 

[BF1942 Freak]

geht leider nicht
gibts vielleicht noch eine andere möglichkeit?

 

[Zweipunktnull]

Dann probier's mal mit:

display: -moz-inline-box;
display: inline-block;

 

[BF1942 Freak]

geht leider auch nicht..
kann man nicht sowas wie conditional comments für ff machen?
oder gibt's vllt noch so ein anderes -mox-blabla teil?

 

[Keita]

Der Attributswert inline-block wird erst von Gecko 1.9 (Firefox 3) unterstützt, bis dahin mußt du dich wohl oder übel gedulden...

greetings, Keita

 

[BF1942 Freak]

Hm.. das problem ist nur, dass mir float arg in den weg kommt.

denn meine navigation ist ebenfalls float:left und jetzt sachen im content-bereich ebenfalls mit float:left sind, dann ist das nicht so gut, denn um im content weiterzumachen würde ich dann ja unter den float:left elementen ein clear:left div machen, damit ich darunter weitermachen kann.
aber dieses clear:left würde sich dann ja nicht nur auf die teile im content bereich beziehen, sondern auch auf die navigation. und dann würde es nicht direkt unter den float:left-elementen im contentbereich weitergehen, sondern erst ganz unterhalb der navigationsspalte...

deswegen hätte ich nicht so gerne float:left-elemente im content-bereich..

 

[Keita]

Irgendwie fließt mein Hirn nach links…
Nochmals zum Verständnis: du hast einen Navigationsblock auf der linken und rechts daneben einen Contentblock, im Contentblock wiederum sind Blöcke, die mittels float: left rechtsseitig von anderen Elementen umflossen werden?

Für sowas gibt es eine Lösung: overflow: hidden!

Elemente mit overflow: hidden wirken für eingebettete Elemente mit float-Anweisungen wie Container, d.h. sie werden nicht von Elementen beeinflußt, die außerhalb dieses Containers liegen:

<div style="background: lightgreen; overflow: hidden; padding: 10px; width: 600px">
<div style="background: azure; float: left; padding: 10px">linker äußerer Block</div>
<div style="background: cornflowerblue; float: right">
rechter äußerer Block
<div style="background: seagreen; overflow: hidden; padding: 10px; width: 400px">
<div style="background: greenyellow; float: left; padding: 10px">linker innerer Block</div>
<div style="background: goldenrod; float: right; padding: 10px">rechter innerer Block</div>
</div>
immer noch rechter äußerer Block
</div>
</div>
</div>

greetings, Keita