# CSS Rollover trouble

**URL:** <https://forum.kirupa.com/t/css-rollover-trouble/181752>\
**Category:** web dev\
**Created:** [March 12, 2006, 7:22pm UTC](https://forum.kirupa.com/t/css-rollover-trouble/181752 "2006-03-12T19:22:46Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![ringspun](https://avatars.discourse-cdn.com/v4/letter/r/258eb7/32.png) [@ringspun](https://forum.kirupa.com/u/ringspun)\
**Post date:** [March 12, 2006, 7:22pm UTC](https://forum.kirupa.com/t/css-rollover-trouble/181752/1 "2006-03-12T19:22:46Z")

</div>

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](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_](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 😃
