ie 7 doesn't work with CSS inline-block or fixes

Question

I know that this has been asked a million times before, but nothing that I have tried has solved the problem. I'm working on a nice looking <select> type thing. I'm basing it off of common CSS drop down navigation menus (using nested <ul> s and <li> s, just with a few tweaks. One of the tweaks is that I need it to display inline (without floating it because it goes past any other elements in the same line as it, and I don't want to float everything else around it). I've got it working well in the browsers besides ie 7 (and probably anything lower, but I don't need anything lower than ie7). Here is the code: http://jsfiddle.net/ralokz/hjDVS/2/

If you look at that in any non-ie7 browser, it looks like how I want it to:

But if you look at it in ie7, it looks like this:

One site that I saw come up a lot for the inline-block fix is this: http://blog.mozilla.com/webdev/2009/02/20/cross-browser-inline-block/ . That worked for ie8, but unfortunately ie7 still doesn't look right.

Is there any other way to fix inline-block for ie7? Or, is there a CSS alternative to make sure the the second level <li> s are always vertically aligned with the the first level <li> ? Thanks!

Answer 1

IE6 and IE7 do support inline-block , but they have a major bug with it: They only support it on elements which have a default display style of inline .

Therefore span {display:inline-block;} will work, but div {display:inline-block;} doesn't.

If this is an issue for you, there's good news: they have another bug, which makes inline work the way inline-block is supposed to in some cases, so you may be able to simply use display:inline; .

If you are going to do this, you need to be careful to make sure that only IE6 and IE7 do this, as other browsers will need a proper inline-block; style. Some browser-specific hacks or conditional comments may be required to achieve this.

Answer 2

Add: position:relative; to div.dropdown ul li , get rid of the margins on div.dropdown ul li ul and set it's top:25px , left:-1px; , width:100% ; finally, set div.dropdown ul li ul li to margin:0; delete the left-right padding, and set width:100% ...

I might have missed something, but here's a working example: http://jsfiddle.net/hjDVS/7/

I think your real problem was the absolutely positioned ul

Answer 3

For each rule with display:inline-block , in the IE 7 stylesheet put zoom:1; display:inline; zoom:1; display:inline; This works with all elements, and works about the same way.