Why won't my CSS image rollovers work in IE?!?

[will7]

OK, I have searched for ages trying to find a solution for this and have had no luck. I am using the CSS background image rollover technique - where you have a <DIV> with a background, then, on rollover of that <DIV> you shift the background. The background is just one image with both the normal and rollover states in one.

My CSS code for the navigation is:

#navcontainer {
	width:750px;
	height:33px;
	text-align:left;
	padding:0px;
	background:url(nav_bg.jpg) repeat-x;
	border-bottom:1px solid #E6E6E6;
}
#home_link {
	height:32px;
	width:55px;
	text-indent: 10000px;
	overflow:hidden;
	background:url(home_link.jpg) top left no-repeat;
	float:left;
	display:block;
}
#home_link:hover {
	background-position: bottom left;
}
#about_link {
	height:32px;
	width:51px;
	text-indent: 10000px;
	overflow:hidden;
	background:url(about_link.jpg) top left no-repeat;
	float:left;
	display:block;
}
#about_link:hover {
	background-position: bottom left;
}
#portfolio_link {
	height:32px;
	width:61px;
	text-indent: 10000px;
	overflow:hidden;
	background:url(portfolio_link.jpg) top left no-repeat;
	float:left;
	display:block;
}
#portfolio_link:hover {
	background-position: bottom left;
}
#services_link {
	height:32px;
	width:58px;
	text-indent: 10000px;
	overflow:hidden;
	background:url(services_link.jpg) top left no-repeat;
	float:left;
	display:block;
}
#services_link:hover {
	background-position: bottom left;
}
#quote_link {
	height:32px;
	width:50px;
	text-indent: 10000px;
	overflow:hidden;
	background:url(quote_link.jpg) top left no-repeat;
	float:left;
	display:block;
}
#quote_link:hover {
	background-position: bottom left;
}
#contact_link {
	height:32px;
	width:54px;
	text-indent: 10000px;
	overflow:hidden;
	background:url(contact_link.jpg) top left no-repeat;
	float:left;
	display:block;
}
#contact_link:hover {
	background-position:bottom left;
}

So, the basic makeup is that there is one container (navcontainer) and inside this, 6 different <DIV>s with the dimensions of one state. On the normal set the background so it positions it in the normal state and then, when that <DIV> is rolled over, the background is shifted.

If you look at www.rednerve.com in Firefox, the rollovers work fine. But, go to www.rednerve.com in Internet Explorer and they don't work. You go over the link but nothing happens.

Please excuse my (probably) messy CSS code, I am still relatively new to CSS so don't laugh :p If anyone can help me out with this problem, I'd be really grateful!

Thanks again,

Will.

 

[Dan]

In IE, :hover only works with links.

I'm not sure why all your DIV's are links.. you use link styles for links..

(a:link, a:visited, a:active, a:hover)

 

[will7]

When using links (a, a:hover etc) I will only be able to make the link re-position the background for every link in navcontainer though. What I want to achieve is 6 different link styles because I just have 6 different images which all need repositioning in different positions. Do you understand what I am saying?

 

[Dan]

What do you mean you could only reposition it?

example:

#quote_link a {
	height:32px;
	width:50px;
	text-indent: 10000px;
	overflow:hidden;
	background:url(quote_link.jpg) top left no-repeat;
	float:left;
	display:block;
}
#quote_link a:hover {
	background-position: bottom left;
}

I don't see what's wrong with that? It does the same thing.

Ah, now I get what you are saying.. but, you are wrong.

Just add a class to each link. They don't need to be in div's anyways.

<a class="quote_link">

a.quote_link:link, a.quote_link:active, a.quote_link:visited, a.quote_link:hover

If you want to use ID's just replace the . with a #.

 

[will7]

OK, I think I'm sort of getting it now. Can anyone explain a bit further or, even better, show me what changes I would need to make to my code and what HTML I would need to use for the links?

I know I'm asking a lot, but if you don't ask you don't get :p

 

[Dan]

a#home_link{
	height:32px;
	width:55px;
	text-indent: 10000px;
	overflow:hidden;
	background:url(home_link.jpg) top left no-repeat;
	float:left;
	display:block;
}
a#home_link:hover {
	background-position: bottom left;
}

  <div class="navcontainer">
  	<a id="home_link" href="#"></a>
  </div>

There's how one would be.

Just add more <a id="whatever" href="#">blah</a>'s.

There is a lot more you could to, but I don't feel like it.

 

[will7]

Cheers Dan, I only meant can anyone show me how to do one link, I just repeated it for all the others and it worked a charm Thanks again, rep+.