Hi
I'm having problems with an image based menu (top level only) that works perfectly in every browser except Netscape 7. (both pc and mac)
The images overlap each other.
here's the url. any help is greatly appreciated.
http://65.171.101.78:8015/healthatoz/At ... oblem.html
thanks
chris
NETSCAPE 7 IMAGE OVERLAP
Hi Chris,
I had a look at your site and your code. Three suggestions:
(1) In your .html file, you're loading the menu scripts (menu_array.js and mmenu.js) between the closing </head> and the opening <body> tags. That's sort of unusual. The only instance I know of when people commonly use this location is when loading or defining scripts between the closing </head> and an opening <frameset>. See, for example, this page. The Milonic folks usually recommend loading the scripts in the body, preferably at the top.
(2) You're creating your horizontal main menu by manually positioning multiple, single-item menus. Although it sort of works, that's not really the way the script is intended to be used. With that approach, you'll probably end up with a lot of minor positional variations depending upon browsers. I'd recommend creating your main menu as one horizontal menu that contains all items.
(3) Do you still get the overlap after you reload the page? When the menu is rendered (especially since you have it outside of the body), the browser may be processesing your menu <img> tags before the images are in the cache. If so, the browser will not know what dimensions to give the images and will err on the side of too small, resulting in scrunched or overlapping images. You can avoid this by setting the width attribute inside an <img> tag to the actual width of the image (I always set the height attribute too). That way, the browser will use the proper dimensions even if the image is not yet available in the cache.
Hope that helps. Nice looking site BTW.
Kevin
I had a look at your site and your code. Three suggestions:
(1) In your .html file, you're loading the menu scripts (menu_array.js and mmenu.js) between the closing </head> and the opening <body> tags. That's sort of unusual. The only instance I know of when people commonly use this location is when loading or defining scripts between the closing </head> and an opening <frameset>. See, for example, this page. The Milonic folks usually recommend loading the scripts in the body, preferably at the top.
(2) You're creating your horizontal main menu by manually positioning multiple, single-item menus. Although it sort of works, that's not really the way the script is intended to be used. With that approach, you'll probably end up with a lot of minor positional variations depending upon browsers. I'd recommend creating your main menu as one horizontal menu that contains all items.
(3) Do you still get the overlap after you reload the page? When the menu is rendered (especially since you have it outside of the body), the browser may be processesing your menu <img> tags before the images are in the cache. If so, the browser will not know what dimensions to give the images and will err on the side of too small, resulting in scrunched or overlapping images. You can avoid this by setting the width attribute inside an <img> tag to the actual width of the image (I always set the height attribute too). That way, the browser will use the proper dimensions even if the image is not yet available in the cache.
Hope that helps. Nice looking site BTW.
Kevin
Thanks
I've been a bit overworked (and underpaid) recently but I wanted to be sure to thank you for your reply kevin.
I used your suggestion for adding widths to the images, but I also ended up writing a little extra javascript so that it would work.
At the top of the array.js file I added the following and then just called the variables later in the code. For some reason Netscape 7 seems to only work when it gets a null for the overall menu width, but ie needs to have a value. I also had problems with vertical positioning, so this seemed to take care of the problem.
if ((navigator.appName == "Netscape") && (parseFloat(navigator.appVersion)
>= 5)) {
ver=98;
hor=8;
wid=null
} else if (navigator.appName=="Netscape") {
ver=105;
hor=8;
wid=36
} else {
ver=95;
hor=11;
wid=38
}
c
I used your suggestion for adding widths to the images, but I also ended up writing a little extra javascript so that it would work.
At the top of the array.js file I added the following and then just called the variables later in the code. For some reason Netscape 7 seems to only work when it gets a null for the overall menu width, but ie needs to have a value. I also had problems with vertical positioning, so this seemed to take care of the problem.
if ((navigator.appName == "Netscape") && (parseFloat(navigator.appVersion)
>= 5)) {
ver=98;
hor=8;
wid=null
} else if (navigator.appName=="Netscape") {
ver=105;
hor=8;
wid=36
} else {
ver=95;
hor=11;
wid=38
}
c