473,383 Members | 1,818 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,383 software developers and data experts.

Selecting the class of a navbar link

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
7 2009
drhowarddrfine
7,435 Expert 4TB
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
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
7,435 Expert 4TB
See my edited response above.
Oct 4 '06 #4
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
7,435 Expert 4TB
I think you are trying to clear this on the anchor but it's actually on the <li>.
Oct 4 '06 #6
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
7,435 Expert 4TB
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

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

Similar topics

0
by: rick | last post by:
Hello everyone I am trying to locate the sample files used in "A tour of the code - NavBar" for the redesign of the msdn online website in 1998. They were written and developed by Robert Carter...
3
by: David | last post by:
I made a navbar where the buttons light up when the user moves over them. The only problem was in IE the buttons only light up when hovering over the text. This was not a problem in opera!...
7
by: Roger Withnell | last post by:
www.brilley.co.uk/testMenusMac.asp demonstrates the problem. It works in IBM-IE5 but two problems in Mac-IE5 (I've positioned the popup menus on the page to observe the problem). The popup menus...
4
by: Applebrown | last post by:
Greetings, I'm attempting to make a simple horizontal navbar with three image links, and with those images replaced on hover and active... and I'm not sure of the proper CSS to do this, though...
0
by: Chad | last post by:
I have a horizontal navbar between my banner and the page's main content (divided into three columns). Below the navbar, the left and right columns are fixed and the center is liquid. I want to...
2
by: Wiz | last post by:
Greetings the group! I see from a few previous postings that I am not the only person having a problem with hidden list item bullets. This question applies to both IE 6, current version, and...
23
by: Uwe Brauer | last post by:
Hello In the w3c website: http://www.w3.org/Style/Examples/011/firstcss There is an example of a first attempt of a css. Is it possible that Not only the form but also the content of...
16
by: Y.G. | last post by:
I am making a script which displays an RSS feed on my website. To do this I would like to take all the <div class="blabla"><img src="bla.jpg" alt="bla"> </div> tags and put them in front of my...
4
torquehero
by: torquehero | last post by:
Hi all :) I have created a horizontal navbar using Xara Menumaker. The Menu items have several dropdown menus. Its a javascript. When the mouse cursor is moved over any menu item, a dropdown...
1
by: CloudSolutions | last post by:
Introduction: For many beginners and individual users, requiring a credit card and email registration may pose a barrier when starting to use cloud servers. However, some cloud server providers now...
0
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 3 Apr 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome former...
0
by: taylorcarr | last post by:
A Canon printer is a smart device known for being advanced, efficient, and reliable. It is designed for home, office, and hybrid workspace use and can also be used for a variety of purposes. However,...
0
by: aa123db | last post by:
Variable and constants Use var or let for variables and const fror constants. Var foo ='bar'; Let foo ='bar';const baz ='bar'; Functions function $name$ ($parameters$) { } ...
0
by: ryjfgjl | last post by:
If we have dozens or hundreds of excel to import into the database, if we use the excel import function provided by database editors such as navicat, it will be extremely tedious and time-consuming...
0
by: ryjfgjl | last post by:
In our work, we often receive Excel tables with data in the same format. If we want to analyze these data, it can be difficult to analyze them because the data is spread across multiple Excel files...
0
by: emmanuelkatto | last post by:
Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud. Please let me know. Thanks! Emmanuel
1
by: nemocccc | last post by:
hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?
1
by: Sonnysonu | last post by:
This is the data of csv file 1 2 3 1 2 3 1 2 3 1 2 3 2 3 2 3 3 the lengths should be different i have to store the data by column-wise with in the specific length. suppose the i have to...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.