css broke somewhere..

[DragonWoLf]

Aim: to achieve this on my site (isn't being hosted till finished)
http://kailoon.com/example/sliding-door/css-sliding-door.html

CSS that I'm using:

ul.blue li a.current span, ul.blue li a:hover span {
background: url(images/blue.png) no-repeat top left;
}


ul {
padding: 5px;
margin: 10px 0;
list-style: none;
float: left;
}

ul li {
float: left;
display: inline; /*For ignore double margin in IE6*/
margin: 0 10px;
}

ul li a {
text-decoration: none;
float:left;
color: #999;
cursor: pointer;
font: 900 14px/22px "Arial", Helvetica, sans-serif;
}

ul li a span {
margin: 0 10px 0 -10px;
padding: 1px 8px 5px 18px;
position: relative; /*To fix IE6 problem (not displaying)*/
float:left;
}

HTML:

<ul>
<li><a href="index.html" class="current"><span>home</span></a></li>
<li><a href="about.html" title="about mo"><span>about mo</span></a></li>
<li><a href="links.html" title="contact &amp; links"><span>contact &amp links</span></a></li>
<li><a href="done.html" title="done"><span>done</span></a></li>
</ul>

My theory is that the image source in the CSS is either wrong or doesn't work that way

 

[Creelers]

What exactly is the problem?

 

[DragonWoLf]

Ah my bad, the problem I'm having is that the blue background isn't appearing behind the text but going to try something now that might be conflicting

 

[Creelers]

The blue background appears fine for me.

 

[DragonWoLf]

Text blue colouring that's fine but not the hover image

 

[-fedexer-]

<ul class ="blue">

problem solved or atleast that seems to be the solution i've come to

 

[haddows101]

works fine for me, you tried a different browser?

 

[DragonWoLf]

@-fedexer- Yeup thought that would have fixed it but nout

@haddows101 - Tried Opera, FF, my main browser Chrome nout :/

Nevermind guys I'll ignore this style for now, cheers for the help anyways!