hacks for IE6 hover on images

[unwashed potato!]

getting annoyed with IE 6 not working properly with the hover affect when on images. I want the nav bar, when hovered over, to change from one image to anohter, which works in FF and IE7 but in IE6 it doesn't. I have searched and apparently this is because hover only works on <a> and nothing else.

After searching for a whie i can't seem to find a simple solution to this problem so turning to OcUK in hope that someone will know of a simple solution to this problem.

 

[toString]

Why don't you just do it on the <a>? You say navbar, so I assume they're links.

 

[unwashed potato!]

Why don't you just do it on the <a>? You say navbar, so I assume they're links.

they are images that are links

 

[toString]

But a link by definition is an <a>
Maybe you should post some code.

 

[Augmented]

As above. Just treat the <li>s as semantic containers for the <a> link elements, and don't use their hover state.

Style the <a> as a block-level element so you can exert some control over its width and height. Then apply the image as a background-image to the a and a:hover states (or you can use a single image and change the background-position - google 'no preload rollovers'). Example:

<ul>
 <li><a href="foo">foo</a></li>
 <li><a href="bar">bar</a></li>
</ul>

li a {
display: block;
width: 100px;
height: 20px;
background: transparent url(/foo.png) no-repeat;}

li a:hover {
background: transparent url(/foo-hover.png) no-repeat;}

 

[unwashed potato!]

As above. Just treat the <li>s as semantic containers for the <a> link elements, and don't use their hover state.

Style the <a> as a block-level element so you can exert some control over its width and height. Then apply the image as a background-image to the a and a:hover states (or you can use a single image and change the background-position - google 'no preload rollovers'). Example:

<ul>
 <li><a href="foo">foo</a></li>
 <li><a href="bar">bar</a></li>
</ul>

li a {
display: block;
width: 100px;
height: 20px;
background: transparent url(/foo.png) no-repeat;}

li a:hover {
background: transparent url(/foo-hover.png) no-repeat;}

thanks for that, i'll look into altering my code to that in a sec

here is the code i have at the moment:

html

			<div id="navcontact">
			<a href="contact.html"><img src="images/navdot.gif"></a>
			</div>
			
			<div id="navfolio">
			<a href="folio.html"><img src="images/navdot.gif"></a>
			</div>
			
			<div id="navabout">
			<a href="about.html"><img src="images/navdot.gif"></a>
			</div>
			
			<div id="navhome">
			<a href="index.html"><img src="images/navdot.gif"></a>
			</div>

css, this is the same for all the navhome, about etc, but different images so only posted the one

	#navhome {
	  float: right;
	  margin-top: 92px;
	  height: 46px;
	  width: 106px;
	  font-size: 93%;
	  line-height: normal;
	  z-index:1000;
	  background:url("images/link_home_hover.png") no-repeat left top;
	  _background:url("images/link_home_hover.gif") no-repeat left top;
	  }


	#navhome:hover {
	  background:url("images/link_home_hover.png") no-repeat left top;
	  _background:url("images/link_home_hover.gif") no-repeat left top;
	  }