CSS Rollover trouble

Hi there,

I went through the motions in Kirupa’s CSS Rollover tutorial
but it didn’t turn out properly.

I put up my test example here: http://flareforfashion.ca/test/test.htm

CSS Code:

*#example{
height: 14px;
width: 66px;
text-indent: 10000px;
overflow: hidden;
background: url(images/but_new_home2.gif) top left no-repeat;
display: block;
}

#example:hover{
background-position: bottom left;
} *

HTML

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”
"
http://www.w3.org/TR/html4/loose.dtd*">
<html>
<head>
<meta http-equiv=“Content-Type” content=“text/html; charset=iso-8859-1”>
<title>Untitled Document</title>
<style type=“text/css”>
@import “rollover.css”; *
</style>
</head>

<body>
<table width=“66” cellspacing=“0” cellpadding=“0”>
<tr>
<td><div>
<a href="#" id=“example”>Home</a>
</div> </td>
</tr>
</table>
</body>
</html>

The height of the image is actually 28px but as the tut said put half.
As you can see it goes partially up.
I’m using the latest IE browser.

Any help would be greatly appreciated :smiley: