...

View Full Version : Background-image: automatically cut off



CaptainB
04-22-2008, 09:10 PM
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_
04-22-2008, 09:47 PM
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
04-22-2008, 10:46 PM
Again you saved my butt! Thanks a bunch, Aero!



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum