Inspired by WebmasterWorld CSS Forum:
http://www.webmasterworld.com/css/3079292.htm

Mozilla requires -moz-inline-box. In Explorer 6 and 7 it works only on elements that have a natural display of 'inline' (SPAN, A etc.)


(normal p) Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer tincidunt. Pellentesque bibendum tristique nisi. Phasellus consequat adipiscing eros. Nullam sem augue, cursus a, placerat ut, vehicula at, neque. Duis tincidunt elit pellentesque nisi. Proin massa felis, suscipit et, posuere in, aliquet ut, risus. Fusce faucibus. Duis ut libero. Aenean at sem egestas neque semper porttitor. Cras posuere congue pede. Etiam odio est, facilisis quis, sagittis ut, faucibus ut, neque.

A div container surrounding the paragraph, with some content before it.

(inline-block p) Sed purus ante, tempor a, dignissim vitae, porta quis, tortor. Ut faucibus. Quisque risus nunc, malesuada a, adipiscing sed, imperdiet non, quam. Vestibulum suscipit rutrum magna. Nunc pulvinar pellentesque arcu. Quisque vitae urna id ante mollis vulputate. Morbi neque arcu, facilisis vitae, tincidunt vel, suscipit id, magna. Pellentesque semper nibh vitae orci. Praesent rhoncus auctor turpis. Nam metus tortor, congue vitae, luctus luctus, nonummy id, mauris.

And some content immediately after it.

(normal p) Maecenas turpis. Duis justo. Morbi consequat, eros eget lacinia adipiscing, arcu ipsum bibendum nisi, quis iaculis metus nunc a ipsum. Integer eget neque. Cras ut diam a quam feugiat tristique. Nam in lorem eu justo dictum adipiscing. Praesent tincidunt lorem sit amet magna. In hac habitasse platea dictumst. Mauris varius elementum nunc. Vivamus dapibus orci quis mauris. Integer nec sapien pulvinar nisl pellentesque luctus. Integer accumsan, eros a molestie tempor, turpis lectus auctor nibh, venenatis molestie libero dui in tellus. Aliquam sed neque. Cras ante. Nullam molestie libero quis erat.


FF doesn't support inline block it's true. IE supports inline-block on inline elements naturally, AND it can be made to do so on block elements in IE6/7 too which could perhaps account for the difference.

However the main thing is that inline-block; is a hasLayout trigger so its use is likely to cause things to be a bit different in IE.

SuzyUK

Setting display:inline-block on various block-level elements (DIV, P, ... how does it effect things...?)

display:inline-block naturally makes the element 'inline', so elements that follow wrap it.

This is a DIV with display:inline-block
This is another DIV with display:inline-block

This is a P with display:inline-block

This is a SPAN with display:inline-block This is another SPAN with display:inline-block
This is a DIV with display:inline-block but it is inside a containing DIV
This is another DIV with display:inline-block but it is inside a containing DIV

This is a box
and this is the 2nd line.
The third.

[Home]