Simple Rollover won't work IE

HTML & CSS
1

Hi all

I have this simple rollover css that uses a image containing the over and out states - hovering over the link move the background.

http://www.ttmt.org.uk/rollover.html


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
	<title>untitled</title>
	<style type="text/css">
	   a:link, a:visited;{
	      height:50px;
	      width:120px;
	      display:block;
	      background:url("nav.gif")no-repeat top left;
	      text-indent:-1000em;
	   }
	   a:hover, a:active;{
	      background-position:bottom left;
	   }
	</style>
</head>

<body>
	<a href="#">Button</a>
</body>
</html>

It works in all browsers apart from any IE - the image dosen’t show at all. Why dosen’t work in IE, and whats the best way to do this.

Thanks for any help

2

You didn’t mention, so I’ll assume your talking about IE6. This should fix it… http://www.visibilityinherit.com/code/ie6-ahover-bug.php

3

Thanks for the link -

My original code didn’t work in any IE browsers

4

try removing these…

a:link, a:visited;{
height:50px;
width:120px;
display:block;
background:url(“nav.gif”)no-repeat top left;
text-indent:-1000em;
}
a:hover, a:active;{
background-position:bottom left;
}

5

They were typo’s they weren’t in the code

6

Hi, the problem is that there isn’t a space between ) and no-repeat. IE will ignore the rule

background:url("nav.gif")no-repeat top left;

Add a space there :slight_smile:

7

This line needs to look like this (add the space)

background:url(nav.gif) no-repeat top left;

8

Thanks RyanReese, working now

9

You’rewelcome :slight_smile:

10

Hu-hm - hu-hm - Eric too - P’s and Q’s man

11

Sorry, Thank you all - my original thank you must of been posted as you were posting Eric