Display: inline-block not working in IE

HTML & CSS
1

I’m having a problem in a page I’m developing, when I put display: inline-block for my li elements it works perfect in Firefox but in IE it’s not working at all.

Check it out here:

http://joomlahax.com/PHP/index.html

Any ideas?

Thanks

2

It only works in IE for elements that by default are “inline”. LI elements are “block” by default, so it won’t work for them.

The workaround is just to give the LI elements display:inline for IE6 and IE7 only. You probably have an IE-only stylesheet already (ideally using a “lt IE8” conditional comment) so you can stick that in there.

Also note that Firefox 3 supports inline-block but Firefox 2 does not. You can’t ignore FF2 so you will also need to add a workaround for FF2, using the rather ugly -moz-inline-box or -moz-inline-block proprietary properties.

The best idea, though, is probably to just use floats and avoid the hassle of inline-block. :slight_smile:

3

ok, for some reason Display: inline, looks like it does now, doesn’t look right at all :frowning:
http://joomlahax.com/PHP/index.html

4

I got it working, have to use a Float: left instead of display: inline;