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

 
<!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:

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;

    }

Oct 4 '06 #1

Follow Post Reply

1700

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

nonsensitor

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

nonsensitor

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

nonsensitor

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

Selecting the class of a navbar link

Post your reply

Similar topics