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

Question

i create a menu but it doesn't work in ie6 & ie7 because of display:table. how can i do this to work in ie6 and ie7 with style display:table

there is my example

http://jsfiddle.net/amkrtchyan/fCsax/

but it doesn't work in ie6 and ie7

Answer 1

IE6 and IE7 do not support display: table;

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

You can either use a real table if its tabular data, otherwise you can use lists (ul) and inline-block with the *display:inline hack and zoom:1 for IE7 and below.

Answer 2

IE7 doesn't support display:table, so you have to rebuild the menu in a different way or you can use js for this

check this IE7 and the CSS table-cell property

Answer 3

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/

Answer 4

The only way is to use tables for IE6 & IE7 using conditional comments:

<!--[if lte IE 7]> special markup for IE6 and IE7 <![endif]-->

So, add table, tr, and td tags properly, only for IE in your menu elements.

Another solution is to use: display:inline-block;

Answer 5

I think IE6 does not support the CSS version that you used. Use compatible CSS with IE6.