rollover

[segwaypirate]

So I've got a bunch of buttons that I want to shift when hovered on to create a rollover effect.  Since there is a bunch of them I used a class "icon."

Here's the css:

.icon {
   display: block;
   width: 25px;
   height: 25px;
   position: absolute;
   bottom: -5px;
}
a.icon:hover {
   background-position: 0 -25px;
}
.icon span {
   display: none;
}
#pic {
   float: left;
   padding-right: 30px;
   padding-bottom: 30px;
   font-size: 16px;
   font-weight: bold;
   position: relative;
}

Here's the html:

div id="pic">

      <img src="../images/joel_200.png" alt="<p>me</p>"></img>
         <a class="icon" href="http://#######.com/index.php" title="Home" 
            style="background: url('../images/home.png') no-repeat 0 0;"><span>Home</span></a>
         <a class="icon" href="../contact.php" title="Contact" 
            style="background: url('../images/contact.png') no-repeat 0 0; left: 30px;"><span>Contact</span></a>
         <a class="icon" href="http://www.facebook.com/sharer.php?u=#######.com<?php echo $_SERVER['PHP_SELF'];?>" title="Facebook"
            style="background: url('../images/fb.png') no-repeat 0 0; left: 60px;"><span>Facebook</span></a>
         <a class="icon" href="#" title="Twitter" 
            style="background: url('../images/twitter.png') no-repeat 0 0; left: 90px;"><span>Twitter</span></a>

   </div>

 

The above doesn't work.  What am I missing?

[haku]

Inline CSS ALWAYS takes precedent over external CSS (which is why it's bad practice to use it). You are setting the background position in your inline CSS which means that the external CSS rule (background position) will never be applied.