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

Update:

width:1px, overflow:visible didn’t work. (Got the same squashed 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 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.