css - IE7 - UL > LI menu with 'extra' padding - Why zoom:1 (`hasLayout`) makes it work? -

excerpt of question: have menu works in every browser buggy on ie7. solved throwing zoom:1 haslayout related problems involves float, position , stuff. why time zoom made work?

i have menu works in every browser (even on ie8+) looks this:

consists of li holds div working 1px border using .png bg , block a have icon , text.

the resumed html ul.adminmenu>li>(div.menuborder)+(a{link}):

<ul class="adminmenu">     <li>         <div class="menuborder"></div>         <a href="">link</a>     </li>     (...other li's...) </ul> 

the li.active gets darker bg.

unfortunately i'm obligated make work on ie7 standards mode (that explains why use div .png instead of rgba border) looking this:

yes. there whatsoever space between start of li , "border" div. tried following methods:

• display:inline-block block
• remove tabs , white spaces on html
• font-size , line-height 0 on separator

none of them have worked , there nothing on dev tools points margin or border (all 0 !important).

so question is: there no floated elements, no absolute positioned things, blocks. why zoom:1 (which trigger haslayout) make damned spaces go away?

the jsfiddle (there markup divs ignore them, had more stuff removed sake of simplicity)

i know it's part of ie 'features (bugs)' looking else answer.

lists

lists affected layout applied either list (ol, ul) or list elements (li). different versions of ie react differently. evident effects on list markers (fully customized lists markers not required won't have these problems.) markers created internally adding elements “attached” list elements (usually hangs out of them) , seems rather unstable. unfortunately, being “internal” objects, cannot accessed try correct mis-behaviours.

the evident effects are:

layout applied list makes markers disappear or differently/wrongly positioned.

sometimes can restored changing margins on list elements. looks consequence of fact layout element tends crop internal elements hanging out of it.

layout applied list elements creates same problems above, , more (extra vertical space between list items)

a further problem (in ordered lists) list element layout seems have own counter. let's have ordered list 5 elements third has layout. we'll see this:

1... 2... 1... 4... 5...

moreover when list element layout displays on multiple lines marker vertically aligned @ bottom (not @ top, expected.)

some of these problems cannot cured, when markers desired it's better avoid layout on lists , list elements. if it's necessary apply dimension, better applied other elements: example width can applied external wrapper, , height content of each list item.

another common problem lists in ie occurs when content of li anchor display: block. in these conditions white space between list items not ignored , displayed line each li. 1 of methods avoid vertical space give layout block anchors. has benefit of making whole rectangular area of anchors clickable.

for more detail visit : http://www.satzansatz.de/cssd/onhavinglayout.html