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

**URL:** <https://boards.straightdope.com/t/any-css-wizzes-in-here-help-me-have-my-navigation-not-dissapear-in-ns-mozilla/159380>\
**Category:** Factual Questions\
**Created:** [March 6, 2003, 12:44am UTC](https://boards.straightdope.com/t/any-css-wizzes-in-here-help-me-have-my-navigation-not-dissapear-in-ns-mozilla/159380 "2003-03-06T00:44:06Z")\
**Posts on this page:** 15\
**Page:** 2

<div class="post-metadata">

**Author:** ![Achernar](https://avatars.discourse-cdn.com/v4/letter/a/e274bd/32.png) [@Achernar](https://boards.straightdope.com/u/Achernar)\
**Post date:** [March 8, 2003, 3:25pm UTC](https://boards.straightdope.com/t/any-css-wizzes-in-here-help-me-have-my-navigation-not-dissapear-in-ns-mozilla/159380/21 "2003-03-08T15:25:46Z")

</div>

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](http://www.w3.org/Style/CSS/), 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.

---

<div class="post-metadata">

**Author:** ![Achernar](https://avatars.discourse-cdn.com/v4/letter/a/e274bd/32.png) [@Achernar](https://boards.straightdope.com/u/Achernar)\
**Post date:** [March 10, 2003, 12:04am UTC](https://boards.straightdope.com/t/any-css-wizzes-in-here-help-me-have-my-navigation-not-dissapear-in-ns-mozilla/159380/22 "2003-03-10T00:04:33Z")

</div>

> [@](#):
>
> \*Originally posted by Achernar \*  
> **GuanoLad** , this stuff interests me. Can you link to a page that Netscape 7 displays significantly differently than Mozilla 1.0? I don’t need a whole explanation. Just one single solitary link will do. Even a code snippet would be fine.

**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.

---

<div class="post-metadata">

**Author:** ![Gozu\_Tashoya](https://avatars.discourse-cdn.com/v4/letter/g/7993a0/32.png) [@Gozu\_Tashoya](https://boards.straightdope.com/u/Gozu_Tashoya)\
**Post date:** [March 10, 2003, 9:07am UTC](https://boards.straightdope.com/t/any-css-wizzes-in-here-help-me-have-my-navigation-not-dissapear-in-ns-mozilla/159380/23 "2003-03-10T09:07:27Z")

</div>

> [@](#):
>
> \*Originally posted by Achernar \*  
> **Now, this is a really bad idea, for a whole lot of reasons. The reason which is most relevant here, though, is that beyond being inconsiderate of other browsers, this code is written with the very clear intention of working _only_ on Navigator or IE. Consider a browser like Netscape or Mozilla, in which document.layers and document.all are both undefined. The code which sets the values of the variables n and ie will never be executed, so both of these variable will also be undefined. Even if you set them both to 0, your function will have no effect.**

: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.

---

<div class="post-metadata">

**Author:** ![Urban\_Ranger](https://avatars.discourse-cdn.com/v4/letter/u/e9c0ed/32.png) [@Urban\_Ranger](https://boards.straightdope.com/u/Urban_Ranger)\
**Post date:** [March 10, 2003, 11:04am UTC](https://boards.straightdope.com/t/any-css-wizzes-in-here-help-me-have-my-navigation-not-dissapear-in-ns-mozilla/159380/24 "2003-03-10T11:04:15Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Achernar](https://avatars.discourse-cdn.com/v4/letter/a/e274bd/32.png) [@Achernar](https://boards.straightdope.com/u/Achernar)\
**Post date:** [March 10, 2003, 1:58pm UTC](https://boards.straightdope.com/t/any-css-wizzes-in-here-help-me-have-my-navigation-not-dissapear-in-ns-mozilla/159380/25 "2003-03-10T13:58:47Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Gozu\_Tashoya](https://avatars.discourse-cdn.com/v4/letter/g/7993a0/32.png) [@Gozu\_Tashoya](https://boards.straightdope.com/u/Gozu_Tashoya)\
**Post date:** [March 10, 2003, 8:27pm UTC](https://boards.straightdope.com/t/any-css-wizzes-in-here-help-me-have-my-navigation-not-dissapear-in-ns-mozilla/159380/26 "2003-03-10T20:27:04Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Gozu\_Tashoya](https://avatars.discourse-cdn.com/v4/letter/g/7993a0/32.png) [@Gozu\_Tashoya](https://boards.straightdope.com/u/Gozu_Tashoya)\
**Post date:** [March 10, 2003, 8:31pm UTC](https://boards.straightdope.com/t/any-css-wizzes-in-here-help-me-have-my-navigation-not-dissapear-in-ns-mozilla/159380/27 "2003-03-10T20:31:30Z")

</div>

> [@](#):
>
> \*Originally posted by Achernar \*  
> **So here’s my question: Do you want the menu to appear and disappear as you point to it?**

Or, to answer more succinctly, no. 😉

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…

---

<div class="post-metadata">

**Author:** ![Achernar](https://avatars.discourse-cdn.com/v4/letter/a/e274bd/32.png) [@Achernar](https://boards.straightdope.com/u/Achernar)\
**Post date:** [March 10, 2003, 10:28pm UTC](https://boards.straightdope.com/t/any-css-wizzes-in-here-help-me-have-my-navigation-not-dissapear-in-ns-mozilla/159380/28 "2003-03-10T22:28:26Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![Gozu\_Tashoya](https://avatars.discourse-cdn.com/v4/letter/g/7993a0/32.png) [@Gozu\_Tashoya](https://boards.straightdope.com/u/Gozu_Tashoya)\
**Post date:** [March 11, 2003, 7:59am UTC](https://boards.straightdope.com/t/any-css-wizzes-in-here-help-me-have-my-navigation-not-dissapear-in-ns-mozilla/159380/29 "2003-03-11T07:59:40Z")

</div>

> [@](#):
>
> \*Originally posted by Achernar \*  
> \*\*  
> Does this make any sense? \*\*

Yeah, except for this part:

> [@](#):
>
> but depending on the exact want you look…

😃

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.

---

<div class="post-metadata">

**Author:** ![Achernar](https://avatars.discourse-cdn.com/v4/letter/a/e274bd/32.png) [@Achernar](https://boards.straightdope.com/u/Achernar)\
**Post date:** [March 11, 2003, 6:56pm UTC](https://boards.straightdope.com/t/any-css-wizzes-in-here-help-me-have-my-navigation-not-dissapear-in-ns-mozilla/159380/30 "2003-03-11T18:56:54Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Achernar](https://avatars.discourse-cdn.com/v4/letter/a/e274bd/32.png) [@Achernar](https://boards.straightdope.com/u/Achernar)\
**Post date:** [March 11, 2003, 11:15pm UTC](https://boards.straightdope.com/t/any-css-wizzes-in-here-help-me-have-my-navigation-not-dissapear-in-ns-mozilla/159380/31 "2003-03-11T23:15:56Z")

</div>

> [@](#):
>
> \*Originally posted by KKBattousai \*  
> OOC, you left the header class off the contact us link. Was this intentional?

No.

---

<div class="post-metadata">

**Author:** ![ZipperJJ](https://sea3.discourse-cdn.com/straightdope/user_avatar/boards.straightdope.com/zipperjj/32/211_2.png) [@ZipperJJ](https://boards.straightdope.com/u/ZipperJJ)\
**Post date:** [March 11, 2003, 11:46pm UTC](https://boards.straightdope.com/t/any-css-wizzes-in-here-help-me-have-my-navigation-not-dissapear-in-ns-mozilla/159380/32 "2003-03-11T23:46:19Z")

</div>

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 ☹

---

<div class="post-metadata">

**Author:** ![Achernar](https://avatars.discourse-cdn.com/v4/letter/a/e274bd/32.png) [@Achernar](https://boards.straightdope.com/u/Achernar)\
**Post date:** [March 12, 2003, 12:13am UTC](https://boards.straightdope.com/t/any-css-wizzes-in-here-help-me-have-my-navigation-not-dissapear-in-ns-mozilla/159380/33 "2003-03-12T00:13:11Z")

</div>

> [@](#):
>
> \*Originally posted by KKBattousai \*  
> And this would be even simpler (would, at least, be much neater), if our host supported SSI…

It’s always something. 😉

---

<div class="post-metadata">

**Author:** ![ZipperJJ](https://sea3.discourse-cdn.com/straightdope/user_avatar/boards.straightdope.com/zipperjj/32/211_2.png) [@ZipperJJ](https://boards.straightdope.com/u/ZipperJJ)\
**Post date:** [March 12, 2003, 1:08am UTC](https://boards.straightdope.com/t/any-css-wizzes-in-here-help-me-have-my-navigation-not-dissapear-in-ns-mozilla/159380/34 "2003-03-12T01:08:53Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Gozu\_Tashoya](https://avatars.discourse-cdn.com/v4/letter/g/7993a0/32.png) [@Gozu\_Tashoya](https://boards.straightdope.com/u/Gozu_Tashoya)\
**Post date:** [March 13, 2003, 12:13am UTC](https://boards.straightdope.com/t/any-css-wizzes-in-here-help-me-have-my-navigation-not-dissapear-in-ns-mozilla/159380/35 "2003-03-13T00:13:31Z")

</div>

Amen to that.

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

[Previous page](https://boards.straightdope.com/t/any-css-wizzes-in-here-help-me-have-my-navigation-not-dissapear-in-ns-mozilla/159380.md?page=1)