Any CSS wizzes in here? Help me have my navigation NOT dissapear in NS/Mozilla?

There is probably very little that will be different between your Netscape style sheet and your IE style sheet. Your Navigator style sheet will likely look different, though. I still think this is a bad idea, but here’s how W3C does it, without relying on Javascript:

<link rel=“alternate stylesheet” title=“Blue shadows” href="…/map-ns.css">
<link rel=“alternate stylesheet” title=“Blue shadows” href="…/map.css" media=“all”>
<!-- map.css is better than map-ns, but must be hidden from NS 4.x -->

Navigator (which they erroneously call NS 4.x) does not recognize the media attribute, so it will not access map.css.

GuanoLad? Or anyone? I’m not trying to be antagonistic, but my own searches are turning up nothing. (If nobody responds, though, I’ll just let this question die and be forgotten.) Thank you.

:smack: In researching the way the “browser specific” code thing worked, I had a feeling that it my problems may have been something like this.

(Question: This being the case, I’m guessing ZipperJJ’s suggestion won’t have much impact on NS7/Mozilla?)

Unfortunately, redoing the navigation isn’t really a viable option because a) except for the most rudimentary understanding of how it works*, I don’t know beans about javascript and b) I doubt I would have the time to do it. (I’m not sure what my deadline is, but I’m under the impression that it’s coming up.)

So two questions/possible solutions.

  1. Is there any reliable browser detection javascript that would detect mozilla and allow me to keep (most of) the existing code?

  2. As the visibility:hidden attribute seems to be what is causing all the fuss, is there any downside to selectively deleting it from the menu and pull styles? (Besides it being an inelegant solution and a PITA to boot?)

And what I want to know is, how did the person who designed this site managed to fubar things up so nicely when everybody else on the Internet seems to have avoided these problems altogether? :mad:
*I’m open to suggestions on books that may remedy this ignorance of mine.

Most of the stuff that used to require JavaScript now can be done with CSS. There are some good uses for JavaScript, like validating inputs, other uses should be avoided.

I loaded up your page in IE, and had a look. First, let’s take a look at your menu HTML, which is located about 20% of the way down the page. Here is how it starts (simplified a little):

<!–Menu 1, this is the part you click on, notice the mouseover fires the functions showpull1() AND hideothers1()–>
<div ID=menu1>

<a href="…/index.htm">
<img src="…/images/nav_left_home.gif" width=“191” height=“20” border=“0”></a><br>
<img src="…/images/empty.gif" width=“191” height=“2” border=“0”><br>
<a onclick=“showpull1();hideothers1()” href="…/about/index.htm">
<img src="…/images/nav_left_aboutus.gif" width=“191” height=“20” border=“0”></a><br>

One thing I notice is that while the comment says that the Javascript runs with a mouseover event, it actually gets called with a onclick event. Do you see that?

Since all the links have viable href’s, they take you places, so specifying something to happen with onclick doesn’t seem terribly useful to me.

So here’s my question: Do you want the menu to appear and disappear as you point to it? If so, do you need it to? If not, you can simplify this whole mess without even using Javascript. But if so, then there are workarounds, but they’re not easy.

Yeah, those onclicks confuse me as well.

I don’t need anything to appear/disappear in the usual onmouseover sense. However, since there are 7 versions of the navigation (each one having different sections of the site “expanded”) existing in each document, one needs to be visible while the others are hidden.

I’ve been assuming that that’s what the onclick was in charge of, but that may or may not be the case. I’m about 95% sure that each page knows which iterations of the navigation are supposed to be shown/hidden, so, in my long-winded way, I guess I’m saying the onclicks are unnecessary.

Yet another thing I’ll have to clean up when I really have to dive into the guts of the thing, I guess.

Or, to answer more succinctly, no. :wink:

And to be honest, I’m growing quite tempted to strip everything out of the navigation save for the HTML (I’m not even sure there’s any CSS worth saving in there) and hard-coding it into each page.

And this would be even simpler (would, at least, be much neater), if our host supported SSI…

If you don’t want telescoping menus, then as I see it, you have to scrap the Javascript. It’s giving you zero benefit, and everything you want can be done better with CSS. Your menu is set up such that there are eight main headers, each of which has between 0 and 4 subpages. The headers have GIF buttons. When you are on a header page, the subpages are listed beneath the header as bulleted list items. When you are on a subpage, same thing except the item that you’re on is highlighted. So, the menu looks different on every page. If you are not going to be altering what goes on the menu in the future, I suggest hard-coding every separate page, like you mention. If you are, there may be a way to make the code uniform across the different pages, except for one or two minor variations, but this has the disadvantage of being more difficult, and also taking up more bandwidth.

With that in mind, I suggest you make three classes, one for the headers, one for unselected list items, and one for the selected list items. Put your CSS for the three classes in an external style sheet that you link to. You can even make two external sheets, if you need a different one for Navigator.

For instance, the second header is called ABOUT US, and has two subpages, Approach and History. You can make your code on the History page look something like this:

<a href=“index.htm” class=“header”>
<img src=“images/nav_left_home.gif” alt=“HOME” width=“191” height=“20”>
</a>

<br>

<a href=“about/index.htm” class=“header”>
<img src=“images/nav_left_aboutus.gif” alt=“ABOUT US” width=“191” height=“20”>
</a>

<ul>
<li class=“unselected”><a href=“about/approach.htm”>Approach</a>
<li class=“selected”><a href=“about/history.htm”>History</a>
</ul>

<a href=“about/contactus.htm”>
<img src=“images/nav_left_contactus.gif” alt=“CONTACT US” width=“191” height=“20”>
</a>
etc.

I made a few changes to the existing code. I removed border and align attributes from your img tags - these attributes can be better specified with style sheets. The same with the spacer GIFs. I also added alt attributes, which I mentioned are pretty important.

I put the class attribute on the a tag for headers and the li tag for subpages, but depending on the exact want you look, it may go better on the img tag for headers and the a tag for subpages. Or, it could go on div or span tags.

Does this make any sense?

Yeah, except for this part:

:smiley:

Seriously, though, once I stopped banging my head against the wall (a habit I picked up when I realized what, exactly, I had signed up for), pretty much everything made sense.

OOC, you left the header class off the contact us link. Was this intentional?

Also, by “telescoping” menus, you mean the type where the navigation changes but the rest of the page stays the same? (Like other, better designed sites have?) That I won’t need. (Though now that you mention it, do you think the onclicks on the links were a failed attempt at adding just that?) The “kinda telescoping but each page really has its own unique hard coded navigation” is probably all I will need and is all that the site currently has anyway.

And needless to say (but here I go anyway), thanks so very much to everyone for giving me some insight as to where I should go with this whole mess.

As best as I can tell, the purpose of the JavaScript is this: When you point to a header, the subpages beneath it appear, and you can point to and click on them. When you point to another header, the old one collapses and the new subpages for the new header appear. At least, that’s how it was supposed to be. I imagine they couldn’t get it to work, so they changed it from mouseover to onclick, effectively nullifying the code.

No.

Since you have 7 different nav html pages, what you are trying to do serves absolutely no purpose. The only reason you would need a menu system like this is if the page doesn’t change when you click on a nav link, but drops down a new menu section and closes the open one.

Use Server Side Includes (someone here can help if you don’t know how) to just include the correct nav within the correct pages.

I thought you were using just one nav file (to cut down on editing) but since you have 7, you’re kinda wasting your time with this thing :frowning:

It’s always something. :wink:

ok ok but still if he is using 7 nav menus this thing still doesn’t make sense to try to carry out. not at all.

Amen to that.

Well, I guess I know what I’m doing with my weekend…