0

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?

vincentieo
  • 940
  • 2
  • 13
  • 28
  • Firefox 3 support is discontinued, on the 24th Avril Mozilla'll push an update to all FF3.x users, so it may not worth to adress your problem. – mddw May 02 '12 at 16:49
  • Can you make the code in jsfiddle.net to view the images – Idrizi.A May 02 '12 at 16:52
  • hummm...I think due to time constraints I will just leave it. Unless there are similar problems with firefox versions 4-10. Anyone know how to test without setting up loads of virtual machines. ff3 offers a message encouraging to upgrade on the ff start page, is this the same for other versions and what happens if the user has set homepage to a different page? – vincentieo May 02 '12 at 17:01
  • JS Fiddle http://jsfiddle.net/vincentieo/LKNBV/ – vincentieo May 02 '12 at 17:10

1 Answers1

0

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

Stuart Burrows
  • 10,824
  • 2
  • 34
  • 33
  • Well that is a nice idea and it makes sense but unfortunately FF11 is parsing like this: – vincentieo May 02 '12 at 17:14
  • I've not got FF3 but in FF3.6 the anchors are closed before the `
  • ` so instead of `
  • ` you get `
  • ` this is because the old FF parser does not understand html5 validity (like anchors wrapping block elements). If the issue is that the links don't work then if you reformat like I have shown above I am confident it will work - also it is far more normal html - I can't see any benefit in the current structure – Stuart Burrows May 03 '12 at 07:48