nicht angemeldet
inline-block vs. float
Hi,
ich habe mich heute von FF2 getrennt(ja ich weiss, wurde auch Zeit), weil der nicht mit inline-block zurecht kam. So konnte ich bei den Elementen keine Breitenangabe machen, bzw. FF2 hat das ignoriert.
Da inline-block nun super zu funktionieren scheint, habe ich eine Frage.
Kann ich nun endlich das ungeliebte Float vergessen, oder ist eine Situation denkbar, wo Float einen Vorteil gegenüber inline-block hat?
Mario
-
Kann ich nun endlich das ungeliebte Float vergessen, oder ist eine Situation denkbar, wo Float einen Vorteil gegenüber inline-block hat?
Redest du von inline-block für Spaltenlayout?
Kenne ich ehrlich gesagt nur von http://bittersmann.de/articles/inline-block/. Gut, das ist ein Proof of Concept.
Wenn man mit Floats arbeitet, arbeitet man viel mit Clearing, Floats einschließen, Floats nebeneinander stellen usw., kurz: mit Block Formatting Contexts. Die sind sehr leistungsfähig, aber auch schwer zu beherrschen.
Ehrlich gesagt weiß ich nicht, was an Floats ungeliebt ist, sie sind halt die aktuell verbreitete, gut dokumentierte, robuste und ziemlich abwärtskompatible Layouttechnik. Mag sein, dass das alles auf inline-block auch zutrifft - CSS-Tabellen sind auch eine Alternative -, aber ich habe noch kein Tutorial gesehen, dass das ganze seit ca. 10 Jahren erarbeitete Layout-Wissen auf diese neuen Techniken überträgt. Deswegen bin ich da skeptisch, aber erwartungsvoll.Mathias
-
ich habe mich heute von FF2 getrennt(ja ich weiss, wurde auch Zeit), weil der nicht mit inline-block zurecht kam. So konnte ich bei den Elementen keine Breitenangabe machen, bzw. FF2 hat das ignoriert.
Du brauchst eine Anpassung für MSIE. display:inline tut es.
Meine inline-block Navigation scheint auf jeden Fall in Safari, FF3 und Opera5 zu taugen. Also man darf es wagen.Da inline-block nun super zu funktionieren scheint, habe ich eine Frage.
Kann ich nun endlich das ungeliebte Float vergessen, oder ist eine Situation denkbar, wo Float einen Vorteil gegenüber inline-block hat?Ja, eben im Sinne als Float.
Bei inline-block muss du scharf auf whitespace achten (HTML Kommentare verwenden.)
Das kann besonders bei dynamisch generiertem Content dann die Schönheit des Codes etwas beeinträchtigen.mfg Beat
--
><o(((°> ><o(((°>
<°)))o>< ><o(((°>o
-
Hi,
Du brauchst eine Anpassung für MSIE. display:inline tut es.
Meine inline-block Navigation scheint auf jeden Fall in Safari, FF3 und Opera5 zu taugen. Also man darf es wagen.warum eine Anpassung für den IE? Ich weiss, Gunnar schreibt das auch:
http://bittersmann.de/articles/inline-block/Aber zumindest der IE6 hat mit display:inline-block; keine Probleme.
Hat >IE6 damit Probleme?Timo
-
Aber zumindest der IE6 hat mit display:inline-block; keine Probleme.
Hat >IE6 damit Probleme?Da muss du dich irren. Das einzige, was display:inline-block im IE < 8 macht, ist hasLayout anschalten. Das macht die feste width-Angabe aber auch. Das ist zwar die halbe Miete, aber erst display:inline plus hasLayout bringt die IEs dazu, die Elemente nebeneinander darzustellen.
Prüfe das mal am Beispiel 6 von Gunnar - nimm die display:inline-Anweisungen für den IE heraus.
Mathias
-
Hi,
Da muss du dich irren.
Stimmt. Ich hatte das auf Inlineelemente angewendet, genauer Links. Diese sollten zwar alle Möglichkeiten des Aussehens wie unter display:block; haben, aber eben inline sein. Und das funktioniert auch. jetzt habe ich mal Blockelemente genommen, und es geht nicht:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de"> <head> <title>test</title> <style type="text/css"> p{display:inline-block;} </style> </head> <body> <p>1</p><p>2</p><p>3</p><p>4</p><p>5</p><p>6</p><p>7</p><p>8</p> </body> </html>Schade, zu früh gefreut, denn damit wäre float wohl zur Antiquität geworden.
Was ich nicht verstehe, wie der IE damit umgeht. Wenn er inline-block nicht kennt, warum ignoriert er diesen nicht einfach, dann könnte man das so schreiben:
p{
display:inline;
display:inline-block;
}Denn um ehrlich zu sein ich verstehe Gunnars Hack nicht so ganz.
* html li{display: inline;}
*:first-child+html li{ display: inline;}Warum ingnoriert der IE dann die das vorhande display:inline-block;?
Timo
-
Was ich nicht verstehe, wie der IE damit umgeht. Wenn er inline-block nicht kennt
Kennt er aber! Aber nicht, wie es der Standard vorschreibt. Wie gesagt hat inline-block keine andere Wirkung, als hasLayout zu triggern. An der Anzeigeweise ändert es nichts - Blockelemente werden als Block und Inline-Elemente inline angezeigt.
http://www.brunildo.org/test/InlineBlockLayout.htmlDenn um ehrlich zu sein ich verstehe Gunnars Hack nicht so ganz.
* html li{display: inline;}Ist ein Selektor-Hack, den nur der IE 6 interpretiert.
Aus Sicht von HTML ist dieser Selektor Unsinn, weil es kein Element oberhalb von html gibt. IE 6 interpretiert den Selektor trotzdem.*:first-child+html li{ display: inline;}
Ein weiterer Selektor-Hack, der m.W. darauf beruht, dass der IE 7 den DOCTYPE irrtümlicherweise als DOM-Knoten ansieht, der im CSS berücksichtigt wird.
Andere Browser ignorieren diese Regel, weil es kein Element vor dem html-Element gibt. Das html-Element hat keine Geschwister-Elemente.Warum ingnoriert der IE dann die das vorhande display:inline-block;?
Weil eine späterer Regel mit display:inline (mit einem Selektor mit gleicher oder höherer Spezifität) die vorherige Regel mit display:inline-block überschreibt.
Mathias
-
Schade, zu früh gefreut, denn damit wäre float wohl zur Antiquität geworden.
Was ich nicht verstehe, wie der IE damit umgeht. Wenn er inline-block nicht kennt, warum ignoriert er diesen nicht einfach, dann könnte man das so schreiben:p{
display:inline;
display:inline-block;
}Denn um ehrlich zu sein ich verstehe Gunnars Hack nicht so ganz.
* html li{display: inline;}
*:first-child+html li{ display: inline;}Gunnar verwendet sigenannte CSS Hacks die auf mangelhafter CSS Interpretation beruhen.
Das kann man im Fall von MSIE auch gezielter machen mit Conditional Coments.<body id="body">
<!--[if IE]><div id="msie"><![endif]--><!-- ... hier der HTML Code für den Body... -->
<!--[if IE]></div><![endif]-->
</body>Jetzt kannst du im CSS den MSIE gezielt ansprechen, weil nur er den Selektor #msie sieht.
#msie element .someclass { someprop:someval; }
Warum ingnoriert der IE dann die das vorhande display:inline-block;?
Tja auch der FF2 sollte es besser ignorieren statt mangelhaft zu implementieren.
mfg Beat
--
><o(((°> ><o(((°>
<°)))o>< ><o(((°>o
-
-
-
-