Background-image: automatically cut off

[CaptainB]

Hi guys,

With you help I finally got my 'hover-on-link-and-images-change-from-b/w-to-color" thing working.

However, the images are somehow cutted off at the bottom. It's only a very few pixels, but it shows if you have a good look: http://behrentzs.com/test/bnew/index.php

I really can't make it stop doing it. I tried with a bigger height on the <li> tags, changing the line-height, background-position and so on without luck.

Maybe some of you could have a look?

css:

ul#menu {		list-style:none;
				}
				
ul#menu li {	display:block;
				width:108px;
				height:16px;
				margin-bottom:5px;
				/*font-weight:bold;*/
				}
				
ul#menu a {		text-decoration:none;
				color:#fff;
				margin-left:5px;
				background-repeat:no-repeat;
				padding-left:25px;
				}
				
ul#menu a:hover {color:#ff6600;		
				}

				
a {				text-decoration:none;
				color:#ff6600;
				}
				
a#home {		background-image:url(../images/icons/home.gif);
				background-position:0px -1px;
				}
a#gallery {		background-image:url(../images/icons/gallery.gif);
				background-position:0px -1px;
				}
a#design {		background-image:url(../images/icons/design.gif);
				background-position:0px -1px;
				}	
a#forums {		background-image:url(../images/icons/forums.gif);
				background-position:0px -1px;
				}				
a#links {		background-image:url(../images/icons/links.gif);
				background-position:0px -1px;
				}	
a#portfolio {	background-image:url(../images/icons/portfolio.gif);
				background-position:0px -1px;
				}							
	
							
a:hover {		color:#ff9900;			
				}
a#home:hover {	background-position:0px -17px;
				}					
a#gallery:hover {background-position:0px -17px;
				}
a#design:hover {background-position:0px -17px;
				}
a#forums:hover {background-position:0px -17px;
				}				
a#links:hover {background-position:0px -17px;
				}
a#portfolio:hover {background-position:0px -17px;
				}

XHtml:

<ul id="menu">
<li><a href="" id="home">Home</a></li>
<li><a href="" id="gallery">Gallery</a></li>
<li><a href="" id="design">Design</a></li>
<li><a href="" id="forums">Forums</a></li>
<li><a href="" id="links">Links</a></li>
<li><a href="" id="portfolio">Portfolio</a></li>
<li><a href="" id="contact">Contact</a></li>
</ul>

[_Aerospace_Eng_]

This has nothing to do with graphics. Its your CSS. You need to make your links display:block; and at least 16px in height.

display:block;
height:16px;

Add that to #menu a

[CaptainB]

Again you saved my butt! Thanks a bunch, Aero!