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:

Code:

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

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

Thread Tools

Search Thread

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

Bookmarks

Bookmarks

Posting Permissions