Rol: mein "Schieberegler" geht nicht im NN 4.x

Hi,

ich möchte auf einer site so etwas wie einen horizontalen Schieberegler einbauen.

Wenn ich den "Reglerknopf" in eine Tabelle einbaue, geht unter NN 4.x nix mehr, im IE ist alles ok.
Wenn <div>...</div> außerhalb der Tabelle steht, gehts auch im NN, aber dann stimmt die Positionierung natürlich nicht.

Kann mir jemand sagen was ich falsch mache:

hier die url:
http://www.floridee.de/Schieberegler_horizontal_NN2.htm

hier der code:
<html>

<head>
<title>Test</title>
<SCRIPT language=JavaScript type=text/javascript>
<!--
var position;
 function init() {
 NN= document.layers ? true : false;
 IE= document.all ? true : false;

if (NN) document.captureEvents(Event.MOUSEDOWN | Event.MOUSEUP);

document.onmousedown = startDrag;
 document.onmouseup = endDrag;
 }

function startDrag(e) {
 var found = false;

if (NN) {
 // Netscape
  var gefunden = 0;
  var obj = document.slider;
 // Ueberpruefen, wob Schieberegler angeklickt wurde
   if ((e.pageX > obj.left) && (e.pageX < obj.left + obj.clip.width) && (e.pageY > obj.top) && (e.pageY < obj.top + obj.clip.height))  gefunden = true;
   if (gefunden) {
   current = document.slider;
   dx = e.pageX - current.left;

// Event-Capturing
   document.captureEvents(Event.MOUSEMOVE);
   document.onmousemove = drag;
   return false;
  }
 }

if (IE) {
 // MSIE
  var obj = window.event.srcElement;
  if (obj.parentElement.id.indexOf("slider") != -1) {
   current = obj.parentElement.style;
   dx = window.event.clientX - current.pixelLeft;
   document.onmousemove = drag;
   return false;
  }
 }
 // Benutzer hat nicht auf den Schieberegler geklickt
 current = null;
 return false;
 }

function drag(e) {
 // Der Schieberegler wird positioniert und der Regelbereich dabei auf die Höhe
 // der Reglerskala begrenzt (die erfreulicherweise 100 Pixel hoch ist, andernfalls
 // muss hier noch umgerechnet werden):

if (current != null) {
     var max = 217;
     var min = 5;
  if (NN) {
   current.left = e.pageX - dx;
//   if (current.left<min) current.left=min;
//   if (current.left>max) current.left=max;
   var position=current.left;
   }
  if (IE) {
   current.pixelLeft = window.event.clientX - dx;
//   if (current.pixelLeft<min) current.pixelLeft=min;
//   if (current.pixelLeft>max) current.pixelLeft=max;
   var position=current.pixelLeft;
   }

}
 return false;
 }

function endDrag(e) {
 if (NN) document.releaseEvents(Event.MOUSEMOVE);
 document.onmousemove = null;
 current = null;
 return false;
 }
 // -->
 </script>

</head>
<body onload="init()">

<table border="1">
<tr>
<td>
Hallo
</td>

<td width="200">
<div id="slider" name="slider" style="HEIGHT: 0px; LEFT: 1px; POSITION: relative; TOP: 1px">
 <img border="0" src="images/reiterlein/regler2.gif" width="30" height="25">
</div>

</td>
</tr>
</table>

</body>

Danke

Rol