Drop Down Tab Menu not working in Firefox

**Mox** · 09-21-2008, 02:58 PM

1) Script Title: DD Tab Menu (5 styles)

2) Script URL (on DD): [url]http://www.dynamicdrive.com/dynamicindex1/droptabmenu.htm

3) Describe problem:

I wonder if anyone can help me troubleshoot?

I have a problem on my site http://www.winacabin.co.uk

where the Drop Down Tabs Menu I used from the Code Library do not work in Firefox. I know it must be something I have done as the demo file does work in Firefox

I put the code in: http://www.winacabin.co.uk/style.css

Am very confused!!

Many thanks in advance for any help you can give.
Mox

**ddadmin** · 09-22-2008, 04:16 AM

Most of the positioning problems with the drop down menus can be solved by making sure the HTML for the drop down DIVs themselves is outside any container tag on the page other than the BODY. So in your case, try moving all the drop down DIVs to the bottom of your page, just above the "</body>" tag:

Code:

    <div id="dropmenu2_b" class="dropmenudiv_b" style="width: 150px;">
<a href="chalet2.html">Overview</a>

<a href="chalet.html">Details</a>
<a href="floor.html">Floor Plans</a>
<a href="gallery.html">Photo Gallery</a>
<a href="video.html">Video</a>
<a href="location.html">Chalet Location</a>
<a href="bachevo.html">Bachevo Village</a>
<a href="bansko.html">Bansko Skiing</a>
</div>

<script type="text/javascript">
//SYNTAX: tabdropdown.init("menu_id", [integer OR "auto"])
tabdropdown.init("bluemenu")

</script

</body>

**Mox** · 09-22-2008, 12:18 PM

Well the theory was there many thanks, alas I changed it all and it didn't make any difference!

Any other ideas?! Would it be anything to do with the DTD ..... I have no idea what I'm doing with that.....

This is what I'm using, by default really....

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

**ddadmin** · 09-23-2008, 04:33 AM

Nope, the DTD doesn't seem to be the culprit here. Even with a valid doctype, the menu is still positioning incorrectly for me. Nothing short of replacing the HTML for your main menu items entirely seems to fix the problem, so the best I can say right now is the the problem has to do with something within the HTML of your main menu:

Code:

<tr>
  <td><img border="0" src="images/log2.gif" width="8" height="8" alt=""></td>
    <td width="771" bgcolor="#94ACA7"><div id="bluemenu" class="bluetabs">
    <a onMouseOver="changeImages('img1', 'img1on')" onMouseOut="changeImages('img1', 'img1off')" href="competition.html"><img name="img1" border="0" src="images/competition.jpg" align="left" width="131" height="30" alt="Enter Competition"></a>
    <a onMouseOver="changeImages('img2', 'img2on')" onMouseOut="changeImages('img2', 'img2off')" href="about.html"><img name="img2" border="0" src="images/about.jpg" align="left" width="93" height="30" alt="About Us"></a>
    <a onMouseOver="changeImages('img3', 'img3on')" onMouseOut="changeImages('img3', 'img3off')" href="chalet2.html" rel="dropmenu2_b"><img name="img3" border="0" src="images/chalet.jpg" align="left" width="80" height="30" alt="The Chalet"></a>

    <a onMouseOver="changeImages('img4', 'img4on')" onMouseOut="changeImages('img4', 'img4off')" href="testimonial.html"><img name="img4" border="0" src="images/testimonials.jpg" align="left" width="100" height="30" alt="Visitor Testimonials"></a>
    <a onMouseOver="changeImages('img5', 'img5on')" onMouseOut="changeImages('img5', 'img5off')" href="press.html"><img name="img5" border="0" src="images/press.jpg" align="left" width="112" height="30" alt="Press Release"></a>
    <a onMouseOver="changeImages('img6', 'img6on')" onMouseOut="changeImages('img6', 'img6off')" href="contact.html"><img name="img6" border="0" src="images/contact.jpg" align="left" width="77" height="30" alt="Contact Us"></a>
    <a onMouseOver="changeImages('img7', 'img7on')" onMouseOut="changeImages('img7', 'img7off')" href="terms.html"><img name="img7" border="0" src="images/rules.jpg" align="left" width="59" height="30" alt="Terms and Conditions"></a>
    <a onMouseOver="changeImages('img8', 'img8on')" onMouseOut="changeImages('img8', 'img8off')" href="questions.html"><img name="img8" border="0" src="images/faq.jpg" align="left" width="52" height="30" alt="Frequently Asked Questions"></a>
    <a onMouseOver="changeImages('img9', 'img9on')" onMouseOut="changeImages('img9', 'img9off')" href="http://www.winacabin.co.uk"><img name="img9" border="0" src="images/home.jpg" align="left" width="65" height="30" alt="Home"></a>
   </div>
    
    </td>
</tr>

Not sure how married you are to the menu's HTML above, but ideally, you should switch to a list based menu similar in structure to one of the five shown on the DD demo page.