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?
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.
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.
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.
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.)
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.
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:
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:
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.
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.
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:
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 to find any incorrect or unclosed tags I had used. Then I used HTML 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 to make sure everything is ok.
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() {
if (n) {drop2.visibility = “show”;}
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 () through showpull7 () could be taken care of in a single function showpull (num).
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:
<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.
) will require a little more time and research.