Problem with a rollover image in internet explorer 8

HTML & CSS
1

Hey everybody I need a little help as I’m trying to code my website the right way.

My buttons highlight when you go over them with a mouse but for some odd reason the home button which is furthest left doesn’t highlight in internet explorer 8 but all the other buttons do, In other browsers all the buttons highlight including the home but internet explorer doesn’t seem to like the home button.

I replaced the image I looked over the code and I can’t find any reason as to why it would do that.

I used a hover: with an image on top of an image and dropped the image down 58px when the mouse is over to reveal the second part.

Here’s my codding so far

XHTML 1.0


<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link rel="stylesheet" type="text/css" href="Style2.css"/>


</head>

<body>
<div id="container">
<div id="header">
<ul id="navbar">
  <li><a href="home.html" id="home">Home</a></li>
  <li><a href="manufacturing.html" id="manufacturing">Manufacturing</a></li>
  <li><a href="services.html" id="services">Services</a></li>
  <li><a href="aboutus.html" id="aboutus">AboutUs</a></li>
  <li><a href="contactus.html" id="contactus">ContactUs</a></li>
  <li><a href="requestforquote.html" id="requestforquote">RequestforQuote</a></li>
  </ul>
  </div>
</div>
</body>
</html>

Here’s my
CSS


*{
	padding:0;
	margin:0;
}

body {
	font-family:Calibri;	
	padding:0;
	margin:0;
	background-color:#000000;
}

#container {
	width:897px;
	padding:0;
	margin:auto;
}

#header{
	background-repeat:no-repeat;
	background-image:url(Banner.png);	
	height: 158px;
	width: 897px;
	margin-top: 20px;
	clear: both;
}

#navbar {
	margin: 0px;
	padding: 0px;
	margin-left: 5px;
		
	list-style: none;
}

#navbar a {
	text-decoration: none;
	display:block;
	float:left;
	text-indent: -5000px;
}

#navbar li{
float: left;
}

#navbar #home{	
	background-image:url(Home.png);
	background-repeat: no-repeat;
	background-position: 0 0;
	margin-top: 180px;
	width: 120px;
	height: 58px;
}

#navbar #home:hover{
	background-position: 0-58px;
}

#navbar #manufacturing{	
	background-image:url(Manufacturing.png);		
	background-repeat:no-repeat;
	background-position: 0 0;
	margin-top:180px;
	margin-left:1px;	
	width: 154px;
	height: 58px;
}
#navbar #manufacturing:hover{
	background-position: 0 -58px;
}

#navbar #services{	
	background-image:url(Services.png);			
	background-repeat:no-repeat;
	background-position: 0 0;
	width: 121px;
	height:58px;
	margin-left: 0px;
	margin-top: 180px;
		
	
}

#navbar #services:hover{
	background-position: 0 -58px;
}

#navbar #aboutus{	
	background-image:url(About-Us.png);			
	background-repeat:no-repeat;
	background-position: 0 0;
	width: 129px;
	height:58px;
	margin-left: 0px;
	margin-top: 180px;
		
	
}

#navbar #aboutus:hover{
	background-position: 0 -58px;
}

#navbar #contactus{
	background-image:url(ContactUs.png);					
	background-repeat:no-repeat;
	background-position: 0 0;
	width: 132px;
	height:58px;
	margin-left: 0px;
	margin-top: 180px;
		
	
}

#navbar #contactus:hover{
	background-position: 0 -58px;
}

#navbar #requestforquote{	
	background-image:url(RequestForQuote.png);					
	background-repeat:no-repeat;
	background-position: 0 0;
	width: 229px;
	height:58px;
	margin-left: 0px;
	margin-top: 180px;
		
	
}

#navbar #requestforquote:hover{
	background-position: 0 -58px;
}
2

I spy, with my little eye, something beginning with T:

#navbar #home:hover{
	background-position: [COLOR="Red"]0-58px[/COLOR];
}

Typo :smiley:

change to

#navbar #home:hover{
	background-position: [COLOR="blue"]0 -58px[/COLOR];
}
3

lol oops thank you

I never would of gotten that