link hover problems

liunx

Guest
Hi
On my site ( <!-- m --><a class="postlink" href="http://home.clara.net/derrett/test2/DivIndex.htm">http://home.clara.net/derrett/test2/DivIndex.htm</a><!-- m --> ) there is a problem with the hover css, when a user goes over a link in the ul the hover images shows as it should do, but it doesn't go away what should I do?

Below is what I think is the relevant bit of the css:

#navcontainer{
height: 29px;
top: 114px;
position: relative;

text-align: center;
}
#navcontainer li{
float: left;
}
#navcontainer ul {
padding: 0;
margin: 0 auto;
width: 580px;
}
#navcontainer li a{
/* buttons are 115*29 px*/
width: 115px;
height: 29px;
border-left: 1px solid #585858;
border-right: none;
color: #585858;
text-decoration: none;
display: block;
text-align: center;
/* vertical align: middle*/
}
#navcontainer ul li a:hover{
color: #930;
background-image: url("b2.gif");
}
#navcontainer a:active{
background-image: url("b1.gif");
color: #fff;
}
#navcontainer li#active a{
background-image: url("b1.gif");
border: 1px solid #c60;
color: #fff;
}


And the relevant html is:


<ul id="navlist">
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"index.htm">Home</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"services.htm">Services</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"us.htm">Us </a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"work.htm">Work</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"contactus.htm">Contact Us</a></li>
</ul>


all help appreciatedYou've neglected to specify a style for the "a:link" pseudo class. But be aware; because of the cascade rules the order is important. See <!-- m --><a class="postlink" href="http://www.w3.org/TR/REC-CSS2/selector.html#dynamic-pseudo-classes.Thanks">http://www.w3.org/TR/REC-CSS2/selector. ... ses.Thanks</a><!-- m --> for that. How, though, after the li is "hovered" can I make the li become "background-less" again?#navcontainer li a{
/* buttons are 115*29 px*/
width: 115px;
height: 29px;
background: none;
border-left: 1px solid #585858;
border-right: none;
color: #585858;
text-decoration: none;
display: block;
text-align: center;
/* vertical align: middle*/
}btw why is every one of your threads aside from this one closed?Thanks for that. They are closed because they need not be open.o_0 that's great logic :plol ok. :D
 
Back
Top