[SOLVED] Navi: active tab

[sawade]

Hey, This works on my editor and not online.  Any ideas?

 

<ul id="navlist">
            <li id="active"><a href="index.html" title="home</a></li>
            <li><a href="">Product</a></li>
		<li><a href="" title="">pg</a></li>
            <li><a href="">pg</a></li>
		<li><a href="" title="pg</a></li>
	</ul>

 

#navigation ul {
padding-bottom: 5px;
padding-top: 5px;
padding-left: 0;
margin-top: 0;
margin-left: 0;
background-color: #3D627F;
color: white;
float: left;
width: 100%;
line-height: 18px;
}

#navigation ul li {
display: inline;
padding-left: 0;
padding-right: 0;
padding-top: 5px;
}

#navigation ul li a {
padding-left: 10px;
padding-right: 10px;
padding-bottom: 5px;
padding-top: 5px;
background-color: #3D627F;
color: white;
text-decoration: none;
float: left;
border-right: 1px solid #fff;
}

#navigation ul li a:hover {
background-color: #BCD2EE;
color: white;
}

#navigation #active {
background-color: #BCD2EE;
font-weight: bold;
}

[alexdemers]

Do you have an element with the ID "navigation" surrounding your <ul> ?

[TheFilmGod]

Yes. The ids don't match.

 

Skimming through the code I see some logical flaws in your code. Why are you floating the <ul> list when you are declaring a width of 100%? What's the point of floating it then?

 

You shouldn't use an id to tag an active state of a button in css - use of #active, as an id can only be used once. If you ever create another list in the same webapge with an active tab of #active, you'll run into some validation errors and it'll be "logically" incorrect. Next you must clear the floated anchors. You can do this by overflow: hidden in the ul css declaration.

 

Those are just a few errors I found skimming through you css code. However, the solution to your problem is to simply change id="navlist" to id="navigation".

 

 

 

 

[sawade]

Yes.  #navigation is declared

[sawade]

I was able to fix it - it was actually an HTML fix.  Had to remove the  a href from the active page

 

<ul id="navlist">
<li id="active">home</li>
<li><a href="">Product</a></li>
<li><a href="">pg</a></li>
<li><a href="">pg</a></li>
<li><a href="">pg</a></li>
</ul>

[TheFilmGod]

How exactly did this fix your problem? Your code had mismatching ids! How does changing the href attribute have anything to do with it?

[sawade]

How exactly did this fix your problem? Your code had mismatching ids! How does changing the href attribute have anything to do with it?

 

The ids were fine.  The css was trying apply two different styles to the code.  So I removed the link and thereby the id was only being applied to one style not two.  Presto.  Problem solved.