3

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

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

Despite having display: block; on both the <li> and <a> elements, IE7 does not appear to respect the full width of the containing div. Any ideas on this one?

http://jsfiddle.net/6eKGL/

IE7 vs IE8+

UPDATE

I now believe the issue is related to the position property of the container div and the fact that its width is to be determined by the content inside of the <a> elements.

Derek Hunziker
  • 12,996
  • 4
  • 57
  • 105
  • block level elements are 100% the width of the parent element, even when padded and margined as long as their widths are not set explicitly. so it's better to set the width in the parent in this case, and block level children will conform. – Joseph Dec 28 '11 at 06:19
  • @Derek Hunzinker Dear please have a look on my answer. Let me know if any issues. Thanks – w3uiguru Dec 26 '12 at 17:10

5 Answers5

4

Here is the updated fiddle with IE-7 issue solved. http://jsfiddle.net/6eKGL/35/

Demo: 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;
}

See below screenshot of IE-7

enter image description here

w3uiguru
  • 5,864
  • 2
  • 21
  • 25
1

Setting overflow: hidden on the <li> element do the trick for me !

Matthieusch
  • 43
  • 7
0

try adding a doctype to your html, preferrably html5 or xhtml 1.0 strict. that way, IE7 renders in standards mode and not use it's own box model.

also, use a css reset. google for "eric meyer reset".

references:

http://www.quirksmode.org/css/quirksmode.html

http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/

http://en.wikipedia.org/wiki/Quirks_mode

UPDATE:

see this fiddle: http://jsfiddle.net/6eKGL/23/

Joseph
  • 117,725
  • 30
  • 181
  • 234
0

Set overflow:hidden for ul and some wide width for a http://jsfiddle.net/sergeir82/N2thx/

Sergey Ratnikov
  • 1,296
  • 8
  • 12
  • Thanks for your response. I like where you are going with this, however, if the content happens to be particularly long, it sneaks past the boundary of the container. See: http://jsfiddle.net/N2thx/1/ – Derek Hunziker Dec 28 '11 at 06:32
0

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

Mahima
  • 489
  • 1
  • 5
  • 17