display: table dosen't work in ie6 & ie7 [closed]

Answer 1

I see that you’re using display:table to achieve a side-by-side layout of the menu items.

I think you can produce a similar result in IE 6 and 7 using display:inline-block on the menu items:

• http://jsfiddle.net/fCsax/3/

The differences between your original and this version are:

1. Remove display:table from .menu
2. Add overflow: hidden to .menu so that its rounded corners clip its menu items too
3. Remove display:table-row from .menu ul
4. Add display:inline to .menu li
5. Move the padding from .menu li to .menu ul li a
6. Add display:inline-block to .menu ul li a

I’ve had a quick look in IE 6, and I think it’s working:

• http://jsfiddle.net/fCsax/3/embedded/result/