The value -moz-inline-box is the Mozilla
equivalent to CSS2.1’s inline-block display value. It
will allow an element to generate a block box that can be flowed as a
single inline box, similar to the way replaced elements, such as images,
are handled. This allows the box to sit on the same line as other inline
or inline-block boxes, though it will still be able to take height and
width dimensions in the way that block level boxes can. (Note that Firefox
version 3 has full support for inline-block.)
This facility would be useful in the case of a group of horizontal elements of varying dimensions that we wanted to center horizontally in the available width. This effect would not be possible with floated elements, which would just float to one side or the other; dimensions cannot be defined for inline elements.
The following example creates three inline-block boxes that are centered in the available width:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=iso-8859-1">
<title>moz-inline-box</title>
<style type="text/css">
.outer{
width: 500px;
text-align: center;
border: 1px solid #000;
padding: 1em;
}
.box {
display: -moz-inline-box;
display: inline-block;
padding: 1em;
background-color: #ccc;
border: 1px dotted #000;
}
#box1 {
width: 150px;
height: 100px;
}
#box2 {
width: 100px;
height: 150px;
margin: 0 5px
}
#box3 {
width: 75px;
height: 75px;
}
</style>
<!--[if IE ]>
<style type="text/css">
.box {
display: inline;
vertical-align: top;
}
</style>
<![endif]-->
</head>
<body>
<div class="outer">
<div id="box1" class="box">Box 1</div>
<div id="box2" class="box">Box 2</div>
<div id="box3" class="box">Box 3</div>
</div>
</body>
</html>
The result of this code is shown in Figure 1.
inline-block example
The above example will work in the latest versions of Safari and
Opera too, because they support the CSS2.1 display
property value inline-block.
Internet Explorer for Windows versions 5 - 7 have also been catered
for: we can use conditional
comments to supply them with the display value
inline. Without straying too far from the original
topic, we can have IE can make block-level elements behave as
inline-block boxes simply by setting one of the properties that trigger
an element to gain a layout and then, in a separate style block,
declaring the element to display inline. The
element will behave in most respects as though the
display value was inline-block.
IE8 has full support for inline-block.
Internet Explorer for Windows only understands the
display value inline-block when
it’s applied to inline elements, which rather defeats the purpose in
most cases. However, using the method above, we can coax IE into
displaying block-level elements as inline-block boxes. The layout
trigger is actually the display: inline-block;
declaration, but it could equally well be any of the other properties
that cause an element to gain a layout. See The Internet Explorer hasLayout Property for more information on IE and layout.
User-contributed notes
- ID:
- #1
- Date:
- Wed, 05 Dec 2007 09:08:04 GMT
This drove me nuts for months but I finally figured out how to align item displayed as -moz-inline-block
(This is invaluable in creating tables forms)
You have to use these properties
-moz-box-orient: vertical; (options are vertical | horizontal)
-moz-box-align: end; (options are start | end | center | end | baseline | stretch
You have to use the -moz-box-orient set as vertical because -moz-box-align aligns content at a 90 degree angle to the flow of said content.
So (though I've never tried it) ... if you left off the orient option ... the content would just sit at the bottom of the box.
If you didn't have a height setting, the box would be the height of the content, so it'd look like nothing was happening.
links
----
http://developer.mozilla.org/en/docs/CSS:-moz-box-orient
http://developer.mozilla.org/en/docs/CSS:-moz-box-align
Add a note
To post a note on this topic, please log in with your SitePoint username and password. If you don't have an account yet, you can create a new account for free.