I have a horizontal UL/LI menu and I want the li width to be at least a certain amount (say 100px) but also extend if the text is longer than that.
Observe:
Expand|Select|Wrap|Line Numbers
- [ Item 1 ] [ Item 2 ] [ Long Item here ] [ Item 2 ]
Stu Nicholls | CSSplay | Min-Width for Internet Explorer
The relavant CSS code:
Expand|Select|Wrap|Line Numbers
- #cymenu li {
- float: left;
- min-width: 100px;
- text-align: left;
- margin: 0;
- padding: 0;
- list-style: none;
- font: bold 11px arial;
- border-left: 1px solid #333333;
- }
Expand|Select|Wrap|Line Numbers
- <ul id="cymenu">
- <li>
- <a href="#" >Item1</a>
- </li>
- .
- .
- .
- .
Well I tried that and all I got was a complete washed with what ever the color of the border was. (in the example, red). Even if this solution worked, I'd have to find a way to have a transparent border it seems because my menu has a gradient x-repeat background.
Also most of the solutions seem to refer to a browser window shrink, which I don't care about. My app won't be useful anyway if shrinked close to the menu.
Thanks for any pointers,
Dan