2 replies [Last post]
Last seen: 12 years 22 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/.


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;}


<div id="navigationcontainer">
<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>


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


Tyssen's picture
Last seen: 8 years 24 weeks ago
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.


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

Last seen: 12 years 22 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 #)