Cross-Browser problems with Netscpae 7.0 & 4.72

[news frontiernet.net]

I am using FrontPage 2002 for these tasks.

I am trying to implement a CSS and .JS oriented approach to helping visitors
to Worthington Community Internet find business by categories, similar to
the way one uses a YELLOW PAGES. I do this as a volunteer.

In the past, I have relied upon tables and Java applets to provide these
facilities. I am trying to change to CSS.

So far, I have been able to figure out how to code the CSS and modify a
publicly available SHOW.HIDE Javascript to present a nice looking
Cagtegories Panel that works well in MSIE. This can be seen at:
http://www.wgtn.net/Business/category_layer.htm

Oh, I was so happy and confident that this was going well and would be very
useful. Ha! Then I looked at it with Netscape 7.0 and my optimism was
replaced with dismay! It does NOT look nice with Netscape 7.0 NOR do the
onmouseover NOR onClick Javascript event triggers work. And, even worse,
Netscape 4.72 is a terrible mess!

Netscape 7.0 can be seen in this PDF file (
http://www.wgtn.net/Business/category_layer_ns7.pdf) and has these errors;
1) The letters no longer fit the letter panel. "Z" extends below the panel.
Why?
2) The transparency on the .gif images seems to not work. Why?
3) The positions of the left arrow image is further to the left thanon the
mSIE version. Why?
4) NONE of the onmouseover or onClick events trigger the Javascript actions
asssociated with them that work well in MSIE. Why?

Netscape 4.72 is a total mess and can be seen at: (
http://www.wgtn.net/Business/category_layer_ns472.pdf)

The External Javascript file can be seen at:
http://www.wgtn.net/Business/category_layer_js.pdf


What do I need to do to make this work cross-browser on recent browsers like
Netscape 7.0?

What should I do to handle Netscpape 4.72. Ignore them? Or what?

 

[Mark Fitzpatrick]

Unfortunately, there are a lot of annoying differences.

The easiest, the transparency on the gifs may be working just fine. The
problem is, they may not be showing as transparent to their container and
are probably basing their transparency off the background of the page
instead. You may try to set the background color of the body tag
specifically to see if this works.

As far as fonts go, the different browsers often have a slightly different
way of rendering fonts. That's why a text box set for 20 characters in IE
looks like it's the right size, but in Navigator it's about half the size
and doesn't take 20 characters. You may have to manually set the spacing
above and below the font in the CSS to guarantee that it gets a consistant
appearance.

The big problem though, NS doesn't use the same terminology to show and hide
layers. Navigator 4.x introduced DHTML using the <layer> tag. Unfortunately
for them, the W3C rejected this as a way to do DHTML in HTML 4 but Netscape
was committed by that point to their own proprietary way of doing things.
Unfortunately that means you're going to have to change your script and use
a cross-browser script. You should be able to find lots of show/hide layer
scripts at javascript.internet.com, www.dynamicdrive.com and other script
repositories. One such is at:
http://javascript.internet.com/bgeffects/write-layer.html and you can get an
idea of the differences just by looking at it's browser detection routines.

Hope this helps,
Mark Fitzpatrick
Microsoft MVP - FrontPage

 

[Jim Buyens]

There's no clean, neat, and easy solution for this. CSS
Positioning and JavaScript work quite differently in IE,
Netscape 7, and especially Netscape 4, and as a result,
getting the same code to work in all three is a very
tricky proposition. Generally, you have to write a lot of
browser-sniffing code such as:

if (document.all){
// -- Do it the IE way
}else{
if (document.getElementById){
// -- Do it the Netscape 7 way
}else{
if (document.layers) {
// -- Do it the Netscape 4 way.
}
}
}

CSS Positioning is almost as bad, but you can avoid many
problems by not locating the HTML for positioned objects
inside other containers. For example, put them all at the
bottom of the page, just before </head>.

Jim Buyens
Microsoft FrontPage MVP
http://www.interlacken.com
Author of:
*----------------------------------------------------
|\---------------------------------------------------
|| Microsoft Office FrontPage 2003 Inside Out
||---------------------------------------------------
|| Web Database Development Step by Step .NET Edition
|| Microsoft FrontPage Version 2002 Inside Out
|| Faster Smarter Beginning Programming
|| (All from Microsoft Press)
|/---------------------------------------------------
*----------------------------------------------------

 

[Jon Spivey]

Hi,
the problem is the script doesn't support document.getElementById which all
modern browsers use. You can modify your scripts to support it like this

function hide(object) {
if (document.layers &&
document.layers[object])document.layers[object].visibility = 'hidden';
else if (document.all)document.all[object].style.visibility = 'hidden';
else if
(document.getElementById)document.getElementById(object).style.visibility =
'hidden';
}

also add this to your code to show a category
else if
(document.getElementById)document.getElementById(object).style.visibility =
'visible';

That will fix the script - for the layout I'd remove heights from your main
div and let it expand with the letters - 26 letters with line breaks are not
going to be the same height in any 2 browsers. IE is tolerant of divs
containing content taller than their declared height (technically this is a
bug) other browsers are not so accomodating.

Also for NN4 you'll need to replace all occurences of category_group with
something like catGroup it's not picking up your class name. There's more
that would need doing but hopefully this gives you a start.

Jon
Microsoft MVP - FP