Drop Down Tabs not drop down on FF. Convert to nav bar? Sizing is off.

[feeble_fuel]

1) Script Title: Drop Down Tabs: Blue Tabs

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

3) Describe problem:

1. The drop downs do not appear in Fire Fox but they do in IE7.

2. I would like to change the tabs to a solid navigation bar instead of tabs, but can't seem to figure out how to get rid of the spacing between tabs.

3. Also, I am trying to use a background image for the top level nav bar that is 28px high, but it seems the tab height is more determined by the size of the font, so the image is either cut off or shrunk down. Is it controlled in the javascript?

Here is a link to a test url:
http://www.stickpeopleproductions.com/WholeAthlete/dropdowntabsdemo.htm

You can see what the gray main navigation background and size would look like here:
http://www.stickpeopleproductions.com/WholeAthlete/

My CSS is below. I've made some modifications here and there but nothing too drastic at this point.

Any help is greatly appreciated!

Cheers,

Kelly



.bluetabs{
border-bottom: 0;
font-family: Arial, Verdana, Helvetica, sans-serif;
font-weight: bold;
font-size: 11px;
}

.bluetabs ul{
padding: 3px 0;
margin-left: 0;
margin-top: 1px;
margin-bottom: 0;
list-style-type: none;
text-align: left; /*set to left, center, or right to align the menu as desired*/

}

.bluetabs li{
display: inline;
margin: 0;
}

.bluetabs li a{
text-decoration: none;
padding: 3px 7px;
margin-right: 3px;
border: 0;
color: #000000;
background: white url(http://www.stickpeopleproductions.com/WholeAthlete/assets/graphics/NavGray.gif) repeat-x top left; /*THEME CHANGE HERE*/
height: 28px;
}

.bluetabs li a:visited{
color: #000000;
}

.bluetabs li a:hover{
text-decoration: none;
color: #ffffff;
}

.bluetabs li.selected{
}

.bluetabs li.selected a{
background-image: url(http://www.stickpeopleproductions.com/WholeAthlete/assets/graphics/NavGrayOver.gif); /*THEME CHANGE HERE*/
border-bottom-color: white;
height: 28px;
}

.bluetabs li.selected a:hover{ /*selected main tab style */
background-image: url(http://www.stickpeopleproductions.com/WholeAthlete/assets/graphics/NavGrayOver.gif);
height: 28px;
text-decoration: none;
color: #ffffff;
}

/* ######### Style for Drop Down Menu ######### */

.dropmenudiv_b{
position:absolute;
top: 0;
border: 1px solid #918d8d; /*THEME CHANGE HERE*/
border-width: 0 0px;
font-family: Arial, Verdana, Helvetica, sans-serif;
font-weight: bold;
font-size: 11px;
line-height:28px;
z-index:100;
background-color: #e4e4e4;
width: 200px;
visibility: hidden;
}


.dropmenudiv_b a{
width: auto;
display: block;
text-indent: 5px;
border: 0 solid #918d8d; /*THEME CHANGE HERE*/
border-bottom-width: 1px;
padding: 2px 0;
text-decoration: none;
color: black;
}

* html .dropmenudiv_b a{ /*IE only hack*/
width: 100%;
}

.dropmenudiv_b a:hover{ /*THEME CHANGE HERE*/
background-color: #999999;
}

[feeble_fuel]

Anybody out there with some ideas? I'm stumpped....

[Minos]

Alrighty, Problem #1:

This is a programming concept that not everyone understands, and it stems from the idea of overloading. Let's say I want to create a function that takes an integer, and returns the left-most digit, called lefter(number). Later on, I want this function to be able to also start from a specified point, so I create ANOTHER function called lefter(number, start). Despite the fact that they are named the same, they each take a different number of variables, so they different functions.

Your page has this:

tabdropdown.init("bluemenu")
but needs this:

tabdropdown.init("bluemenu", 0)

tabdropdown.init requires two variables, see the description on the script's page for info. Firefox handles this appropriately, IE makes for bad programmers :(.

Problem #2: There is a LOT of css in there, and without me grabbing all that and setting up a test site, it's hard for me to judge exactly what you need to change, but I'd start by changing:

.bluetabs li a{
text-decoration: none;
padding: 3px 7px;
margin-right: 3px;
border: 0;
color: #000000;
background: white url(http://www.stickpeopleproductions.com/WholeAthlete/assets/graphics/NavGray.gif) repeat-x top left; /*THEME CHANGE HERE*/
height: 28px;
}
to:

.bluetabs li a{
text-decoration: none;
padding: 0px;
margin-right: 0px;
border: 0;
color: #000000;
background: white url(http://www.stickpeopleproductions.com/WholeAthlete/assets/graphics/NavGray.gif) repeat-x top left; /*THEME CHANGE HERE*/
height: 28px;
}

The basic concept of them being right next to each other is removing all margin and padding from the left and right of the elements.

Problem #3: I have no idea if it's controlled in the javascript unless I see it.

[feeble_fuel]

Thank you for responding...and your helpful response! I changed the javascript call and got the drop downs to work in both browsers. I was just using what I downloaded from Dynamic Drive, but maybe I changed something by mistake.

I'm still having the issue of spaces between the navigation text options and the I can't get the height to display at 28px.

I would basically like all the navigation links to be spaced as justified across a solid navigation bar that is 28px hight and 971px wide with the graphic background that I'm using.

The behavior must be in the JavaScript, so I have included all the code together in one html file in the attached .zip file. It should now run as a stand alone app. The graphics are being pulled in from my server with the full urls.

This is the one piece of this web site I am trying to code that is getting in my way of moving forward with this project.

Any help is very much appreciated!

Thank you,

Kelly