css li menu dynamic line widths in IE6

Question

I've got a css menu like this:

<ul>
  <li><a>Item1</a></li>
  <li><a>Item Two</a></li>
  <li><a>Item C</a></li>
  <li><a>A Rather Long Menu Item Down Here</a></li>
</ul>

I want to create this:

|-----------------------------------|
| Item1                             |
|-----------------------------------|
| Item Two                          |
|-----------------------------------|
| Item C                            |
|-----------------------------------|
| A Rather Long Menu Item Down Here |
|-----------------------------------|

but I'm getting this:

 -------- 
| Item1 |
|----------- 
| Item Two |
|-----------
| Item C |
|----------------------------------- 
| A Rather Long Menu Item Down Here |
 ----------------------------------- 

If I set either the [li] or [a] tags to display:block, they stretch to fill the maximum possible width. I want them all to have the same width, which is dynamically determined by the widest item, rather than by manually putting a width on the [ul] tag.

Oh, and the target is IE6. :)

Answer 1

Your only option is javascript.

BTW, one of my sites is visited by a large amount of home users. We've seen that IE6 is down to 12% of our traffic. Two months ago it was 20%. This is while overall IE traffic is staying at 76%

My point is that you probably shouldn't worry about IE6 quirks too much anymore.

Answer 2

Certain amount of hacking to make it work in IE6, because width:auto never really worked properly.

I have seen some solutions to this problem using width:1px; overflow:visible;, which might work in this case, but best to do it in a conditional comment so as not to stuff up in "real" browsers, or use the holly hack or similar. Be aware that IE 6 will probably handle this differently in quirks mode to standards mode, so know your doctype.

BTW, would put your anchor tags as block, so you get consistent width mouse targets.

Answer 3

width:1px, overflow:visible didn't work. (Got the same sqashed effect as without the display:blocked anchors.)

This is for an intranet where IE6 is the target, so I'm stuck there. (In other projects, I've stopped worrying about it.) JS is a requirement, so maybe I'll use that. (I always hate doing that, though.)

Answer 4

To get shrinkwrapped li inside the ul with pure CSS but uneven widths try:

ul,li {float:left;}
ul {overflow:hidden;}
li {clear:left;}

(then maybe adapt faux columns with fixed line-height and a repeating background image to style the li elements)

If you're sure it's IE-only then JavaScript can be built-in to CSS with a dynamic property to set the child width to match the parent thus:

ul,li {float:left;}
ul {overflow:hidden;}
li {clear:left;width:expression(this.parentNode.offsetWidth);}

Answer 5

This is remarkably simple:

<style>
ul {
float: left;
}
    ul li a {
    display: block;
    white-space: nowrap;
    border: 1px solid blue;
    }
</style>

<ul>
  <li><a>Item1</a></li>
  <li><a>Item Two</a></li>
  <li><a>Item C</a></li>
  <li><a>A Rather Long Menu Item Down Here</a></li>
</ul>

The trick here is the combination of floating the <ul> and adding white-space: nowrap; to the blocked anchors. In fact you don't even need the "nowrap" unless your <ul> is battling for space. As for the suggestion of ignoring 12% of your visitors.. well...

Answer 6

No, the <li>'s are fine, but the <a href>'s are not 100% width. I'm tearing my hair over this too. :-((

Help, anyone?