hey all, im trying to create an inline menu, that when you hover over it, a bg image is there. yes it works, but the bg image isnt the same size as the one i set it too. Long story cut short, the image has been rescaled...

 

this is what i get. 100% zoom:

 

 

And this is the original image size:

 

 

And this is my code:

 

HTML:

 

<div id="banner">
<div id="logo">
<a href="index.html"><img src="images/logo.png" border="0" /></a>
</div>
<div id="links">
<ul>
<li class="home"><a href="index.html">Home</a></li>
<li class="about"><a href="aboutme.html">About Me</a></li>
<li class="portfolio"><a href="portfolio.html">Portfolio</a></li>
<li class="web"><a href="webdevelopment.html">Web Development</a></li>
<li class="contact"><a href="contactme.html">Contact Me</a></li>
</ul>
</div>
</div>

 

CSS:

 

body {
margin: 0 auto;
background-image: url(images/background.jpg);
background-repeat: repeat;
}
#banner {
margin-top: 10px;
margin-left: auto;
margin-right: auto;
width: 1000px;
height: 43px;
}
#logo {
width: 300px;
height: 43px;
float: left;
}
#links {
float: right;
width: 699px;
height: 43px;
}
#links ul li {
display: inline;
}
#links ul li {
height: 43px;
width: 65px;
margin-right: 10px;
}
li.current {
color: #fff;
}
li.home a:link {
font-family: verdana;
color: #2a2a2a;
text-decoration: none;
font-size: 11px;
height: 43px;
width: 65px;
text-align: center middle;
}
li.home a:hover{
width: 65px;
height: 43px;
background-image: url(images/nav-home.png);
background-position: center;
background-repeat: no-repeat;
}

Bump, Anyone? Please?? :'(

#links a {
   display: block;
   float: left;
   line-height: 24px;
   margin: 0 10px 0 0;
   text-align: center;
}
li.home a:link {
   color: #2A2A2A;
   font-family: verdana;
   font-size: 11px;
   height: 43px;
   text-decoration: none;
   width: 53px;
}
li.home a:hover{ 
background-image: url(images/nav-home.png);
background-repeat: no-repeat; 
}

#links a {
   display: block;
   float: left;
   line-height: 24px;
   margin: 0 10px 0 0;
   text-align: center;
}
li.home a:link {
   color: #2A2A2A;
   font-family: verdana;
   font-size: 11px;
   height: 43px;
   text-decoration: none;
   width: 53px;
}
li.home a:hover{ 
background-image: url(images/nav-home.png);
background-repeat: no-repeat; 
}

 

This is how you do it. ^

 

It needs to be a display:block; and then float it left to make it inline.

ok thanks guys +1