Dynadot โ€” .com Transfer

Trouble w/ CSS rollovers in IE

Spaceship Spaceship
Watch
Impact
1
I am trying a new technique for rollovers using CSS, but I seem to be having a problem... in IE the rollovers do not return to their normal state.

The Site

Here is my code.. perhaps I am missing something:

The CSS:
Code:
/***************** {| These are your navigation buttons |} ******************/
a#home img {
	background: url(images/nox-hand_home.gif) no-repeat left top;
	height: 34px;
	width: 134px;
}
a#about img {
	background: url(images/nox-hand_about_me.gif) top left no-repeat;
	height: 22px;
	width: 134px;
}
a#breakBox img {
	background: url(images/nox-hand_break_box.gif) no-repeat left top;
	height: 23px;
	width: 134px;
}
a#downloads img {
	background: url(images/nox-hand_downloads.gif) no-repeat left top;
	height: 22px;
	width: 134px;
}
a#forums img {
	background: url(images/nox-hand_forums.gif) no-repeat left bottom;
	height: 21px;
	width: 134px;
}
a#links img {
	background: url(images/nox-hand_links.gif) no-repeat left top;
	height: 24px;
	width: 134px;
}
a#contact img {
	background: url(images/nox-hand_contact_me.gif) no-repeat left top;
	height: 31px;
	width: 134px;
}
/*********************** {| End Navigation Buttons |} ***********************/

/************* {| These are your navgation button RollOvers |} *************/
a#home:hover img {background: url(images/nox-hand_home-over.gif) top left no-repeat;}
a#about:hover img {background: url(images/nox-hand_about_me-over.gif) top left no-repeat;}
a#breakBox:hover img {
	background: url(images/nox-hand_break_box-over.gif) top left no-repeat;
	height: 23px;
	width: 134px;
}
a#downloads:hover img {
	background: url(images/nox-hand_downloads-over.gif) top left no-repeat;
	height: 22px;
	width: 134px;
}
a#forums:hover img {
	background: url(images/nox-hand_forums-over.gif) top left no-repeat;
	height: 21px;
	width: 134px;
}
a#links:hover img {
	background: url(images/nox-hand_links-over.gif) top left no-repeat;
	height: 24px;
	width: 134px;
}
a#contact:hover img {
	background: url(images/nox-hand_contact_me-over.gif) no-repeat left top;
	height: 31px;
	width: 134px;
}

/***************** {| End navgation button RollOvers |} ******************/
 
0
•••
The views expressed on this page by users and staff are their own, not those of NamePros.
AfternicAfternic
Too much code, all you need is this:

Code:
<style type="text/css">
#container {
	width:150px;
	background-color:#000;
	margin:1px;
}
a:link, a:visited {
	display:block;
	height:25px;
	margin:1px;
	padding-left:2em;
	color:#fff;
	background-color:#666;
	background-image:url(images/bullet_orange.gif);
	background-repeat:no-repeat;
	background-position:middle left;
}
a:hover {
	display:block;
	height:25px;
	margin:1px;
	padding-left:2em;
	color:#fff;
	background-color:#666;
	background-image:url(images/bullet_orange_f2.gif);
	background-repeat:no-repeat;
	background-position:middle left;
}
</style>
</head>

<body>
<div id="container">
	<a href="#">Home</a>
	<a href="#">About Me</a>
	<a href="#">Break Box</a>
	<a href="#">Home</a>
	<a href="#">Home</a>
	<a href="#">Home</a>
</div>

Just get a small image for the bullet image, and make it the right size to get it in the right place.
 
0
•••
CSS Rollovers are amazing, better than javascript in my opinion. And yea Rowan is right
 
0
•••
now how will that affect my text links?
 
0
•••
Dynadot โ€” .com TransferDynadot โ€” .com Transfer
Appraise.net
Domain Recover
DomainEasy โ€” Live Options
  • The sidebar remains visible by scrolling at a speed relative to the pageโ€™s height.
Back