> And, moment of discovery for me...when 10px of padding is added to move the
> text over, 10px must be subtracted from the container, to keep it the same
> width.
The way it is configured now, right. There have been a few discoveries
since those menus were released (although they are still great
examples and quite workable). #navcontainer doesn't need a width or
anything else and the styles can be deleted (unless there is a
specific need for a width or a margin-right to achieve part of your
layout design so it gives you some flexibility). Move the fixed width
to the LI. Below should be /everything/ you require to make it work:
#navcontainer ul {
margin-left: 0;
padding-left: 0;
list-style-type: none;
font-family: Arial, Helvetica, sans-serif;
}
#navcontainer li {
width: 166px;
overflow: hidden;/*to make links full width in IE*/
}
#navcontainer a {
display: block;
padding: 3px;
margin: 3px 0;/*added to show how to add vertical space*/
background-color: #036;
border-bottom: 1px solid #eee;
}
#navcontainer a:link, #navlist a:visited {
color: #EEE;
text-decoration: none;
}
#navcontainer a:hover {
background-color: #369;
color: #fff;
}
/*IF supporting IE6 then add the following also*/
* html #navcontainer a {
height: 1%;/*kills whitespace between list items but you can probably
get away with leaving this out*/
}
Now you can alter the padding as you see fit without having to
calculate new widths every time and the width of the link IS the width
of the LI item.
HTH
--
/*Mark
______________________________________________________________________
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
