2 replies [Last post]
BetsyM
Offline
newbie
Last seen: 9 years 36 weeks ago
Timezone: GMT-4
Joined: 2010-10-20
Posts: 4
Points: 6

I'm recoding my website in css and have run into trouble with the horizontal hover-effect menu list.

Problem: list works in chrome & explorer but firefox collapses the list + shows buttons out of order.

here's the example: http://www.deadlyvintagesweets.com/dindex.htm

I used a simple list --- resourced from from A List Apart's CSS design - Taming Lists http://www.alistapart.com/articles/taminglists/.

The CSS
----------------------------------------------------------------------

div#navigationcontainer {width:939; height:20px; border:none; margin-left:auto; margin-right:auto;}
 
ul {list-style:none; margin:0; padding:0; overflow:hidden; width:939px;}
 
li {float:left;}
 
#navigationcontainer span {display:none;}
 
a#home:link,a#home:visited {display:block; width:62px; height:20px; background:url("1.jpg") no-repeat 0 0;padding:0px;}
a#home:hover,a#home:active {background-position:-62px 0;} 
a#policies:link,a#home:visited {display:block; width:71px; height:20px; background:url("2.jpg") no-repeat 0 0; padding:0px;}
a#policies:hover,a#home:active {background-position:-71px 0;}
a#contact:link,a#home:visited {display:block; width:146px; height:20px; background:url("3.jpg") no-repeat 0 0;padding:0px;}
a#contact:hover,a#home:active {background-position:-146px 0;}
a#aboutthe:link,a#home:visited {display:block; width:105px; height:20px; background:url("4.jpg") no-repeat 0 0; padding:0px;}
a#aboutthe:hover,a#home:active {background-position:-105px 0;}
a#sitemap:link,a#home:visited {display:block; width:81px; height:20px; background:url("5.jpg") no-repeat 0 0; padding:0px;}
a#sitemap:hover,a#home:active {background-position:-81px 0;}
a#glossary:link,a#home:visited {display:block; width:85px; height:20px; background:url("6.jpg") no-repeat 0 0; padding:0px;}
a#glossary:hover,a#home:active {background-position:-85px 0;}
a#blog:link,a#home:visited {display:block; width:53px; height:20px; background:url("7.jpg") no-repeat 0 0; padding:0px;}
a#blog:hover,a#home:active {background-position:-53px 0;}

The HTML
----------------------------------------------------------------------

<div id="navigationcontainer">
 
<ul>
 
<li><img src="/2010template/1left.jpg" alt="" width="116" height="20"></li>
 
<li><a id="home" href="http://www.deadlyvintagesweets.com/index.html"><span>home page</span></a></li>
 
<li><a id="policies" href="http://www.deadlyvintagesweets.com/deadlypolicy.htm"><span>policy page</span></a></li>
 
<li><a id="aboutthe" href="http://www.deadlyvintagesweets.com/deadlyaboutus.htm" target="_blank"><span>about the shop</span></a></li>
 
<li><a id="sitemap" href="http://www.deadlyvintagesweets.com/deadlysitemap.cfm"><span>sitemap</span></a></li>
 
<li><img src="/2010template/presskey.jpg" alt="press" title="DV in the press : coming soon" width="61" height="20"></li>
 
<li><a id="blog" href="http://www.deadlyvintagesweets.com/salespage.cfm"><span>the blog</span></a></li>
 
<li><a id="glossary" href="http://www.deadlyvintagesweets.com/deadlyfashion.htm"><span>fashion glossary</span></a></li>
 
<li><a id="contact" href="mailto:[email protected]"><span>Contact the shop</span></a></li>
 
<li><img src="/2010template/10rightend.jpg" alt="" width="159" height="20"></li>
 
</ul>
 
</div>

--------------------------------

I've spent considerable time searching for an answer online.... I understand there's a firefox issue with display:inline-block, but I'm not using that element. Can anyone suggest what might be causing this problem? plus a way towards fixing this. My expertise: I've mostly used HTML in the past & am in the process of learning how to code in pure CSS.
>>>>>>>>>>>>>>>>>Any help is fervently appreciated Smile

Betsy

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 5 years 38 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

It's cos you haven't edited

It's cos you haven't edited your code properly: you've repeated #home for every single visited and active state.

Quote:

I understand there's a firefox issue with display:inline-block

That was only prior to version 3.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

BetsyM
Offline
newbie
Last seen: 9 years 36 weeks ago
Timezone: GMT-4
Joined: 2010-10-20
Posts: 4
Points: 6

OMG can't believe I've been

OMG can't believe I've been looking at that thing for 3 days with blinders on. Thanks so much for pointing out the mistake #)