Those. 7 does not work with inline CSS block or fixes

Question

I know this was asked a million times earlier, but nothing I tried solved the problem. I am working on a beautiful view like <select> . I base this on common CSS navigation menus (using the nested <ul> and <li> s, just with some settings. One of the settings is that I need to display the built-in (without swimming, because it goes past any other elements on the same line as me, and I don’t want to pop up in everything else.) It works fine for me in browsers except 7 (and maybe nothing lower, but I don't need something lower than ie7) Here is the code: http://jsfiddle.net/ralokz/hjDVS/2/

If you look at this in any browser other than ie7, it looks the way I want:

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

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

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

Answer 1

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

Maybe I missed something, but here is a working example: http://jsfiddle.net/hjDVS/7/

I think your real problem was absolutely positioned ul

Answer 2

IE6 and IE7 support inline-block , but they have a major error: they only support it on elements that have a default inline display style.

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

If this is a problem for you, the good news is: they have one more error due to which inline works as expected that inline-block should be used in some cases, so you can just use display:inline; .

If you intend to do this, you need to be careful to ensure that only IE6 and IE7 do this, as other browsers need the right inline-block; style inline-block; . This may require some browser-specific hacks or conditional comments.

Answer 3

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