First let me say that this is only my second website build so please be patient with me. I am trying to change background images of some links using p:hover. I built a test page and everything worked the way I wanted it to, but when I cut a pasted the code from the test page to the actual page they no longer came through. Anybody have any thoughts?
here is my code the first one is the test page. The second and third are the actual page and the CSS that goes with it.

Code:
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
  <title>Blank HTML Doc</title>
  <!--<script type="text/javascript" src="https://getfirebug.com/firebug-lite.js"></script>-->
  <!--<script type="text/javascript" src="/firebug-lite/build/firebug-lite.js"></script>-->
  <!--<link rel= "stylesheet" type= "text/css" href= "/styles/blankstyles.css" />-->
  <style type="text/css">
   div.links { width: 40%;
    position: absolute;
    top: 280px;
    left: 2%;  }
   div.links p img { border: none; 
    position: absolute;
    top: -29px;
    left: 5px; }
   div.links p { background-image: url("images/YellowBG.png");
    height: 37px;
    width: 510px;
    border: none;
    position: absolute;
    top: 5px;
    left: 5px;
    overflow: hidden; }
   div.links p.home { position: absolute;
     top: 0px;
     left: 0px; }
   div.links p.who { position: absolute;
     top: 50px;
     left: 0px; }
   div.links p.contact { position: absolute;
     top: 100px;
     left: 0px; }
   div.links p.what { position: absolute;
     top: 150px;
     left: 0px; }
   div.links p.FAQ { position: absolute;
     top: 200px;
     left: 0px; }
   div.links p.pics { position: absolute;
     top: 250px;
     left: 0px; }
   div.links p.pollination { position: absolute;
     top: 300px;
     left: 0px; }
   div.links p.pay { position: absolute;
     top: 350px;
     left: 0px; }
   div.links p:hover img { position: absolute;
     top: 5px;
     left: 5px; }
   div.links p:hover { background-image: url("images/BlackBG.png"); }
  </style>
 </head>
 <body>
  <div class= "links">
   <p class= "home">
    <a href="index.html" tabindex="1"><img src= "images/HomePage.png" /></a>
   </p>
   <p class= "who">
    <a href="whois.html" tabindex="2"><img src= "images/WhoIs.png" /></a>
   </p>
   <p class= "contact">
    <a href="contact.html" tabindex="3"><img src= "images/ContactUs.png" /></a>
   </p>
   <p class= "what">
    <a href="whatwedo.html" tabindex="4"><img src= "images/WhatWeDo.png" /></a>
   </p>
   <p class ="FAQ">
    <a href="faq.html" tabindex="5"><img src= "images/FAQ.png" /></a>
   </p>
   <p class= "pics">
    <a href="gallery.html" tabindex="6"><img src= "images/Photos.png" /></a>
   </p>
   <p class= "pollination">
    <a href="pollination.html" tabindex="7"><img src= "images/Pollination.png" /></a>
   </p>
   <p class= "pay">
    <a href="payus.html" tabindex="8"><img src= "images/PayUs.png" /></a>
   </p>
  </div> 
 </body>
</html>
Code:
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
  <title>FAQ</title>
  <!--<script type="text/javascript" src="https://getfirebug.com/firebug-lite.js"></script>-->
  <!--<script type="text/javascript" src="/firebug-lite/build/firebug-lite.js"></script>-->
  <link rel= "stylesheet" type= "text/css" href= "styles/style.css" />
 </head>
 <body>
    <div class= "links">
   <p class= "home">
    <a href="index.html" tabindex="1"><img src= "images/HomePage.png"  alt= "Home Page" /></a>
   </p>
   <p class= "who">
    <a href="whois.html" tabindex="2"><img src= "images/WhoIs.png" alt= "Who is BeeCharmer" /></a>
   </p>
   <p class= "contact">
    <a href="contact.html" tabindex="3"><img src= "images/ContactUs.png" alt= "Contact Us" /></a>
   </p>
   <p class= "what">
    <a href="whatwedo.html" tabindex="4"><img src= "images/WhatWeDo.png" alt= "What Does BeeCharmer Do" /></a>
   </p>
   <p class ="FAQ">
    <a href="faq.html" tabindex="5"><img src= "images/FAQ.png" alt= "Frequently Asked Questions" /></a>
   </p>
   <p class= "pics">
    <a href="gallery.html" tabindex="6"><img src= "images/Photos.png" alt= "Photo Gallery" /></a>
   </p>
   <p class= "pollination">
    <a href="pollination.html" tabindex="7"><img src= "images/Pollination.png" alt= "Pollination Services" /></a>
   </p>
   <p class= "pay">
    <a href="payus.html" tabindex="8"><img src= "images/PayUs.png" alt= "Pay BeeCharmer" /></a>
   </p>
  </div>
 </body>
</html>
Code:
 
/*  POSITION AND STYLE LINKS  */
div.links { width: 40%;
 position: absolute;
 top: 280px;
 left: 2%;  }
div.links p img { border: none; 
  position: absolute;
  top: -29px;
  left: 5px; }
div.links p { background-image: url("images/YellowBG.png");
  height: 37px;
  width: 510px;
  border: none;
  position: absolute;
  top: 5px;
  left: 5px;
  overflow: hidden; }
div.links p.home { position: absolute;
  top: 0px;
  left: 0px; }
div.links p.who { position: absolute;
  top: 50px;
  left: 0px; }
div.links p.contact { position: absolute;
  top: 100px;
  left: 0px; }
div.links p.what { position: absolute;
  top: 150px;
  left: 0px; }
div.links p.FAQ { position: absolute;
  top: 200px;
  left: 0px; }
div.links p.pics { position: absolute;
  top: 250px;
  left: 0px; }
div.links p.pollination { position: absolute;
  top: 300px;
  left: 0px; }
div.links p.pay { position: absolute;
  top: 350px;
  left: 0px; }
div.links p:hover img { position: absolute;
   top: 5px;
   left: 5px; }
div.links p:hover { background-image: url("images/BlackBG.png"); }
Thank you for any help that you can give.