Possible Duplicate:
CSS not modifying link properties
What’s wrong with this code? When I scroll over the navigation, everything pops up. Additionally, I cant get the color of the text to be white (when I scroll over it, its white but when I back off, it stays black. Also, check the bottom of my page, both columns are messed up…both should be equal width and length and should sit right next to each other. Thanks for your help.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<style type="text/css">
body html {
margin:0;
padding:0;
color:#101010;
font-family: helvetica;
}
p {
margin:10px 0 0 20px;
font-size: 13px;
line-height: 1.3em;
padding-bottom: 10px;
}
p a{
text-decoration: none;
color: #4e6f8c;
}
#wrapper {
width:960px;
margin:0 auto;
padding: 0px;
background:#fff;
}
#header {
padding:5px 10px;
background:#fff;
height:518px;
}
#nav {
padding:5px 10px;
background:#fff;
width: 960px;
height: 35px;
position: absolute;
top: 370px;
font-size: 18px;
color: #000;
}
#nav ul {
margin:0;
padding:0;
list-style:none;
position: absolute;
bottom: 5px;
}
#nav li {
display:inline;
margin:0;
padding:0;
width:160px;
float:left;
}
#nav li:hover {
background-color: #24389b;
height: 25px;
}
#nav a {
color: #fff;
text-decoration: none;
}
#nav a:link {
color: #000;
text-decoration: none;
}
#nav a:visited{
color: #ffffff;
text-decoration: none;
}
#nav a:hover {
color: #ffffff;
text-decoration: none;
}
#nav a:focus {
color: #ffffff;
text-decoration: none;
}
#nav a:active {
color: #ffffff;
text-decoration: none;
}
#topcontent p
{
color: #444444;
}
}
#leftcontent {
float:left;
width:480px;
height: 1%;
background:#fff;
}
h2 {
margin:10px 0 0 20px;
color: #24389b;
font-size: 19px;
padding-bottom: 8px;
}
#rightcontent {
float:right;
width:480px;
background:#fff;
height: 1%;
}
#footer {
clear:both;
padding:5px 10px;
background:#fff;
}
#footer p {
margin:0;
}
* html #footer {
height:1px;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="header"><img src="pold.png" alt="Pold Logo" /></div>
<div id="nav">
<ul>
<li><a href="Research">Research</a></li>
<li><a href="Research">Publications</a></li>
<li><a href="Research">Software</a></li>
<li><a href="Research">People</a></li>
<li><a href="Research">Volunteer</a></li>
<li><a href="Research">Resources</a></li>
</ul>
</div>
<div id="topcontent">
<p>The interests of our lab are generally centered around the study of learning and memory, decision making, and executive control. Much of our work is focused on basic cognitive and neural mechanism, but we are also heavily involved in translational research not the mechanisms of neuropsychiatric disorders. </p>
</div>
<div id="leftcontent">
<h2>Funded Projects</h2>
<p><a href="url">The Cognitive Atlas</a><br />(funded by NIMH RO1MH0822795)<br />The Cognitive Atlas project aims to develop anontology for cognitive processes through social <br />collaborative knowledge building.</p>
</div>
<div id="rightcontent">
<h2>Center Grants</h2>
<p><a href="url">Consortium for Neuropsychiatric Phenomics</a><br />(funded by NIH, PI: R. Bilder)<br />This Roadmap Interdisciplinary Research Consortium is leveraging the new discipline of phonemics to understand neuropsychiatric disorders at multiple levels, from genes to neural systems to </p>
</div>
<div id="footer">
</div>
</div>
</body>
</html>
Everything ‘pops up’ because you’ve got a height declaration in the hover attribute but not the original
lidefinition:The problem with columns is almost certainly because you’ve got the left to float left and the right hand one to float right – as far as I can remember, it will probably work best if you set them both to float left (there are lots of tutorials on 2 column liquid CSS designs; you should be able to adapt one to your needs)
I agree with @Joseph for your link colour issue – that’s simple to fix.