HOW TO: display inline block question

[therealvibe]

Dear All,

I am developing a sample site:

http://orbitalnets.com/previews/orbitalnets/

In IE6 and IE7 the 4 blue right top menu icons are displaying fine but in Firefox and Safari that part is just not being displayed.

#helpnav
This is a list item with the display set at inline-block. With background-images and background position hovers.

The only way to make this appear is to change the display property from display: inline-block to display: block. But then the list will not appear inline. It will then be displayed vertically. Is there a way to make them appear as inline-block in FF and safari just as it it displaying now in IE6 and 7?

Let me know.

Regards,

Dwayne

[Centauri]

How about :

#helpnav {
	width: 120px;
	height: 23px;
	float: right;
	clear:right;
}

#helpnav ul li {
	margin: 2px;
	float:left;
	list-style: none;
}

#helpnav ul li a {
	float: left;
	width: 20px;
	height: 20px;
	border: none;
}

[drhowarddrfine]

The CSS 'inline-block' does not work in Firefox, and I guess Safari, but you can try -moz-inline-block but that's not exactly the same as the CSS version so see if that works. If not, I can look up my work-alike later.

[therealvibe]

Dear Centairi,

This worked! So in the future to have image inline lists always float them to the left instead of dislplaying the <a> inline-block?

Thx again,

Dwayne

[Paul O'B]

Hi Dwayne,

This needs clearing up a little (although it is complicated)

As the Dr said above Firefox doesn't support display:inline-block although Opera and Safari do, but Firefox does have a "Vendor Specific extension "which works similarly as already pointed out above..

IE only supports inline block on inline-elements such as anchors.

Block level elements can be made to behave like inline-block in IE by declaring them as inline and then forcing "hasalyout" (e.g. zoom:1.0).

In fact it seems the only thing that display:inline-block does in IE is to force "haslayout" on the element anyway as inline elements can be made display:inline-block simply by applying "haslayout" to them without even using display:inline-block.

Most time authors who use display:inline-block are merely forcing "haslayout" on the element and not really wanting inline block behaviour anyway.

The simplest solution is to float the element instead and forget about display:inline-block unless you have understood all I said above in full

Is that clear as mud