display:table, table-row, table-cell support needed for lt IE8

[GoogleCodeExporter]

What steps will reproduce the problem?
1. Use the attribute display:table; (with a fixed width) and it won't display 
correctly on browser less than IE 8.
2.
3.

What is the expected output? What do you see instead?
I expect for a my <nav> to look spaced like a table with the "table-cells" 
evenly spaced out but instead it's all crammed together.

What version of the product are you using? On what operating system?
ie9-js, windows 7

Please provide any additional information below.
Example:
<nav>
      <a href="link1.html">Blah Blah</a>
      <a href="link2.html">Blah Blah Blah Blah Blah</a>
      <a href="link3.html">Blah</a>
      <a href="link4.html">That's enough</a>
</nav>

CSS:
nav {display:table; float:left; height:27px; margin:0 0 3px 0; padding:0; 
text-align:center; width:950px; }
nav a, nav a:visited { display:table-cell; border-bottom:none; 
border-right:#f68026 1px solid; color:#fff; margin:0; padding:6px 18px; }
nav a:hover, nav a:active { background-color:#f38025; color:#fff; }

Original issue reported on code.google.com by sethhump...@gmail.com on 21 Jun 2010 at 10:30

[GoogleCodeExporter]

Do you need exacly display: table? Do you want to make horizontal menu?

Why not just:
nav a, nav a:visited {display: block; float: left; width: some; height: some; 
margin: 0 0 3px 0;}?
or
nav a, nav a:visited {display: inline, margin: 0 0 3px 0;}

and 

nav a:hover, nav a:active { background-color:#f38025; color:#fff; }

Otherwise you should use list to make menu <ul> and list items <li>;)

Original comment by resp...@gmail.com on 22 Jun 2010 at 9:29

[GoogleCodeExporter]

Do I need display:table? No, I can actually use a table even though I despise 
them. In most instances I would use an unordered list to create my horizontal 
menu.

To get the proper spacing from the li's so that they proportionally fill the 
width of the ul you really have to tweak the padding based on the content.  
Since I'm creating a university level template, it needs to accommodate the the 
various number of list items and widths of the subsequent textual length of 
their anchors that the different colleges/departments will be using.

So yeah, I need to use a table or simulate a table. And since the table options 
for Display: are supported in CSS3 I'd like to use them.  

Too bad IE is so annoying, but this script has helped so much already.

Original comment by sethhump...@gmail.com on 23 Jun 2010 at 12:16

[GoogleCodeExporter]

[deleted comment]

[GoogleCodeExporter]

TBH, This is pretty difficult to implement (maybe impossible without altering 
the DOM). Any solution would also be pretty slow. I'll add this as an 
enhancement but with low priority.

Original comment by dean.edw...@gmail.com on 30 Jun 2010 at 6:54

• Changed state: Accepted
• Added labels: Priority-Low, Type-Enhancement
• Removed labels: Priority-Medium, Type-Defect

[GoogleCodeExporter]

[deleted comment]

[GoogleCodeExporter]

I've solved this using jQuery:

$(document).ready(function(){
  if ($.browser.msie && $.browser.version == 7)
  {
    $(".tablecell").wrap("<td />");
    $(".tablerow").wrap("<tr />");
    $(".table").wrapInner("<table />");
  }
});

the above script assumes you have divs using style such as:

<style>
.table     { display: table; }
.tablerow  { display: table-row; }
.tablecell { display: table-cell; }
</style>

Original comment by andymag...@gmail.com on 10 Feb 2011 at 10:19