Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    Regular Coder
    Join Date
    Jun 2007
    Posts
    805
    Thanks
    123
    Thanked 23 Times in 23 Posts

    Background-image: automatically cut off

    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:
    Code:
    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:
    Code:
    <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>

  • #2
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    This has nothing to do with graphics. Its your CSS. You need to make your links display:block; and at least 16px in height.
    Code:
    display:block;
    height:16px;
    Add that to #menu a
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • Users who have thanked _Aerospace_Eng_ for this post:

    CaptainB (04-22-2008)

  • #3
    Regular Coder
    Join Date
    Jun 2007
    Posts
    805
    Thanks
    123
    Thanked 23 Times in 23 Posts
    Again you saved my butt! Thanks a bunch, Aero!


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •