Sent by Jochem Maas on 27 February 2006 22:10
Jonathan Carter wrote:
> I want to create a menu list that will expand/shrink with the browser
> and also be horizontally centered. I setup a test case with a simple
> <ul> with a long list of items, and put together the CSS to style it the
> way I want. It's pretty close to my desired results, but it's not 100%
> and I'm also not sure if the CSS is as good as it could be. I tried
> floating the <li>'s but that didn't lend itself well to centering the
> text, so I tried making them inline elements, which seems to work well
> for FF, but the padding obviously didn't translate well in IE.
how does this work for you?:
ul
{
list-style: none;
text-align: center;
padding: 0;
line-height: 170%;
font-size: .7em;
}
ul:after
{
clear: left;
content: "";
display: block;
}
ul li
{
display: inline;
white-space: nowrap;
}
ul li {
border-left: 1px solid #999;
margin-left: 5px;
padding-left: 8px;
}
ul li.First {
border-left: none;
margin-left: 0;
padding-left: 0;
}
>
> Here is the test case: http://epiphanize.com/Test.htm
>
> Any help and suggestions would be appreciated.
>
> -----
>
> Jonathan Carter
> ______________________________________________________________________
> css-discuss [EMAIL-REMOVED]]
> 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/
______________________________________________________________________
css-discuss [EMAIL-REMOVED]]
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/