Magenta Placenta wrote: > Is there a way to get a stylized list to span the width of it's parent > container? I've tried a width:100% as well as the exact pixel width (784) > on the <ul>, coupled with padding on the anchor tag to give the button text > some horizontal padding. This gets me close, but I end up with a slight gap > on the far right side. > > What I ended up doing was classing the first <li> and applying a pixel width > to that. You can see this at: > http://designs.inherent.com/dynapsis/build/bioserver.cfm > > Without that first li classed/width, there is a gap (oh, 10 pixels or so) on > the far right button, which becomes very obvious when you do a mouseover to > change the background color. You can see this at: > http://designs.inherent.com/dynapsis/build/bioserver2.cfm > > Is there an easier way to accomplish what I've done at the first url above? >
First of all, thanks so much for providing two URLs, one showing the untouched problem, and one showing your attempted fix. Very helpful. The float on the ul is what is making it shrinkwrap the li's inside. Giving it width: 100% stops the shrinkwrapping and makes it expand to fill the container. Now, this makes the last button wider than the rest, which is probably not what you want either. But what's the alternative? Make the widths of all the buttons get a little wider to eat up that extra space? There's no CSS property to tell them to do this. Essentially you're wanting table cell behavior: take a width and divide it into 9 chunks that are equally spaced. Floating the li's makes their widths dependent on the amount of content inside. You could make the li's display: table-cell, but that's not supported by IE, even IE7.* I suggest changing your design. Remember that not everyone will be using the same font size, so sometimes that list of links will take up two lines, not one. So don't concern yourself so much with making the links perfectly spaced out and filling up the whole strip, because you can only make this happen in very controlled circumstances. What if, instead of this, you center all the buttons? Any extra space will be divided between the left and right sides, which you can separate off from the buttons with borders. This will look good both when the nav bar is one line and when it has to flow onto two lines. Zoe * For a great example of this, check out http://mrclay.org/web_design/tabs/. It doesn't work in IE unless you use JavaScript to change the list into a real table. This might be acceptable to you. Not sure how it works in older browsers, or on a Mac. -- Zoe M. Gillenwater Design Services Manager UNC Highway Safety Research Center http://www.hsrc.unc.edu ______________________________________________________________________ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
