0

If you look at this code: http://jsfiddle.net/b3KaM/2/

in IE7 the <a> tags do not stretch to their parent <li> width even if display: block; is set. You can see the difference with the background color set to red on the list items and yellow on the links.

it obviously work fine in FF/Chrome & friends.

EDIT: the complication here is that I cannot set a fixed width - the link text should stay on one line and the whole list should expand as needed.

I'm aware that this as been asked before and I've found a few questions on SO but I could not find a valid solution to this issue - any ideas anyone?

If not - is it safe to say that is not possible to achieve the same result on IE7 as on other browsers, i.e. it's an Internet Explorer bug with no workaround?

Luca
  • 9,259
  • 5
  • 46
  • 59

2 Answers2

2

This problem is caused by a rendering phenomenon in IE7 and lower known as hasLayout.

To fix the problem, you must simply prevent your a elements from "gaining layout".

Unfortunately, there's massive list of stuff that causes an element to "gain layout".

Your a elements currently have overflow: hidden and min-height set. If you remove those properties, it will work in IE7.

thirtydot
  • 224,678
  • 48
  • 389
  • 349
  • Here's a quick demo with those things commented out: http://jsfiddle.net/thirtydot/b3KaM/14/. It now works in IE7, but obviously it's now slightly visually broken. Hopefully you can make it look right again, without breaking the "rules of hasLayout". – thirtydot Jun 27 '12 at 11:55
  • thanks, in my environment, it does break things even more than what's shown on the fiddle - nevertheless you've demonstrated that your answer works for the specific so I will +1 and accept your answer - first time ever that I DIDN'T want to trigger hasLayout! – Luca Jun 27 '12 at 12:04
0

With block you have to give the width also for the element.For example:- http://jsfiddle.net/b3KaM/8/

Gurvinder
  • 760
  • 2
  • 8
  • 16