Log in

View Full Version : Drop Down Tabs (5 styles) - Causing a layout issue in FF and color change in IE6


LaserGecko
03-07-2008, 06:08 AM
1) Script Title: Drop Down Tabs (5 styles)

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

3) Describe problem: I'm experimenting with using example #5 to add a drop down menu to the headers of my SSI generated pages.

http://herpmist.com/dd5.shtml is the test page.

http://herpmist.com/halfmoontabs.css is the style sheet.

http://herpmist.com/NavMenu.html is the header file that is included in the page when it's served.

In FireFox, the menu causes a slight gap between the "header" area and the left column which uses the ddBlueBlock menu. I have positioned it absolutely, but it happens regardless of the positioning of the DropDownTabs menu. It can be at the top of the header or the bottom and it makes no difference.

In IE6, the background of the body is set to black for some reason.

I'm exhausted from chasing my tail on this one. I've tried moving the script around from the <head> to the <body> and everything else of which I can think/guess. I'm sure this is just a glaring hole in my knowledge of CSS, but I just can't see it!

Thanks in advance!
ddadmin
03-07-2008, 07:34 AM
Hmm I'm not too sure what I should be looking for at the moment, since:

1) In *both* FF and IE6, I see a gap between the black top header area and the left column.

2) In *both* FF and IE6, the page background itself appears to be white (not black).
LaserGecko
03-07-2008, 08:14 AM
Hmmm, the IE thing must be on the version on this machine, then.

I'm trying to get rid of the gap between the header and the left column. It's not there with my regular header (also from DD).
ddadmin
03-07-2008, 08:40 AM
The gap can be removed, sure. Simply move the HTML for the drop down DIVs themselves 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:


<!--1st drop down menu -->
<div style="top: 168px; left: 340px; visibility: hidden;" id="dropmenu1_e" class="dropmenudiv_e">
<a style="border-top-width: 0pt;" href="http://www.herpmist.com/pumpsafety.shtml">Pump Safety</a>
<a href="http://docs.google.com/Doc?id=dg284n8q_8gh5wkw&amp;pli=1" target="_blank">Installation Instructions</a>
<a href="http://spreadsheets.google.com/pub?key=pl_sqGQzEA_sd2mKSemcEYQ" target="_blank">Nozzle Data</a>
</div>


<!--2nd drop down menu -->
<div id="dropmenu2_e" class="dropmenudiv_e" style="width: 200px; top: 168px; left: 466px; visibility: hidden;">
<a style="border-top-width: 0pt;" href="http://www.herpmist.com/tiki.shtml">Tiki Tiki Reptiles</a>
<a href="http://www.herpmist.com/cbd.shtml">Cages By Design - Jungle Carpet Cage</a></div>


<!--3rd drop down menu -->
<div id="dropmenu3_e" class="dropmenudiv_e" style="width: 150px; top: 168px; left: 726px; visibility: hidden;">
<a style="border-top-width: 0pt;" href="http://www.herpmist.com/about.shtml">About HerpMist.com</a>
<a href="http://www.herpmist.com/contact.shtml">Contact Us</a>


<script type="text/javascript">
//SYNTAX: tabdropdown.init("menu_id", 0)
tabdropdown.init("moonmenu", "AUTO")
</script>

</body>
LaserGecko
03-07-2008, 09:56 AM
Woo hoo! Thanks! That works perfectly! Why is that? Does it have something to do with a margin or padding from the menu's elements?

I will have to add another include to all of my pages, but that's not too much work.

Thanks much!