Babiker Babiker - 1 month ago 6
CSS Question

CSS :hover not working

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<style type='text/css'>
#body{
margin:0px;
}


#headerDiv{

background-color:#e0e2eb;
}
.header_innerHeaderDivs{
border:solid 1px gray;
display:inline;
font:normal 11px tahoma;
color:black;
}
.header_innerHeaderDivs:hover{
padding:4px;
}
</style>
</head>
<body id='body'>
<div id='headerDiv'>
<div class='header_innerHeaderDivs'>Comapny</div>
<div class='header_innerHeaderDivs'>Edit</div>
<div class='header_innerHeaderDivs'>Inventory</div>
<div class='header_innerHeaderDivs'>Logout</div>
</div>
</body>
</html>





Using FireFox 3.6.3

Answer

if that is a nav bar, it's better to just use a list of links(its more semantic that way) so your hover also works in ie( :hover only works for a elements in ie)

<ul id='header-nav'>
  <li><a>Comapny</a></li>
  <li><a>Edit</a></li>
  <li><a>Inventory</a></li>
  <li><a>Logout</a></li>
</ul>

then

#header-nav {
  background-color:#e0e2eb;
}

#header-nav a {
  border:solid 1px gray;
  display:inline;
  font:normal 11px tahoma;
  color:black;
}

#header-nav a:hover {
  padding: 4px.
}

also a tip: try to refrain from using "div" as part of a class name. it's not that helpful/descriptive in semantics :)