Image background changing if it's a link

[xkratosx]

Hi guys,

I've currently got a few images being displayed in a simple list, and want it so that if it's a link, it'll change the background location of that image, however I'm not having much luck.

Here's my current CSS code:

.managers_icons li{
	background: url('../img/managers_info.png') no-repeat 0 -18px;
	float: left;
	margin: 0 5px;
	width: 18px;
	height: 18px;
 
}
.managers_icons li a{
	display: block;
	height: 18px;
	background-position: 0 0;
}
.e_info{background-position: 0 0;}
.e_notes{background-position: 0 -18px;}
.e_pdr{background-position: 0 -36px;}

For some reason the background position that's set where I initially define the background image (.managers_icons li) works just fine, and any changes made there is reflectec accordingly.

Anything after that just doesn't change the background image at all, which is really odd. I know it's taking the other attributes on fine because for example if I change .managers info li a to have 5px padding, it's added to any listed element that's linked. Likewise the bottom ones where it's defined seperately, adding padding for example is fine, but the background image won't change.

fwiw, here's my HTML code too:

		<ul class="managers_icons">
			<li class="e_info"><a href="#">Employee Information</a></li>
			<li class="e_notes">Employee Notes</li>
			<li class="e_pdr">Employee e-PDR Information</li>
		</ul>

And finally, the image:


And help would be ace, thanks.

[DaveWoods]

Sorry if this doesn't work as I haven't tested it but the reason why you're having problems is because you're initially applying the image to the <li> and positioning it correctly but then wrongly expecting the <a> to trigger the :hover and also expecting the background-image from the <li> to be passed onto the <a> which won't work

As I've mentioned, I've not tested this code, but I suspect you're after something like this:

CSS

.managers_icons li {
    float: left;
    margin: 0 5px;
    list-style-type: none;
}
.managers_icons span {
    float: left;
    min-height: 18px;
    background-color: #FFF;    
}
.managers_icons li a {
    background: url(../img/managers_info.png) no-repeat 0 -18px;
    height: 18px;
    display: block;
    padding-left: 20px;
}
.e_info a:hover {background-position: 0px 0px !important;}
.e_notes a {background-position: -18px -18px !important;}
.e_notes a:hover {background-position: -18px 0px !important;}
.e_pdr a {background-position: -36px -18px !important;}
.e_pdr a:hover {background-position: -36px 0px !important;}

HTML

        <ul class="managers_icons">
            <li class="e_info"><a href="#"><span>Employee Information</span></a></li>
            <li class="e_notes"><a href="#"><span>Employee Notes</span></a></li>
            <li class="e_pdr"><a href="#"><span>Employee e-PDR Information</span></a></li>
        </ul>

[xkratosx]

Huge thanks for the reply, certainly an improvement from my code, however a couple of things:

1) I need them displayed inline and for some reason, using that ^ no matter where I add the inline attribute it isn't working
2) I need links to view the different image as opposed to actual hovering, so if the item is linked, it'll use the top row (darker) and if it isn't linked it'll use the bottom row (lighter) to appear as if it's inactive.

Once again huge thanks, I'm going to have a mess around with the code now and hope I don't break it too much, any other help would be great though, cheers

Edit: Manged to resolve #1 by adding a width to li a, which if I was going on a hover system would be spot on, but I just need to work out how to do it so that ones without links appear inactive now.

[xkratosx]

Everything seems to be working, except for the a attribute on the end, not sure what I'm doing wrong.

.e_info {background-position: 0px -18px !important;}
.e_info a {background-position: 0px 0px !important;}
.e_notes {background-position: -18px -18px !important;}
.e_notes a {background-position: -18px 0px !important;}
.e_pdr {background-position: -36px -18px !important;}
.e_pdr a {background-position: -36px 0px !important;}

Even if I change it to a:hover or whatever, it isn't working at all :/

[DaveWoods]

Sorry, misunderstood your problem. Try the following code.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>Icon example</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
.managers_icons li {
    float: left;
    margin: 0 5px;
    list-style-type: none;
}
.managers_icons span {
    float: left;
    min-height: 18px;
    background-color: #FFF;    
}
.managers_icons li{
    background: url(../img/managers_info.png) no-repeat 0 -18px;
    height: 18px;
    display: block;
    padding-left: 20px;
}
.managers_icons li a {
    background: url(../img/managers_info.png) no-repeat 0px 0px;
    height: 18px;
    float: left;
    padding-left: 20px;
    margin-left: -20px;
    cursor: pointer;
}
.e_info {background-position: 0px -18px !important; }
.e_notes {background-position: -18px -18px !important;}
.e_pdr {background-position: -36px -18px !important;}

.e_info a {background-position: 0px 0px !important;}
.e_notes a {background-position: -18px 0px !important;}
.e_pdr a {background-position: -36px 0px !important;}

</style>
</head>
<body>
<ul class="managers_icons">
    <li class="e_info"><a href="#"><span>Employee Information</span></a></li>
    <li class="e_notes"><span>Employee Notes</span></li>
    <li class="e_pdr"><span>Employee e-PDR Information</span></li>
</ul>
</body>
</html>

Now, if you add a link around any of the <span>'s as I've done with the first one, then the active state of the icon should be shown.

Hope that helps?

[xkratosx]

Huge thanks for the code again, really appreciate it, was just about to post that I managed to resolve the problem though, I moved the background-image from li a to li and didn't realise that it wouldn't apply to both when setting the background of the linked elements, if that makes sense.

Either way, it's working now ^ So many thanks again for the help!

[xkratosx]

-edit: ignore, sorry-

[DaveWoods]

Not sure what I'm ignoring? Does you code not work, is mine not doing what you expect etc?

[xkratosx]

Sorry, I did a post saying "Argh! It's not working in IE" or similar, then I realised it was actually my HTML that was screwed, and not the CSS

Thanks again, it's all fine now!

[DaveWoods]

aah, makes sense now, I hadn't seen the original post

my code was tested in IE6+, Firefox, Opera and Safari so shouldn't have been any problems

[xkratosx]

Awesome, thank you once again