[shanewa2]

I am using the top navigation II menu from brainjar found at dynamicdrive.com . When the page has a form with a drop down box, the horizontal menu goes under the drop down? In other words it is not visible. Does anyone know a solution for this problem ? It should be a solution that works in Netscape as well as in IE.

example of solution:

http://www.microsoft.com/trainingandservices/default.asp

any copy and paste solution for the top navigation II menu scheme?

[diades]

Try setting the style attribute for the menu to 1(or 1 greater than anything else on the page, it should raise the menu above the rest on the screen.

[shanewa2]

thanks,
any other ideas?

[mmi]

diades - do you mean the z-index?

[diades]

Is there a cure for brain-dead? Yes, I seem to have forgotten the attribute to set to 1 or ore, - "z-index"

[mmi]

don't feel bad - the problem I have is that I can't figure out how to USE the #@$&%^* thing - you may have noticed me in the breakdown lane with the hood up on this page tryin' to get the dd menus on the right to display in the same space - seems like z-index is the trick - y'all don't really want the Design Review mod looking foolish like this, do you?

[diades]

Does #@$&%^ have its base in Esperanto? I seem to understand the meanig somehow

[mmi]

unfortunately, I managed to hide the true "meaning" of my post - I want those lists to display in the same space - I haven't been able to pull it off - as they say in this biz, PLLEEEEAAAASSSSSEEEEE HELP, i.e., write the code for me

[diades]

I would suggest that you put the class ".contentArea1" to ".contentArea" and make it the class name for both divs. Make the position absolute instead of relative and make the top and left the same. Give each div an inline style attribute of z-index:0 then toggle the zIndex in a function thus:

function toggleOn(e){
  var e = document.getElementById(e.id);
  el.style.zIndex = 1;
}
function toggleOff(e){
  var e = document.getElementById(e.id);
  el.style.zIndex = 0;
}

hth

[mmi]

jeez, I tried most 'a this stuff in different combinations but never put it all together - I was actually making SLOW progress on figuring this out and would have gotten it in another year or two - IOU one

[diades]

Give the divs a background-color so they don't show the div on the bottom.

[mmi]

I really appreciate your help on this diades, but in applying your solution, I seem to run into the same problem I've been having all along - namely, the positioning - if I set these as absolute values, won't they be "misplaced" when viewed at varying screen resolutions? - if this stuff were up against a left margin, I think I could do what I want easily enough - my problem seems to be (I may be wrong) that I'm trying to reach across a "center column" that is set up to vary its width to fill the screen - maybe I just need to redesign the page, but I'm thinking there must be SOME way of dealing with this

[diades]

Don't despair, I'll take a look a see if I can't really mess it up!

[diades]

Ok, I have just tested this in IE 5.5 and it works. I can't test yet in N4.7 or N6 because I haven't reloaded them yet after formatting my disk.

Change:

    .contentArea1 {position:relative; visiblity: hidden; width:186px}
    .contentArea2 {position:relative; visiblity: hidden; width:186px}

To:

    .contentArea {position:relative; display: none; width:186px}

Change:

function showDivs (divName,divNumber) {
  var divsUsed = 2;
  if (navigator.appName.indexOf ("Microsoft") == 0 || navigator.appName.indexOf ("Netscape") == 0) {
    if (parseInt (navigator.appVersion) >= 4) {
      var cnt = 0;
      for (cnt = 1; cnt <= divsUsed; cnt++) {
        var divCheck = divName + cnt; 
        var divShow = divName + divNumber;
        if (ie) {
          if (divCheck == divShow)  document.all(divShow).style.visibility = visible;
          else document.all(divCheck).style.visibility = hidden;
        }
        if (n) {
          if (divCheck == divShow) document.layers[divShow].visibility = visible;
          else document.layers[divCheck].visibility = hidden;
        }
      }
    }
  }
}

To:

function showDivs (divName,divNumber) {
  var divsUsed = 2;
  if (navigator.appName.indexOf ("Microsoft") == 0 || navigator.appName.indexOf ("Netscape") == 0) {
    if (parseInt (navigator.appVersion) >= 4) {
      var cnt = 0;
      for (cnt = 1; cnt <= divsUsed; cnt++) {
        var divCheck = divName + cnt; 
        var divShow = divName + divNumber;
        if (ie) {
          if (divCheck == divShow)  document.all(divShow).style.display = "block";
          else document.all(divCheck).style.display = "none";
        }
	if (n) {
          if (divCheck == divShow) document.layers[divShow].display = "block";
          else document.layers[divCheck].display = "none";
        }
      }
    }
  }
}

Change:

<div id="area_1" class="contentArea1" align="center" style="width: 186px">
<div id="area_1" class="contentArea2" align="center" style="width: 186px">

To:

<div id="area_1" class="contentArea" align="center" style="width: 186px">
<div id="area_1" class="contentArea" align="center" style="width: 186px">

Light the blue touch paper and retire

[mmi]

lookin' good so far, but I'm not getting a display in N4.7 - I'm using this page to troubleshoot the change - N doesn't like the condition

if (divCheck == divShow) document.layers[divShow].visibility = visible;

producing

document.layers[divShow] has no properties

- IE was doing the same thing on its line at first - I changed the div id's back to area_1 and area_2 and it was satisfied - N still doesn't like it - [just to be clear, having them both with id="area_1" didn't help N; it simply caused IE to fail] - so it seems like I need to label these divs in a way that N likes - I really appreciate your help, diades, in getting this done - it's been buggin' me - hopefully, a nomenclature that satisfies N's exacting standards will somehow become known to me