Display: Table Dosen't Work In Ie6 & Ie7

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

Solution 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.

Solution 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

Solution 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/

Solution 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;

Solution 5:

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