Wed, 2010-10-20 16:50
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 
Betsy
Wed, 2010-10-20 23:27
#1
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.
Thu, 2010-10-21 00:31
#2
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 #)