tests: block formatting context, display:inline-block and margin collapsing.

back to introduction

Note: this test file illustrates how display:inline-block can eventually be used as an alternative for display:table in MSIE for Mac.

Relevant code

div#testgrid p, div#testgrid div {margin:1em;}
h5 {margin: 1.5em 3% 1em;}
div.inflow {background:#d8ebff;}
div.inline-blockdiv {display:inline-block; background:#ffd4cc;}
div.inline-tablediv {display:inline-table; background:#daf2e8;}

Notes

• IE 5 Mac: supports both inline-block and inline-table; the test(s) here works correctly. Margins are contained within the element. Note: display:inline-block remains basically an inline element: (it) generate(s) a block box, which itself is flowed as a single inline box. (see the definition).
• IE6 Win: inline-block applies layout to MSIE (see On having layout). It doesn't support inline-table.
• inline-block and inline-table are not (yet) supported by Gecko browsers (at gecko1.8, Firefox 1.5). iCab 3 (beta 382), Safari 1.2 and newer, Opera 7.54 and 8.0x support inline-block and inline-table, although not always perfectly.

Last modified: May 25 2006 02:53:41 GMT.

• A [ La Chatte Noire ] development area
• [ contact ]
• [ sectionindex ]
• [ Empty Spaces ]