Background-image works here but not there

**beewrangler** · 04-22-2012, 12:52 PM

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.

**PBSWebDesign** · 04-22-2012, 01:25 PM

WEll links arent controlled by the p tag at all. You need to be using a:link a:hover a:visited and a:active. Those are what you are going to define in your css to style links. not p:link there is no such thing.

Also div.links {} is saying that you are creating a class called links. That is not saying you are styling the links themselves. http://www.w3schools.com/css/ Read this and go through them all. It will help alot

**beewrangler** · 04-22-2012, 01:29 PM

Yes, I understand that, but I am changing the background of the <p> containing the <a>

**PBSWebDesign** · 04-22-2012, 01:32 PM

Originally Posted by beewrangler

Yes, I understand that, but I am changing the background of the <p> containing the <a>

For what reason? Html and CSS dont provide a way to change the background of an element like that on hover. You need javascript for that. Only links that get hovered over can have the styles changed in CSS and HTML. Javascript would be able to change the entire p element on hover with the mouse.

**PBSWebDesign** · 04-22-2012, 01:34 PM

The way you based your question above was that you wanted to only change the backgrounds of the links which is easy to do. But now you are saying you want to change the entire background of the p element that happens to hold the links and/or other text inside. I think once we find out exactly what you are wanting it will be easier to diagnose what you need to do.

**beewrangler** · 04-22-2012, 01:42 PM

At this point I think the hover part of this page is irrevelent. I'm not getting any background image in the <p> element on the actual page. It is working just fine on the test page. I have validated everything with W3C and tried IE7 IE8 and current release version of Chrome. All act the same.

**PBSWebDesign** · 04-22-2012, 02:22 PM

Well if you are just wanting a background on just the p element then in css do

Code:

p {
background: url(path/to/image.jpg);
}

**beewrangler** · 04-23-2012, 08:52 AM

I have done that. As you can see here.

Originally Posted by beewrangler

Code:

 
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; }

my question is why does it work on my test page but not on the actual page.

**tracknut** · 04-23-2012, 09:36 AM

Do you have this page up live somewhere we could see it? Would take 2 seconds to spot the issue with Firebug...

Dave

**beewrangler** · 04-23-2012, 11:22 AM

I don't have it live, but I will gladly send you all the files that go with it if you can tell me where to send them.

**PBSWebDesign** · 04-23-2012, 01:38 PM

Send me the files so that I can clean up the code and take a look at all of the source. Send them as a zip to PBSWebDesign@gmail.com Thanks

**p.phresh** · 04-23-2012, 02:11 PM

try changing your links in the background declarations on your CSS page to:

background-image: url("../images/YellowBG.png");

the images are probably in another directory, and you moved your CSS into a different directory but did not update your CSS to reflect the move.

**beewrangler** · 04-23-2012, 04:20 PM

PBSWebDesign

I have sent you a copy of all my files in a .zip
I thank you for all your help.

**PBSWebDesign** · 04-23-2012, 05:08 PM

Alright sent them back to you. It is working now.

**beewrangler** · 04-23-2012, 10:26 PM

Thanks PBSWebDesign

That is exactly what I was want it to do. I will consider the PHP includes and the offer that you made me in your e-mail.

Can you tell me why it wasn't working the way I had it? Why did changing background-images { url("images/YellowBG.png"; } to background-image { url(".../images/YellowBG.png"; } fix the problem?