Geek Answers Handbook

IE7 does not honor mapping: block on <ul> <li>

I am trying a simple vertical navigation using the following HTML markup:

<ul>
    <li><a></a></li>
    <li><a></a></li>
    <li><a></a></li>
</ul>

Despite the presence display: block;of two elements <li>and <a>, IE7 not correspond to the full width comprising div. Any ideas on this?

http://jsfiddle.net/6eKGL/

IE7 vs IE8 +

UPDATE

Now I suppose that the problem is related to the property of the positioncontainer div and the fact that its width should be determined by the content inside the elements <a>.

+3
source share
5 answers

Here is an updated script with IE-7 problem. http://jsfiddle.net/6eKGL/35/

: http://jsfiddle.net/6eKGL/35/embedded/result

CSS

#ajax-search ul li a {
    display: block;
    /*min-width: 150px;*/ // Remove this rule and the IE-7 will start respecting the display block
    padding: 9px 18px;
}

IE-7

enter image description here

+4

overflow: hidden <li> !

+1

overflow:hidden ul a http://jsfiddle.net/sergeir82/N2thx/

0
source

Try removing "min-width" from "# ajax-search ul li a {display: block; padding: 9px 18px; min-width: 150px;}"

0
source

More articles:


All Articles