SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Enthusiast
    Join Date
    Nov 2004
    Location
    Leeds
    Posts
    34
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Horizontal list with image replacement - firefox problem

    Hi,

    trying to get these buttons to work in firefox...
    Example

    HTML:
    Code:
    <div id="mainnav">
    		<ul>
    		<li id="profile"><a href="profile.php"><span>Profile</span></a></li>
    	  	<li id="films"><a href="films.php"><span>Films</span></a></li>
          	        <li id="stills"><a href="stills.php"><span>Stills</span></a></li>
          	        <li id="contact"><a href="contact.php"><span>Contact</span></a></li>		
    		</ul>
    </div>
    CSS:
    Code:
    #mainnav {width: 446px; margin: 173px auto 0 auto;  }
    		
    		#mainnav ul
    		{ list-style-type: none;}
    
    		#mainnav ul li
    		{float:left; width: 84px; }
    				
    		#mainnav ul li#profile a
    		{
    		height: 21px;
    		width: 84px;
    		background: #000 url(img/nav/profile_off.jpg) no-repeat top left;
    		display: block;
    	
    		}
    		
    		#mainnav ul li#profile a:hover
    		{
    		background: url(img/nav/profile_on.jpg) no-repeat top left;
    		}
    		
    		#mainnav ul li#profile a span {display: none;}
    		
    		#mainnav ul li#films a
    		{
    		height: 21px;
    		width: 84px;
    		background: #000 url(img/nav/films_off.jpg) no-repeat top left;
    		display: block;
    
    		}
    		
    		#mainnav ul li#films a:hover
    		{
    		background: url(img/nav/films_on.jpg) no-repeat top left;
    		}
    		
    		#mainnav ul li#films a span {display: none;}
    		
    		#mainnav ul li#stills a
    		{
    		margin: 0 0 0 105px;
    		height: 21px;
    		width: 84px;
    		background: #000 url(img/nav/stills_off.jpg) no-repeat top left;
    		display: block;
    		}
    		
    		#mainnav ul li#stills a:hover
    		{
    		background: url(img/nav/stills_on.jpg) no-repeat top left;
    		}
    		
    		#mainnav ul li#stills a span {display: none;}
    		
    		#mainnav ul li#contact a
    		{
    		height: 21px;
    		width: 84px;
    		background: #000 url(img/nav/contact_off.jpg) no-repeat top left;
    		display: block;		
    		}
    		
    		#mainnav ul li#contact a:hover
    		{
    		background: url(img/nav/contact_on.jpg) no-repeat top left;
    		}
    		
    		#mainnav ul li#contact a span {display: none;}

    The rollovers work fine in IE but Firefox doesn't seem to recognise the links. I'm sure it's got something to do with the floating but I've tried various tweaks and nothing seems to help.

    Any ideas?

  2. #2
    SitePoint Addict Shockt's Avatar
    Join Date
    Jan 2005
    Location
    California
    Posts
    360
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I suggest you browse through the Listamatic tutorials:
    http://css.maxdesign.com.au

  3. #3
    Winemaster bronze trophy BonRouge's Avatar
    Join Date
    Oct 2004
    Location
    Sendai, Japan
    Posts
    2,417
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
    #mainnav ul {
    height:21px;
    }
    There's a small problem with the method you're using there - the hover background images are not pre-loaded, so there's a short pause on the first hover.

    Here's a fix for that and here's another way to do it.


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
  •