Selecting the class of a navbar link

Collapse
X
Collapse
 
  • Page of 1
  • Time
  • Show
Clear All
new posts
Previous template Next
  • nonsensitor
    New Member
    • Oct 2006
    • 20
    #1

    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 "lastnavite m") 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:
    Code:
    <!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>
    And the relevant css:
    Code:
    #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;
	}
    Tags: None
    • drhowarddrfine
      Recognized Expert Expert
      • Sep 2006
      • 7434
      #2
      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.

        Comment

        • nonsensitor
          New Member
          • Oct 2006
          • 20
          #3
          Originally posted by drhowarddrfine
          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.

            Comment

            • drhowarddrfine
              Recognized Expert Expert
              • Sep 2006
              • 7434
              #4
              See my edited response above.

                Comment

                • nonsensitor
                  New Member
                  • Oct 2006
                  • 20
                  #5
                  Originally posted by drhowarddrfine
                  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 "lastnavite m" class and remove the 1px border?

                    Comment

                    • drhowarddrfine
                      Recognized Expert Expert
                      • Sep 2006
                      • 7434
                      #6
                      I think you are trying to clear this on the anchor but it's actually on the <li>.

                        Comment

                        • nonsensitor
                          New Member
                          • Oct 2006
                          • 20
                          #7
                          Originally posted by drhowarddrfine
                          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.

                            Comment

                            • drhowarddrfine
                              Recognized Expert Expert
                              • Sep 2006
                              • 7434
                              #8
                              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?

                                Comment

                                Previous template Next
                                Working...