title: Firefox 3 with image links and roll over
body: <p>I have a menu that isnt behaving for firefox 3 (and possible other versions)</p>
  
  <pre><code>   &lt;div id="menu"&gt;
  &lt;p style="margin-right: 10px;"&gt;
  &lt;ul id="image-menu"&gt;
      &lt;a href="/#middle"&gt;&lt;li class="home_menu"&gt;&lt;/li&gt;&lt;/a&gt; |
      &lt;a href="/#top"&gt;&lt;li class="about"&gt;&lt;/li&gt;&lt;/a&gt; | 
      &lt;a href="/#right"&gt;&lt;li class="stories"&gt;&lt;/li&gt;&lt;/a&gt; | 
      &lt;a href="/#bottom"&gt;&lt;li class="whats_on"&gt;&lt;/li&gt;&lt;/a&gt; | 
      &lt;a href="/#left"&gt;&lt;li class="get_involved"&gt;&lt;/li&gt;&lt;/a&gt; | 
      &lt;a href="http://secure.theatreroyal.com/tickets/production.aspx?PID=308539"&gt;&lt;li class="tickets"&gt;&lt;/li&gt;&lt;/a&gt; | 
      &lt;a href="/index.php/twayf/contact"&gt;&lt;li class="contact"&gt;&lt;/li&gt;&lt;/a&gt;
  &lt;/ul&gt;
  &lt;/p&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>    &lt;style type="text/css"&gt;
  
  #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);}
  
  &lt;/style&gt;
  </code></pre>
  
  <p>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?</p>