CSS display: inline-block and width: 100% does not work on IE6 and IE7

Question

CSS display: inline-block and width: 100% does not work on IE6 and IE7.
Does anyone have some solution? Thanks!

<style>
nav {text-align: justify;}
nav li {display: inline-block; white-space: nowrap;}
nav span {display: inline-block; width: 100%;}
</style>
...
<nav>
  <ul>
    <li>Home Page</li>
    <li>Services</li>
    <li>Clients</li>
    <li>Portfolio</li>
    <li>Contact Us</li>
    <span></span>
  </ul>
</nav>

Update:
So it works fine also on IE6, but when the list has more words it looks not good-> "Contact               Us":

nav { text-align: justify; }
nav * { display: inline; }
nav span {
  display: inline-block;
  position: relative;
  width: 100%;
  height: 0;
}
<nav>
  <ul>
    <li>Home Page</li>
    <li>Services</li>
    <li>Clients</li>
    <li>Portfolio</li>
    <li>Contact Us</li>
  </ul>
  <span></span>
</nav>

Answer 1

I've not recreated the code but I can tell you that you aren't allowed a span element nested inside a ul like that. Try changing the span to an li with and id and seeing if you get any better results.

What are you trying to achieve with this?

Answer 2

For IE6 and IE7 you could try using (in a style sheet included with conditional comments)

display: inline;
zoom: 1;

zoom: 1 trigger hasLayout which is similar to the behaviour of inline-block.

I do agree with the above commenters that you should not have a span as a direct child of an ul, though.

Answer 3

A few suggestions:

• Correct your HTML - UL should only contain LI, not SPAN
• There is no such thing as a NAV element
• Try floating the LI's using float: left - you should also set a width on them
• If you want an element to fill the width of the page, use display: block; This will work in all browsers - providing your HTML is correct!

Take a look at the html validator, this should help you with your HTML errors - there's also a great validator plugin for firefox that does the job too.