SitePoint Sponsor |
|
User Tag List
Results 1 to 3 of 3
-
Aug 14, 2005, 13:16 #1
- 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>
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?
-
Aug 14, 2005, 14:36 #2
- 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
-
Aug 14, 2005, 16:50 #3
- Join Date
- Oct 2004
- Location
- Sendai, Japan
- Posts
- 2,417
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Code:#mainnav ul { height:21px; }
Here's a fix for that and here's another way to do it.
Bookmarks