Thanks Jack. That makes sense and something I should have realized. Now, with the changes made to reflect the suggestion below, each list item is extending across the entire width of the parent block in a vertical order. By adding a "float: left" rule to the list item I can get the effect I'm going for. Of course, then I have to deal with the floating issues so I'm wondering if there is another way around using a float to achieve the same effect.

Pertinent CSS
#mainnav ul {
    margin: 1em auto;
    padding: 0;
}

#mainnav li a:link, #mainnav li a:visited {
    width: auto;
    margin: 0 0.35em 0 0;
    padding: 1em 0;
    color: #FFF;
    text-align: center;
    display: block;
    text-decoration: none;
    background-color: #000;
}

#mainnav li {
    margin: 0 0.5em 0 0;
    padding: 0;/*
    float: left;*/
    display: inline;
}

On May 18, 2005, at 3:35 PM, jack fredricks wrote:

you can't give a width to an inline element like an <a>. Turn your
<a>s into block elements using

a {
    display:block;
    width:auto;
}

li {
   width:88px
}

On 5/19/05, Mike Stickel <[EMAIL PROTECTED]> wrote:

I'm working on a new project and the horizontal navigation is a
pretty strict size - each item should be about 88px wide so that the
navigation fills the width of the page. I thought using a list would
work but I can't figure out how to specify the width for list items
and I'm hoping someone can shed some light on the subject for me.


Mike Stickel Screenflicker Developments www.screenflicker.com

p: 403-923-7667
e: [EMAIL PROTECTED]
______________________________________________________________________
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Reply via email to