I've created a webpage, and have a horizontal navigation bar directly under the header. In Dreamweaver, the width looks fine, but when I preview it in different browsers, the last link button is under the first or I have a gap at the end of the bar. How can I fix this? Here is the code: ul.nav { list-style: none; /* this creates the top border for the links - all others are placed using a bottom border on the LI */ margin-bottom: 15px; /* this creates the space between the navigation on the content below */ height: 1.8em; border-left: 1px #EBEBEB solid; border-bottom: 1px #EBEBEB solid; padding-bottom: 3px; background-color: #3C3631; font-family: Baskerville, "Palatino Linotype", Palatino, "Century Schoolbook L", "Times New Roman", serif; font-size: 12pt; text-align: center; width: 100%; } ul.nav li { border-bottom: 1px solid #666; } ul.nav a, ul.nav a:visited { /* grouping these selectors makes sure that your links retain their button look even after being visited */ padding: 5px 5px 3px 15px; display: block; /* this gives the link block properties causing it to fill the whole LI containing it. This causes the entire area to react to a mouse click. */ text-decoration: none; background-color: #3C3631; color: #EBEBEB; font-weight: bold; border-right: 1px #EBEBEB solid; float: left; width: 18.3%; } ul.nav a:hover, ul.nav a:active, ul.nav a:focus { /* this changes the background and text color for both mouse and keyboard navigators */ background-color: #EBEBEB; color: #000; border-bottom: 3px #999999 solid; border-right: 3px #999999 solid; padding-bottom: 0px; padding-right: 3px; font-family: Baskerville, "Palatino Linotype", Palatino, "Century Schoolbook L", "Times New Roman", serif; font-size: 12pt; text-align: center;
... View more