Css li menu dynamic line width in IE6
I have a css menu:
<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 am getting this:
-------- | Item1 | | ----------- | Item Two | | ----------- | Item C | | ----------------------------------- | A Rather Long Menu Item Down Here | -----------------------------------
If I set the [li] or [a] tags to display: block, they stretch to fill as wide as possible. I want them all to have the same width, which is dynamically determined by the widest element, rather than manually putting the width in the [ul] tag.
Oh, and the target is IE6. :)
Update:
width:1px, overflow:visible
does not work. (The result is the same compressed effect as without the display: locked anchors.)
This is for intranet where IE6 is the target, so I am stuck there. (In other projects, I stopped worrying about this.) JS is a requirement, so maybe I'll use that. (I always hate doing this.)
source to share
Your only option is javascript.
By the way, one of my sites is visited by a large number of home users. We've seen IE6 account for up to 12% of our traffic. Two months ago it was 20%. This is while overall IE traffic remains at 76%
My point is that you probably don't need to worry about the specifics of IE6 anymore.
source to share
It's 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 a combination of floating <ul> and adding white space: nowrap; to locked anchors. In fact, you don't even need "nowrap" unless your <ul> is fighting for space. As for offering to ignore 12% of your visitors .. well ...
source to share
Some degree of hack to get it to work in IE6 because width: auto never worked as expected.
I've seen some solutions to this problem using width: 1px; overflow: visible; which might work in this case, but it's best to do it in a conditional comment to avoid typing "real" browsers or using hacked holling or the like. Keep in mind that IE 6 will probably handle this differently in quirks mode in standard mode, so know your doctype.
BTW, will put your anchor tags as a block so you get consistent mouse targets.
source to share
To get a squashed li inside a ul with pure CSS but uneven width try:
ul,li {float:left;}
ul {overflow:hidden;}
li {clear:left;}
(then maybe adapt faux columns with fixed line height and repeating background for styles of li elements)
If you are sure that it is IE-only, then JavaScript can be inlined in CSS with a dynamic property to set the width of the child to match the parent:
ul,li {float:left;}
ul {overflow:hidden;}
li {clear:left;width:expression(this.parentNode.offsetWidth);}
source to share