PDA

View Full Version : 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): 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 [url]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 http://pets-n-people.net/vb/images/smilies/added/doh.gif

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:


<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! :rolleyes:

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:


<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.

Mox
09-23-2008, 05:07 PM
Cool! :cool: we're getting somewhere, many thanks :)

So, I tried moving the <div id> tags to just around the link in question and it is definitely better and useable:


<div id="bluemenu"><a href="chalet2.html" rel="dropmenu2_b"><img src="images/chalet.jpg" align="left" width="80" height="30" alt="The Chalet"></a></div>

And it works although displays to the right of where it's supposed to?