Min-width problem on <LI> not content containers

[dlite922]

Before you baulk at yet another min-width problem, hear me out. I've been googling for a good hour now and experimenting but at no avail.

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:

[ Item 1    ] [ Item 2    ] [ Long Item here ] [ Item 2   ]
 

that being said, I don't know how to implement the various solutions (CSS only, I do not want a JS solution) such as this one:

Stu Nicholls | CSSplay | Min-Width for Internet Explorer

The relavant CSS code:

#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;
}

the HTML code:

 <ul id="cymenu">
                            <li>
                                <a href="#" >Item1</a>
                            </li> 
. 
.
.
.
 

using the solution in the link, the #cymenu li {} is the container and #cymenu li a {} is the inner div?

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

[drhowarddrfine]

If I'm following you right, all you have to do is set a width for the <li>. min-width only sets the minimum but no maximum.

[Dormilich]

I didn't understand the source either (well, maybe if I spent more time). I'd go for a zero height <div>.

// HTML
<li>
  // if you like you can use conditional comments
  // around the div
  <div class="min_width"></div>
/* alternate solution for XHTML
  <div class="min_width"/>
*/
  <a href="...">...</a>
</li>
 
// CSS
.min_width {
  width: 100px;
  height: 0;
}

if you know that javascript is running, you can add the div via javascript.

regards