# 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:** 20
**Page:** 1

<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 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/1 "2003-03-06T00:44:06Z")

</div>

The site: [www.seattleccd.com](http://www.seattleccd.com)

The problem: The site looks and works fine in MSIE, but the navigation bar disappears in Mozilla and Netscape 7 (and, I think 6). Not that there’s a whole lot of difference between the two, but still.

Random bits of info: There’s also some javascript in there, and some browser detection stuff, but I’m about 75% sure it’s a CSS issue since messing with the block of styles around line 82 _kinda_ makes it work again. (Makes it visible, anyway.)

The general question: Is there any way to fix this w/out redoing _all_ the navigation without the bells and whistles?

---

<div class="post-metadata">

### Author: ![black\_rabbit](https://avatars.discourse-cdn.com/v4/letter/b/f19dbf/32.png) [@black\_rabbit](https://boards.straightdope.com/u/black_rabbit)
#### Post date: [March 6, 2003, 1:04am UTC](https://boards.straightdope.com/t/any-css-wizzes-in-here-help-me-have-my-navigation-not-dissapear-in-ns-mozilla/159380/2 "2003-03-06T01:04:47Z")

</div>

I’m at work, so no mozilla, but it looks to me like you should set the z-indexes on your menu divs to 1 or greater.

Oh, and you \<i\>should\</i\> be using quoted and lowercase attributes, eg \<div id=“blah”\>, not \<div ID=blah\>, but that’s just a nitpick.

---

<div class="post-metadata">

### Author: ![mnemosyne](https://avatars.discourse-cdn.com/v4/letter/m/c4cdca/32.png) [@mnemosyne](https://boards.straightdope.com/u/mnemosyne)
#### Post date: [March 6, 2003, 1:58am UTC](https://boards.straightdope.com/t/any-css-wizzes-in-here-help-me-have-my-navigation-not-dissapear-in-ns-mozilla/159380/3 "2003-03-06T01:58:38Z")

</div>

I had trouble with that site too, and I’m using Mozilla, but mine is wonky to begin with. I’m using 1.1, and I can’t get certain Java links to work - try www.chembio.uoguelph.ca/educmat/chm454/ - if you don’t see a whole bunch of links on the left in coloured boxes, then it could a problem with your java plugin, like me. I’m due for an update to see if I can get it to work. Mozilla on my SOs computer works fine for this.

The other thing is that a lot of websites that are designed in MSIE just don’t look good in Mozilla or Netscape because the latter two display CSS “better” than MSIE, and IE displays them wrong, but because the page was designed for IE, it looked ok … I have no idea how to express this properly, because I’m really just regurgitating what my SO has told me about this stuff. I don’t really know anything myself.

Good luck!

---

<div class="post-metadata">

### Author: ![dono](https://avatars.discourse-cdn.com/v4/letter/d/e0b2c6/32.png) [@dono](https://boards.straightdope.com/u/dono)
#### Post date: [March 6, 2003, 2:36am UTC](https://boards.straightdope.com/t/any-css-wizzes-in-here-help-me-have-my-navigation-not-dissapear-in-ns-mozilla/159380/4 "2003-03-06T02:36:10Z")

</div>

The only thing I can think of is that you’re using

element.visibility=“show”

for Netscape. I’ve been using

element.visibility=“visible”

and it seems to work fine in Netscape 4.x and 6.x. Click [here](http://www.wy.blm.gov/wfo/wh/map.htm) for an example, and do a “View source”.

Course, I’m no whiz - I just like to play around.

---

<div class="post-metadata">

### Author: ![GuanoLad](https://sea3.discourse-cdn.com/straightdope/user_avatar/boards.straightdope.com/guanolad/32/42_2.png) [@GuanoLad](https://boards.straightdope.com/u/GuanoLad)
#### Post date: [March 6, 2003, 2:43am UTC](https://boards.straightdope.com/t/any-css-wizzes-in-here-help-me-have-my-navigation-not-dissapear-in-ns-mozilla/159380/5 "2003-03-06T02:43:00Z")

</div>

Our policy is to not support Netscape. It’s no longer worth the hassle.

Though Mozilla is worth supporting, so I guess that advice doesn’t help you much.

---

<div class="post-metadata">

### Author: ![Duckster](https://sea3.discourse-cdn.com/straightdope/user_avatar/boards.straightdope.com/duckster/32/1244_2.png) [@Duckster](https://boards.straightdope.com/u/Duckster)
#### Post date: [March 6, 2003, 3:24am UTC](https://boards.straightdope.com/t/any-css-wizzes-in-here-help-me-have-my-navigation-not-dissapear-in-ns-mozilla/159380/6 "2003-03-06T03:24:12Z")

</div>

You should not make your CSS dependent upon JavaScript. Have you viewed the page with JavaScript turned off in your browser?

Surf on over to [this place](http://www.meyerweb.com/eric/css/edge/index.html) and see some innovative and web standards compliant CSS at work and play.

**GuanoLad** , are you saying you don’t code according to web standards but proprietary IE only?

---

<div class="post-metadata">

### Author: ![GuanoLad](https://sea3.discourse-cdn.com/straightdope/user_avatar/boards.straightdope.com/guanolad/32/42_2.png) [@GuanoLad](https://boards.straightdope.com/u/GuanoLad)
#### Post date: [March 6, 2003, 7:15am UTC](https://boards.straightdope.com/t/any-css-wizzes-in-here-help-me-have-my-navigation-not-dissapear-in-ns-mozilla/159380/7 "2003-03-06T07:15:11Z")

</div>

I code mostly to IE, though I try hard to keep my CSS as version 1, which should be viewable in all browsers by now.

Unfortunately it isn’t.

We recently had our site overhauled into a database driven PHP whizzy cool thing, but some NS users got some weird behaviour. We have less than 1% of NS users now, so we just dismissed them as not worth the enormous hassle of coding specifically for them.

---

<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 6, 2003, 8:29am UTC](https://boards.straightdope.com/t/any-css-wizzes-in-here-help-me-have-my-navigation-not-dissapear-in-ns-mozilla/159380/8 "2003-03-06T08:29:43Z")

</div>

You don’t need to code specificially for NS since it is based on Mozilla which has the best support for Web standards.

---

<div class="post-metadata">

### Author: ![Starbury](https://avatars.discourse-cdn.com/v4/letter/s/f04885/32.png) [@Starbury](https://boards.straightdope.com/u/Starbury)
#### Post date: [March 6, 2003, 2:32pm UTC](https://boards.straightdope.com/t/any-css-wizzes-in-here-help-me-have-my-navigation-not-dissapear-in-ns-mozilla/159380/9 "2003-03-06T14:32:50Z")

</div>

I didn’t have time to look through all of your html (sorry!) but Netscape usually screws things up when an object’s initial state is hidden. If an object is hidden when the page is first loaded, netscape typically just considers the object null and is then unable to “show” it at a later time.

My suggestion would be to take the “hidden” settings for the .pull and .menu items out of your style block. Then, at the bottom of your page, right before the \</body\>, insert a script block and call the javascript functions that hide it, if that’s what you need to be done.

---

<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 6, 2003, 6:18pm UTC](https://boards.straightdope.com/t/any-css-wizzes-in-here-help-me-have-my-navigation-not-dissapear-in-ns-mozilla/159380/10 "2003-03-06T18:18:06Z")

</div>

Thanks everyone for your suggestions. The only one I had a chance to try out was **dono’s** show/visible thing which, unfortunately, didn’t work.

I’ll probably try the z-index thing next (just create a style that’s just a z-index and add that style to the \<div id=menu#\> tags?), I suppose.

Anything more complex, like **Starbury’s** excellent-sounding (it makes a vague “whoosh” sound 🙂 ) will require a little more time and research.

I’ll be sure to let you folks know what finally fixes it.

(Oh, and ftr, this is me trying to figure out someone else’s code, so if it seems like this matter is confusing the heck out of me, that would be why.)

---

<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 6, 2003, 6:25pm UTC](https://boards.straightdope.com/t/any-css-wizzes-in-here-help-me-have-my-navigation-not-dissapear-in-ns-mozilla/159380/11 "2003-03-06T18:25:50Z")

</div>

And a quick code edit shows me that taking the “visibility:hidden” out of the style block _does_ appear to fix the visibility problem.

Trouble is, if I take them all out, all the iterations of the navigation (the nav for each and every page of the site, apparently) shows, all on top of each other. So if anyone can point me in the direction of a script block (or anything else, for that matter) that can prevent this, it would be greatly appreciated.

---

<div class="post-metadata">

### Author: ![Starbury](https://avatars.discourse-cdn.com/v4/letter/s/f04885/32.png) [@Starbury](https://boards.straightdope.com/u/Starbury)
#### Post date: [March 6, 2003, 7:23pm UTC](https://boards.straightdope.com/t/any-css-wizzes-in-here-help-me-have-my-navigation-not-dissapear-in-ns-mozilla/159380/12 "2003-03-06T19:23:05Z")

</div>

I tried changing the code around, but I had some trouble because I didn’t have the images for the menu. So I don’t know if any of the following advice will help…

What I was trying to suggest in my last post, and I realize I wasn’t all that clear, was to take out the visibility:hidden stuff, and then call a function to hide everything after the fact. So you might have this function:

```auto

function HideEmAll{
hideothers1();
hideothers2();
hideothers3();
hideothers4();
hideothers5();
hideothers6();
hideothers7();
};

<body onLoad="init();HideEmAll();">

```

Except, depending on what page you are on, you would remove one of the hideothers function calls, so that the proper section of the pulldown menu is visible.

One other suggestion: you could try changing your “init()” function. Its the first function in the first script block.

Like this:

```auto

if (n) {
drop1 = document.getElementById("pull1");
etc...change it for "pull" item on this one line
}

```

The reason I suggest this is that I am not sure if Netscape will be able to get a reference to your “pull” items without that syntax. I could be wrong though.

---

<div class="post-metadata">

### Author: ![GuanoLad](https://sea3.discourse-cdn.com/straightdope/user_avatar/boards.straightdope.com/guanolad/32/42_2.png) [@GuanoLad](https://boards.straightdope.com/u/GuanoLad)
#### Post date: [March 6, 2003, 9:21pm UTC](https://boards.straightdope.com/t/any-css-wizzes-in-here-help-me-have-my-navigation-not-dissapear-in-ns-mozilla/159380/13 "2003-03-06T21:21:39Z")

</div>

> [@](#):
>
> \*Originally posted by Urban Ranger \*  
> \*\*You don’t need to code specificially for NS since it is based on Mozilla which has the best support for Web standards. \*\*

HAAA!!! If only Netscape behaved like Mozilla.

---

<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 6, 2003, 11:10pm UTC](https://boards.straightdope.com/t/any-css-wizzes-in-here-help-me-have-my-navigation-not-dissapear-in-ns-mozilla/159380/14 "2003-03-06T23:10:23Z")

</div>

I think that **Starbury** is on the right track, but one thing of note is the _only_ valid values for the visibility attribute are: visible | hidden | collapse | inherit. So you probably want to change hide and show to hidden and visible, respectively.

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

> [@](#):
>
> \*Originally posted by black455 \*  
> Oh, and you _should_ be using quoted and lowercase attributes, eg \<div id=“blah”\>, not \<div ID=blah\>, but that’s just a nitpick.

This is true for XHTML, but not HTML. You should pick one and specify a doctype. Another nitpick is that for the sake of accessibility, you should specify the alt attribute in img’s:

\<img src=“images/nav\_left\_home.gif” width=“191” height=“20” border=“0” align=“left”\>

should be:

\<img src=“images/nav\_left\_home.gif” alt=“HOME” width=“191” height=“20” border=“0” align=“left”\>

---

<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 7, 2003, 4:11am UTC](https://boards.straightdope.com/t/any-css-wizzes-in-here-help-me-have-my-navigation-not-dissapear-in-ns-mozilla/159380/15 "2003-03-07T04:11:59Z")

</div>

> [@](#):
>
> \*Originally posted by GuanoLad \*  
> HAAA!!! If only Netscape behaved like Mozilla.

I dunno about that. I still can’t see the navigation bar (I presume it’s that blue column to the left) with Moz 1.2.1.

---

<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 7, 2003, 4:15am UTC](https://boards.straightdope.com/t/any-css-wizzes-in-here-help-me-have-my-navigation-not-dissapear-in-ns-mozilla/159380/16 "2003-03-07T04:15:21Z")

</div>

> [@](#):
>
> \*Originally posted by Achernar \*  
> fine.This is true for XHTML, but not HTML. You should pick one and specify a doctype.

IIRC, you need to do that for HTML 4.x strict, but not transitional.

---

<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 7, 2003, 4:26am UTC](https://boards.straightdope.com/t/any-css-wizzes-in-here-help-me-have-my-navigation-not-dissapear-in-ns-mozilla/159380/17 "2003-03-07T04:26:29Z")

</div>

Not so. My homepage validates as HTML 4.01 Strict (no warnings, even), and I have tags like this:

\<TD ID=Main\>

However, I am trying to get into the habit of using quotes and lowercase, because I want to upgrade to XHTML at some point.

---

<div class="post-metadata">

### Author: ![Starbury](https://avatars.discourse-cdn.com/v4/letter/s/f04885/32.png) [@Starbury](https://boards.straightdope.com/u/Starbury)
#### Post date: [March 7, 2003, 3:24pm UTC](https://boards.straightdope.com/t/any-css-wizzes-in-here-help-me-have-my-navigation-not-dissapear-in-ns-mozilla/159380/18 "2003-03-07T15:24:31Z")

</div>

If you are interested in making the transition to XHTML, there is software out there that will do most of the work for you.

When I converted my site over to XHTML, I used the [demo version of XMLSpy](http://www.altova.com/download_spy_enterprise.html) to find any incorrect or unclosed tags I had used. Then I used [HTML Tidy](http://www.w3.org/People/Raggett/tidy/) to make all of the tag names and attributes lowercase. Both of those programs are free (XMLSpy is free for the first 30 days).  
Then you can use [W3C’s on-line validator](http://validator.w3.org/) to make sure everything is ok.

---

<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, 1:55am UTC](https://boards.straightdope.com/t/any-css-wizzes-in-here-help-me-have-my-navigation-not-dissapear-in-ns-mozilla/159380/19 "2003-03-08T01:55:20Z")

</div>

I’ve been looking more at the code that the OP linked to, and I’m convinced I’ve found the problem. The problem is, whoever wrote this had never heard of Netscape, or indeed any browser other than Navigator or IE. Back when those two browsers were the only ones anyone cared about, code was written in a really embarrassing way. You’d define a variable or two that kept track of which of the two browsers you were on, and then hid chunks of your code accordingly. All you’d need is a means of differentiating the two. One of the most popular ways was a couple of properties known as document.layers, which existed only in Navigator, and document.all, which existed only in IE. Then you’d put some code like this:

if (document.layers) {n=1;ie=0}  
if (document.all) {n=0;ie=1}

Then your functions might look something like this:

function showpull2() {  
&nbsp;&nbsp;if (n) {drop2.visibility = “show”;}  
&nbsp;&nbsp;if (ie) {drop2.visibility = “visible”;}  
}

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.

That’s what’s wrong with your code, and it’s a very serious problem. Unless someone else has a better suggestion, I think that the best solution is scrapping everything and starting over, unfortunately. If you do, may I suggest judicious use of arrays and/or function arguments? It could reduce the size of your script by a factor of six. For instance, your functions showpull1&nbsp;() through showpull7&nbsp;() could be taken care of in a single function showpull&nbsp;(num).

---

<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 8, 2003, 6:22am UTC](https://boards.straightdope.com/t/any-css-wizzes-in-here-help-me-have-my-navigation-not-dissapear-in-ns-mozilla/159380/20 "2003-03-08T06:22:23Z")

</div>

Here’s code I use that works in NS 4 and IE 4 and up that will let you include the correct CSS page according to browser:

```auto

<Script Language = "JAVASCRIPT">

function include_css() {
	if (document.layers) {
		document.write('<link rel="stylesheet" href="css/ns4-styles.css">');
	} else if (document.all) {
		document.write('<link rel="stylesheet" href="css/ie6-styles.css">');
	} else if (!document.all && document.getElementById) {
		document.write('<link rel="stylesheet" href="css/ns6-styles.css">');
	}
}

<!-- //
include_css();
// -->
</script>

```

As you can figure out, substitute your own file paths where mine are. You can use the same code for including the correct JS script, but im my experience it’s best just to have cases in your one script for all browser types, using the same conditions above.

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