I think I can resolve it if I can apply a separate style (via a class "lastnavitem") to the last link in each navbar (to remove the 1px right-hand border); however I can't seem to get the selector right. It's working fine for the class "current" though. What am I doing wrong?
Any other advice on getting the widths right would also be appreciated. Percentages seem to muck things up pretty reliably.
Here's the page code:
Expand|Select|Wrap|Line Numbers
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
- "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
- <html>
- <head>
- <title>Page title</title>
- <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
- <style type="text/css">@import "stylesheet.css";</style>
- </head>
- <body>
- <div id="container">
- <div id="header">
- <!--some images & text--!>
- <ul id="topnav">
- <li><a href="index.html" class="current">Home</a></li>
- <li><a href="link2.html">Link 2</a></li>
- <li><a href="link3.html">Link 3</a></li>
- <li><a href="link4.html" class="lastnavitem">Link 4</a></li>
- </ul>
- <!--end of "header" div-->
- </div>
- <div id="content">
- <!--various divs with content-->
- </div>
- <div id="footer">
- <ul id="bottomnav">
- <li><a href="first.html">First</a></li>
- <li><a href="second.html">Second</a></li>
- <li><a href="third.html">Third</a></li>
- <li><a href="fourth.html">Fourth</a></li>
- <li><a href="fifth.html" class="lastnavitem">Fifth</a></li>
- </ul>
- <p>Text</p>
- <!--end of "footer" div-->
- </div>
- <!--end of "container" div-->
- </div>
- </body>
- </html>
Expand|Select|Wrap|Line Numbers
- #container {
- width: 700px;
- }
- ul#topnav, ul#bottomnav {
- background-color: #CCCCCC;
- text-align: center;
- border-bottom: solid #FF0000 2px;
- float: left;
- list-style-type: none;
- padding: 0;
- margin-left: 0;
- margin-right: 0;
- margin-top: 0;
- font-size: 9pt;
- }
- ul#topnav {
- font-weight: bold;
- margin-bottom: 3px;
- }
- ul#topnav li, ul#bottomnav li {
- display: inline;
- }
- ul#topnav li a, ul#bottomnav li a {
- float: left;
- padding-top: 5px;
- padding-bottom: 5px;
- text-decoration: none;
- border-right: 1px solid #FFFFFF;
- }
- ul#topnav li a {
- width: 174px;
- }
- ul#bottomnav li a {
- width: 139px;
- }
- a:link.current, a:visited.current {
- background-color: #FF0000;
- color: #FFFFFF;
- }
- a:link.lastnavitem, a:visited.lastnavitem {
- border-right: none;
- }