SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Enthusiast cybergen's Avatar
    Join Date
    Jul 2008
    Posts
    31
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Don't understand why this menu is not replacimg images correctly :(

    Hi guys,

    I'm hoping you guys can help with my first web design project.

    I've created a menu using CSS and a list with a hover image replacement. However whenever I hover over it, I can still see a little bit of the original image and despite 2 hours of trying to figure it out, I'm still stuck!

    Image of problem at: img119.imageshack.us/img119/8823/68557407zl5.gif
    Source image: img240.imageshack.us/img240/9176/menu2mk7.gif

    The HTML:
    HTML Code:
    <ul id="mymenu">
      <li id="home" title="Home"><a href="#">Home</a></li>
      <li id="facilities" title="Facilities"><a href="#">Facilities</a></li>
      </ul>
    The CSS:
    Code:
    ul#mymenu {list-style-type: none;
    	margin: 0;
    	padding: 0;
    	position:relative;
    	width: 342px;
    	height: 24px;
    
    }
    
    li#home {position: absolute;
    top: 0px;
    left: 0px;
    width: 60px;
    height: 24px;
    background: url("images/menu2.gif") no-repeat 0px 0px;
    
    
    }
    
    li#facilities {position: absolute;
    background: url("images/menu2.gif") no-repeat -60px 0px;
    width: 98px;
    height: 24px;
    top: 0px;
    left: 60px;
    }
    
    /* The hover states */
    li#home a:hover{background: url("images/menu2.gif") no-repeat 0px -24px;} 
    li#facilities a:hover{background: url("images/menu2.gif") no-repeat -60px -24px;}
    
    
    /* Clean up links */
    
    ul#mymenu a{display: block;
    text-indent: -9999px;
    text-decoration: none;
    overflow: hidden;
    }

    I've tried splitting up the image in two but no change, same issue occurs.

  2. #2
    SitePoint Wizard bronze trophy Centauri's Avatar
    Join Date
    May 2007
    Location
    Newcastle, Australia
    Posts
    3,718
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Set the height (24px) on the <a> element.

  3. #3
    SitePoint Enthusiast cybergen's Avatar
    Join Date
    Jul 2008
    Posts
    31
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sorry it took so long to replay centauri.

    Wow and Thanks

    Can't believe it was that simple to sort out - shame it wasn't that obvious for me

    Thank you


Bookmarks

Posting Permissions

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