css broke somewhere..

Associate
Joined
7 Nov 2004
Posts
1,755
Location
Southampton/Oxford
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
 
Associate
Joined
7 Nov 2004
Posts
1,755
Location
Southampton/Oxford
@-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!
 
Top Bottom