CODEWITHSUNDEEP
htmlinternet-explorer-7internet-explorer-6css
Binyamin
Binyamin

Reputation: 7803

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

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>

Upvotes: 0

Views: 7629

Answers (3)

Gareth Midwood
Gareth Midwood

Reputation: 29

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.

Upvotes: 1

Jacob Rask
Jacob Rask

Reputation: 24368

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.

Upvotes: 3

Chris
Chris

Reputation: 27609

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?

Upvotes: 0

Related Questions