IE compatibility

[olliepop]

Hi x10 programmers

I'm working on an entry for a web competition, it has to be on something we're learning this year, so i chose Life in Nazi Germany. I am NOT A NAZI.

The URL is http://tribalcorp.net

The menu works perfectly on all browsers BUT ie.

The rules state the website must function equally for all browsers.

Who knows why this script isn't compatible with Internet Explorer?

<script type="text/javascript"> 
if (!document.layers) {
document.write('<div id="divStayTopLeft" style="position:absolute">');
}
</script>

<div id="divStayTopLeft">

<!--EDIT BELOW CODE TO YOUR OWN MENU-->
<table border="0" width="130" cellspacing="0" cellpadding="0">
  <tr>
    <!-- <td width="100%" bgcolor="#FFFFCC">
      <p align="center"><b><font size="4">Menu</font></b></td> -->

  </tr>
  <tr>
    <td width="100%">
      <p align="left"><div class="navbar" id="navbar" name="navbar">&nbsp;</div>
	  </td>
  </tr>
</table>
<!--END OF EDIT-->

</div>


<script type="text/javascript">

/*
Floating Menu script-  Roy Whittle (http://www.javascript-fx.com/)
Script featured on/available at http://www.dynamicdrive.com/
This notice must stay intact for use
*/

var verticalpos="frombottom";

if (!document.layers) {
document.write('</div>');
}

function JSFX_FloatTopDiv()
{
	var startX = 3,
	startY = 600;
	var ns = (navigator.appName.indexOf("Netscape") != -1);
	var d = document;
	function ml(id)
	{
		var el=d.getElementById?d.getElementById(id):d.all?d.all[id]:d.layers[id];
		if(d.layers)el.style=el;
		el.sP=function(x,y){this.style.left=x;this.style.top=y;};
		el.x = startX;
		if (verticalpos=="fromtop") {
		el.y = startY;
		}else{
		el.y = ns ? pageYOffset + innerHeight : document.body.scrollTop + document.body.clientHeight;
		el.y -= startY;
		}
		return el;
	}
	window.stayTopLeft=function()
	{
		if (verticalpos=="fromtop"){
		var pY = ns ? pageYOffset : document.body.scrollTop;
		ftlObj.y += (pY + startY - ftlObj.y)/8;
		}
		else{
		var pY = ns ? pageYOffset + innerHeight : document.body.scrollTop + document.body.clientHeight;
		ftlObj.y += (pY - startY - ftlObj.y)/8;
		}
		ftlObj.sP(ftlObj.x, ftlObj.y);
		setTimeout("stayTopLeft()", 10);
	}
	ftlObj = ml("divStayTopLeft");
	stayTopLeft();
}
JSFX_FloatTopDiv();
</script>

Thanks for your time

[lhyman]

Don't know, I don't even have time right now to look at it, but I want to give you some very helpful advice.... (has helped me anyways)

If you want a good meun system the will work with all browsers, take a look here:

http://www.dynamicdrive.com/

and also:

test your site in IE first because it is the most pickey, if it works fine in IE with no errors, then try it in firefox and then Opera

Sorry if I wasn't much help, but I have to run....

[sourfacedcyclop]

I'm not really in the mood to debug it for you, but just looking at the source code, I see some markup errors, try running it through an XHTML validater and fixing those errors.

[xav0989]

Don't know, I don't even have time right now to look at it, but I want to give you some very helpful advice.... (has helped me anyways)

If you want a good meun system the will work with all browsers, take a look here:

http://www.dynamicdrive.com/

I believe that olliepop is currently using a dynamic drive menu.

Anyways, I personally use Simple Javascript Drop Down Menu on my website and I have no compatibility errors under IE, FF, Opera or other.

And as sourfacedcyclop said, you better check your code for (X)HTML compliance.

[lhyman]

well, I just copied his code to a new page and put it inbetween the body tage, all I got was thank you for your time

I went to the author's site..... maybe he's not following the instructions... the site is here, maybe, he can review it again...

http://www.javascript-fx.com/navigation/index.html

I got a dhtm menu from dynamic drive once... everything worked... but you really got to follow instructions... have a look here:

http://www.gennysuniforms.com/newhome.htm

[saif7463]

Hi,

It's actually your CSS that is failing in IE, not your invalid HTML (which you should still fix!)

Apparently, IE does not like min-height or min-width. In order to use it correctly, one must make use of a hack. The easiest and quickest to implement would be: http://www.dustindiaz.com/min-height-fast-hack/.

In your case, that would give you:

.navbar{
  background-image:url(images/nazimenu.png);
  max-height:500px;
  /* min-height hack */
  min-height:500px;
  height:auto !important;
  height:500px;
  
  max-width:300px;
  /* min-width hack */
  min-width:300px;
  width:auto !important;
  width:300px;
}

Of course, in your case, there really isn't a reason to use max/min... so why not just use width and height, as in the following code?

.navbar{
  background-image:url(images/nazimenu.png);
  height:500px;
  width:300px;
}

No hacks needed, and best of all, it works in all browsers

[misson]

<script type="text/javascript"> 
if (!document.layers) {
document.write('<div id="divStayTopLeft" style="position:absolute">');
}
</script>

NN4 is dead, buried and rotted to dirt.

<table border="0" width="130" cellspacing="0" cellpadding="0">

That's not tabular data. Don't abuse tables ([2]).

These days, you don't need JS for menus. You can use fixed positioning (not supported in IE6, but you can emulate it) to keep the menu always in view. To display/hide submenus, use the ':hover' pseudo class (examine pure CSS menu techiques for details). The code to display/hide a submenu can be as simple as:

.submenu {
    display: none;
}
.menu li:hover>.submenu, .show {
    display: block;
}

Position the submenus absolutely:

.menu li {
  position: relative;
  width: 15em;
}
.submenu {
  position: absolute;
  /* Side menu. Top menu would set 'left' to 0 and 'top' to 1em */
  top: 0;
  left: 15em;
}

If you need to support hovering in IE6, just include mouseOver/mouseOut event listeners that add/remove a "show" class. The only times CSS menus are insufficient are when you want menu animation or delays.

[vekou]

NN4 is dead, buried and rotted to dirt.

I very much agree. Netscape is obsolete now. I think you've copied your code from a website with a content of almost a decade ago.

You said that the page must be treated equally by all browsers. It's possible, but highly unlikely. They should've given a set of browsers that the content must work. If they're expecting that your page must work on IE3 and Netscape4, you're in a deep s**t. At least make your code working perfectly on browsers made 5 years ago.

[olliepop]

.navbar{
  background-image:url(images/nazimenu.png);
  height:500px;
  width:300px;
}

No hacks needed, and best of all, it works in all browsers

Thank you SO MUCH!!! You saved my entry xD

Thank you everyone else for your input, i will begin fixing the errors.

Also, yes it is a dynamic drive menu and i did follow the instructions perfectly.
The instructions were: copy and paste this code right before </body>.

Rofl.

[saif7463]

You're welcome!

By the way, as mission said, it's bad to use a table without tabular data. In fact, your code will essentially be the same if you remove all of the table stuff (everything between the two comment tags) and just replace it with your div.