By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
424,983 Members | 2,049 Online
Bytes IT Community

Home Questions Articles Browse Topics Latest Top Members FAQ

home > topics > html / css > questions > selecting the class of a navbar link
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 424,983 IT Pros & Developers. It's quick & easy.

Selecting the class of a navbar link

P: 20
I'm having some trouble with horizontal navbars. In particular, I can't seem to get the width right for IE.

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
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  3.  
  4. <html>
  5.  
  6. <head>
  7.  
  8.     <title>Page title</title>
  9.  
  10.     <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
  11.  
  12.     <style type="text/css">@import "stylesheet.css";</style>
  13.  
  14. </head>
  15.  
  16. <body>
  17.  
  18. <div id="container">
  19.  
  20. <div id="header">
  21.  
  22.     <!--some images & text--!>
  23.  
  24.     <ul id="topnav">
  25.         <li><a href="index.html" class="current">Home</a></li>
  26.         <li><a href="link2.html">Link 2</a></li>
  27.         <li><a href="link3.html">Link 3</a></li>
  28.         <li><a href="link4.html" class="lastnavitem">Link 4</a></li>
  29.     </ul>
  30.  
  31. <!--end of "header" div-->
  32. </div>
  33.  
  34. <div id="content">
  35. <!--various divs with content-->
  36. </div>
  37.  
  38. <div id="footer">
  39.  
  40.     <ul id="bottomnav">
  41.         <li><a href="first.html">First</a></li>
  42.         <li><a href="second.html">Second</a></li>
  43.         <li><a href="third.html">Third</a></li>
  44.         <li><a href="fourth.html">Fourth</a></li>
  45.         <li><a href="fifth.html" class="lastnavitem">Fifth</a></li>
  46.     </ul>
  47.  
  48.     <p>Text</p>
  49.  
  50. <!--end of "footer" div-->
  51. </div>
  52.  
  53. <!--end of "container" div-->
  54. </div>
  55.  
  56. </body>
  57.  
  58. </html>
  59.  
And the relevant css:
Expand|Select|Wrap|Line Numbers
  1. #container {
  2.     width: 700px;
  3.                 }
  4.  
  5. ul#topnav, ul#bottomnav {
  6.     background-color: #CCCCCC;
  7.     text-align: center;
  8.     border-bottom: solid #FF0000 2px;
  9.     float: left;
  10.     list-style-type: none;
  11.     padding: 0;
  12.     margin-left: 0;
  13.     margin-right: 0;
  14.     margin-top: 0;
  15.     font-size: 9pt;
  16.     }
  17.  
  18. ul#topnav {
  19.     font-weight: bold;
  20.     margin-bottom: 3px;
  21.     }
  22.  
  23. ul#topnav li, ul#bottomnav li  {
  24.     display: inline;
  25.     }
  26.  
  27. ul#topnav li a, ul#bottomnav li a {
  28.     float: left;
  29.     padding-top: 5px;
  30.     padding-bottom: 5px;
  31.     text-decoration: none;
  32.     border-right: 1px solid #FFFFFF;
  33.     }
  34.  
  35. ul#topnav li a {
  36.     width: 174px;
  37.     }
  38.  
  39. ul#bottomnav li a {
  40.     width: 139px;
  41.     }
  42.  
  43. a:link.current, a:visited.current {
  44.     background-color: #FF0000;
  45.     color: #FFFFFF;
  46.     }
  47.  
  48. a:link.lastnavitem, a:visited.lastnavitem {
  49.     border-right: none;
  50.     }
  51.  
Oct 4 '06 #1
Share this Question
Share on Google+
7 Replies
drhowarddrfine
Expert 5K+
P: 7,435
Part of the problem is your closing comment tag on line 73 is --!>. Remove the exclamation mark.

The other part of the problem is IE tends to screw up margins and borders. Right now, your containing div is not wide enough for IEs screw up. If you make it a few px wider that will fix it.
Oct 4 '06 #2
P: 20
Part of the problem is your closing comment tag on line 73 is --!>. Remove the exclamation mark.
Thanks, though that's not actually in the page code - I just added it here to keep the post to a reasonable size and hopefully add to legibility.

Have validated the actual page and it's all valid markup. The css also validates.
Oct 4 '06 #3
drhowarddrfine
Expert 5K+
P: 7,435
See my edited response above.
Oct 4 '06 #4
P: 20
The other part of the problem is IE tends to screw up margins and borders. Right now, your containing div is not wide enough for IEs screw up. If you make it a few px wider that will fix it.
Thanks, have done and that works, though it's not quite as neat as I'd like.

Is there any reason you can see why I can't seem to select the "lastnavitem" class and remove the 1px border?
Oct 4 '06 #5
drhowarddrfine
Expert 5K+
P: 7,435
I think you are trying to clear this on the anchor but it's actually on the <li>.
Oct 4 '06 #6
P: 20
I think you are trying to clear this on the anchor but it's actually on the <li>.
Ok, thanks. For some reason the border is still not clearing, but I think I can live with the extra-width container solution.
Oct 4 '06 #7
drhowarddrfine
Expert 5K+
P: 7,435
I was on the run again so I didn't say what I meant exactly. In you css, you have this:
ul#topnav li a, ul#bottomnav li a {
float: left;
padding-top: 5px;
padding-bottom: 5px;
text-decoration: none;
border-right: 1px solid #FFFFFF;
}

It's that border that is causing the space between the tabs. Is that what you meant?
Oct 4 '06 #8

Post your reply

Sign in to post your reply or Sign up for a free account.

Question stats

  • viewed: 1571
  • replies: 7
  • date asked: Oct 4 '06
BYTES.COM © 2019 About Bytes | Advertise on Bytes | Privacy Policy | Manage Cookies
Sitemap | HTML / CSS Answers Sitemap | HTML / CSS Insights Sitemap

Follow us to get the Latest Bytes Updates