Firefox 3 with image links and roll over

Question

I have a menu that isnt behaving for firefox 3 (and possible other versions)

   <div id="menu">
<p style="margin-right: 10px;">
<ul id="image-menu">
    <a href="/#middle"><li class="home_menu"></li></a> |
    <a href="/#top"><li class="about"></li></a> | 
    <a href="/#right"><li class="stories"></li></a> | 
    <a href="/#bottom"><li class="whats_on"></li></a> | 
    <a href="/#left"><li class="get_involved"></li></a> | 
    <a href="http://secure.theatreroyal.com/tickets/production.aspx?PID=308539"><li class="tickets"></li></a> | 
    <a href="/index.php/twayf/contact"><li class="contact"></li></a>
</ul>
</p>

</div>

CSS

    <style type="text/css">

#image-menu ul {line-height: 20px;}

#image-menu li {list-style: none; height: 22px; display: inline-block;}

#image-menu a {display:inline-block;}

.home_menu {background-image: url(/images/menu/home1.png); background-repeat: no-repeat; width: 50px; }
.home_menu:hover {background-image: url(/images/menu/home2.png);}

.about {background-image: url(/images/menu/about1.png); background-repeat: no-repeat; width:64px; }
.about:hover {background-image: url(/images/menu/about2.png);}

.stories {background-image: url(/images/menu/stories1.png); background-repeat: no-repeat; width:88px; }
.stories:hover {background-image: url(/images/menu/stories2.png);}

.whats_on {background-image: url(/images/menu/whats_on1.png); background-repeat: no-repeat; width:96px; }
.whats_on:hover {background-image: url(/images/menu/whats_on2.png);}

.get_involved {background-image: url(/images/menu//behind_the_scenes1.png); background-repeat: no-repeat; width:192px; }
.get_involved:hover {background-image: url(/images/menu/behind_the_scenes2.png);}

.tickets {background-image: url(/images/menu/tickets1.png); background-repeat: no-repeat; width:83px; }
.tickets:hover {background-image: url(/images/menu/tickets2.png);}

.contact {background-image: url(/images/menu/contact1.png); background-repeat: no-repeat; width:83px; }
.contact:hover {background-image: url(/images/menu/contact2.png);}

</style>

What is my best solution....add a fire fox version conditional statement to ask people to upgrade (i know ff 11 works fine) or is there another more elegant solution?

Answer 1

I suspect the problem here is that this html isn't valid and so you need a decent parser to correct the issues.

Can you not change the html to look like this:

<div id="menu" style="margin-right: 10px;">
    <ul id="image-menu">
        <li class="home_menu"><a href="/#middle"></a></li> |
        <li class="about"><a href="/#top"></a></li> | 
        <li class="stories"><a href="/#right"></a></li> | 
        <li class="whats_on"><a href="/#bottom"></a></li> | 
        <li class="get_involved"><a href="/#left"></a></li> | 
        <li class="tickets"><a href="http://secure.theatreroyal.com/tickets/production.aspx?PID=308539"></a></li> | 
        <li class="contact"><a href="/index.php/twayf/contact"></a></li>
    </ul>
</div>

I suspect this is what FF11 is showing after parsing the html. You could verify this by using Firebug (or similar) to view the html