can someone tell me why this doesn't work??

[severndigital]

basically i want to swap background images. I can't figure out why this doesn't work.

 

before you say it... YES the image is on the server and does exist.

 

CSS

@charset "utf-8";
/* CSS Document */
img {
border:none;
}
#toolBox {
background:#CCCCCC;
height: 300px;
width:60px;
border: 1px solid #333333;

}
.tools {
width: 100%;
border: #000 1px solid;
}

.tool {
width: 30px;
height: 30px;
}


.tool{
border: none;
background: url(toolbox/bkgrnd.png) no-repeat 0px 0px;
}

.tool a:hover{
border: none;
background: url(toolbox/bkgrnd.png) no-repeat 0px -30px;
}

.tool a:active{
border:none;
background: url(toolbox/bkgrnd.png) no-repeat 0px -60px;
}

 

html

<link href="toolbox/toolbox.css" rel="stylesheet" type="text/css" border="0" cellpadding="0" cellspacing="0" width="60px">

<div name="toolBox" id="toolBox">

     <div class="tool">
<a href="#"><img src="toolbox/addText.png"></a>
     </div>
     <div class="tool">
<a href="#"><img src="toolbox/addImage.png"</a>
     </div>
</div>

 

the images addText.png & addImage.png are transparent png files

the file bkgrnd.png is a 30px x 90px png image that should shift when the div is hovered and also when it's active.

 

this doesn't work in ANY browser .. FF3, IE6 & 7, Safari, Opera

 

i have also tried switching the background image to a jpg, but i get the same results.

 

 

Here is a little wrench to through in..

I use a FF plug in called Web Developer Tool Bar. When I have edit CSS window open from that plug in .. all works fine and dandy. When i close it  .. nothing, all i get are the initial images and no rollover effects.

 

any help or a point in the right direction would be great.

 

Thanks,

-C

[wildteen88]

Here:

.tool a:hover{
   border: none;
   background: url(toolbox/bkgrnd.png) no-repeat 0px -30px;
}

.tool a:active{
   border:none;
   background: url(toolbox/bkgrnd.png) no-repeat 0px -60px;
}

You're applying the background image to your links and not your .tool div. You may need to change your code to

.tool:hover{
   border: none;
   background: url(toolbox/bkgrnd.png) no-repeat 0px -30px;
}

.tool:active{
   border:none;
   background: url(toolbox/bkgrnd.png) no-repeat 0px -60px;
}

However not all browsers support pseudo classes on elements other than links.

[BoltZ]

//Offtopic here

 

Congrats on 9000 posts