display:-moz-inline-box

Jeff

unread,

Apr 23, 2009, 9:24:58 PM4/23/09

to

As noted in an earlier thread on sliding door type CSS, I've toyed with
the "code" here:

http://www.jorkas.com/lab/css/rounded_button/index.html (se below)

The interesting thing here is that it is simple to setup and you can
building expanding graphics of any width. Now, I find making buttons out
of this to be a poor use, although I too have a client that wants that,
but it's a neat trick for building navigation and rounded corner boxes
and such.

I have some html/css I've used before but it has either size
limitations or has problems clearing the floats needed to "shrink wrap"
the elements.

What makes this work is this line for firefox:

display:-moz-inline-box;

That's the Fire Fox proprietary replacement for the CSS2.1 property
inline-block

Now, I'm somewhat resistant to using a proprietary property and I'm
also perplexed by FireFox's apparent lack of support for inline-box yet
having it's own version.

So, is it safe to use this moz property and is FireFox expected to
expand it's rule set to include that? And just what is with all that
-moz stuff?

Example:
(apparently superfluous lines commented out)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

.round {
cursor:pointer;
cursor:hand;
// line-height:20px;
background:url(button_right_.gif) no-repeat right top;
padding-right:30px;
// vertical-align:middle;
display:block; /*opera*/
display:inline-block; /*ie*/
display:-moz-inline-box; /*ff*/
color: #fff;
}

.round span {
background:url(button_left_.gif) no-repeat left top;
// height:20px;
display:block;
display:inline-block;
padding-left:30px;
line-height:20px;
}

</style>

Christian Kirsch

unread,

Apr 24, 2009, 5:32:28 AM4/24/09

to

Jeff schrieb:

> I have some html/css I've used before but it has either size
> limitations or has problems clearing the floats needed to "shrink wrap"
> the elements.
>
> What makes this work is this line for firefox:
>
> display:-moz-inline-box;
>
> That's the Fire Fox proprietary replacement for the CSS2.1 property
> inline-block
>

Firefox 2, yes. Firefox 3 (out since some time now) *does* support
inline-block:
http://dbaron.org/log/20080613-firefox3-css

Ben C

unread,

Apr 24, 2009, 4:44:20 PM4/24/09

to

On 2009-04-24, Jeff <jeff_...@att.net> wrote:
[...]

> display:-moz-inline-box;
>
> That's the Fire Fox proprietary replacement for the CSS2.1 property
> inline-block

Yes but it was kind of dodgy and didn't work quite the same as
inline-block. Probably best forgotten about now that inline-block is
supported in FF3.

[...]

> So, is it safe to use this moz property and is FireFox expected to
> expand it's rule set to include that? And just what is with all that
> -moz stuff?

-moz is the prefix for anything Mozilla invent. You get -webkit prefixed
things too, it's a convention to reduce namespace pollution.

[...]
> // line-height:20px;

C++ style comments aren't allowed in CSS. Only /* C-style ones */.

Gordon

unread,

Apr 27, 2009, 4:39:59 AM4/27/09

to

On Apr 24, 9:44 pm, Ben C <spams...@spam.eggs> wrote:

If I remember right that's port of the spec for CSS, that vendor-
specific properties always begin with a hyphen. So you get -moz for
Mozilla, -webkit for Safari and Chrome and internet explorer... just
dumps any old crap into the properties that it feels like such as
filter and zoom.