Hallöchen
So, jetzt brauch ich einmal dringend Hilfe. Ich habe eine Seite, welche oben über eine Navigations-Leiste verfügt, welche die Subnavigationspunkte animiert ausfährt. Darunter soll ein Lauftext (später mit Bilder befüllt) laufen. Im Firefox klappt das auch, im Internet Explorer wird das Menu jedoch _hinter_ dem Lauftext eingeblendet.
Ich komm einfach nicht drauf, wiso dass das so ist... Dazu habe ich eine "Testumgebung" mit den nötigen Dateien aufgebaut, hier das Listing:
index.html:
HTML
<html>
<head>
<script type='text/javascript' src='navi.js'></script>
<script type='text/javascript' src='ticker.js'></script>
<link rel='stylesheet' type='text/css' href='style.css' media='screen' />
<body>
<table border='1' width='50%'>
<tr>
<td>Zelle 1</td>
<td>
<ul class='menu' id='menu'>
<li><a class='menulinkselected' href='#' class='menulink'>Startseite</a></li>
<li><a href='#' class='menulink'>Programm</a>
<ul>
<li class='topline'><a class='sub' href='#'>Programm 2009</a>
<ul>
<li class='topline'><a href='#'>Download als PDF</a></li>
</ul>
</li>
<li><a class='sub' href='#'>Programm 2008</a>
<ul>
<li class='topline'><a href='#'>Download als PDF</a></li>
</ul>
</li>
<li><a class='sub' href='#'>Programm 2007</a>
<ul>
<li class='topline'><a href='#'>Download als PDF</a></li>
</ul>
</li>
<li><a class='sub' href='#'>Programm 2006</a>
<ul>
<li class='topline'><a href='#'>Download als PDF</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</td>
<td>Zelle 3</td>
</tr>
<tr>
<td>Zelle 4</td>
<td>
<div id='ticker' style='background-color:#dddddd;'>
<div>
Hier steht ein ganz normaler Ticker Text
</div>
<div>
<a href='http://www.buddyw.de'>Ticker Text 2: jetzt neu auf BuddyW.de ein TICKER für Ihre
Homepage</a>
</div>
</div>
</td>
<td>Zelle 6</td>
</tr>
<tr>
<td>Zelle 7</td>
<td>Zelle 8</td>
<td>Zelle 9</td>
</tr>
<script type='text/javascript'>
// Menu
var menu=new menu.dd('menu');
menu.init('menu','menuhover');
//Ticker
tickerinit(600, 20);
</script>
</body>
</html>
style.css:
HTML
/* Nativation Anfang */
ul.menu
{
list-style:none;
margin:0;
padding:0;
}
ul.menu *
{
margin:0;
padding:0;
}
ul.menu a
{
display:block;
color:#000;
text-decoration:none;
}
ul.menu li
{
position:relative;
float:left;
margin-right:2px;
list-style-type:none;
}
ul.menu ul
{
position:absolute;
top:26px;
left:0;
background:#d1d1d1;
display:none;
opacity:0;
list-style:none;
}
ul.menu ul li
{
position:relative;
border:1px solid #aaa;
border-top:none;
width:148px;
margin:0;
}
ul.menu ul li a
{
display:block;
padding:3px 7px 5px;
background-color:#d1d1d1;
}
ul.menu ul li a:hover
{
background-color:#c5c5c5;
}
ul.menu ul ul
{
left:148px;
top:-1px;
}
ul.menu .menulink
{
border:1px solid #aaa;
padding:5px 7px 7px;
font-weight:bold;
background:url(../pics/header.gif);
width:70px;
}
ul.menu .menulink:hover, ul.menu .menuhover
{
background:url(../pics/header_over.gif);
}
ul.menu .sub
{
background:#d1d1d1 url(../pics/arrow.gif) 136px 8px no-repeat;
}
ul.menu .topline
{
border-top:1px solid #aaa;
}
ul.menu .menulinkselected
{
border:1px solid #aaa;
padding:5px 7px 7px;
font-weight:bold;
background:url(../pics/header.gif);
width:70px;
}
ul.menu .menulinkselected
{
background:url(../pics/header_over.gif);
}
/* Nativation Ende */
/* Ticker Anfang */
#ticker {
border: 0px solid black;
position: relative;
overflow: hidden;
}
#ticker div {
position: absolute;
white-space: nowrap;
}
/* Ticker Ende */navi.js:
Code
var menu=function(){
var t=15,z=50,s=6,a;
function dd(n){this.n=n; this.h=[]; this.c=[]}
dd.prototype.init=function(p,c){
a=c; var w=document.getElementById(p), s=w.getElementsByTagName('ul'), l=s.length, i=0;
for(i;i<l;i++){
var h=s[i].parentNode; this.h[i]=h; this.c[i]=s[i];
h.onmouseover=new Function(this.n+'.st('+i+',true)');
h.onmouseout=new Function(this.n+'.st('+i+')');
}
}
dd.prototype.st=function(x,f){
var c=this.c[x], h=this.h[x], p=h.getElementsByTagName('a')[0];
clearInterval(c.t); c.style.overflow='hidden';
if(f){
p.className+=' '+a;
if(!c.mh){c.style.display='block'; c.style.height=''; c.mh=c.offsetHeight; c.style.height=0}
if(c.mh==c.offsetHeight){c.style.overflow='visible'}
else{c.style.zIndex=z; z++; c.t=setInterval(function(){sl(c,1)},t)}
}else{p.className=p.className.replace(a,''); c.t=setInterval(function(){sl(c,-1)},t)}
}
function sl(c,f){
var h=c.offsetHeight;
if((h<=0&&f!=1)||(h>=c.mh&&f==1)){
if(f==1){c.style.filter=''; c.style.opacity=1; c.style.overflow='visible'}
clearInterval(c.t); return
}
var d=(f==1)?Math.ceil((c.mh-h)/s):Math.ceil(h/s), o=h/c.mh;
c.style.opacity=o; c.style.filter='alpha(opacity='+(o*100)+')';
c.style.height=h+(d*f)+'px'
}
return{dd:dd}
}();ticker.js:.
Code
function tickerinit(tickerwidth, tickerheight) {
if (document.getElementById) {
tck = document.getElementById("ticker");
tck.style.width = tickerwidth + "px";
tck.style.height = tickerheight + "px";
if (tck.getElementsByTagName("div").length > 0) {
actual = 0;
step = 2;
speed = 15;
delay = 2000;
news = new Array();
for (i = 0; i < tck.getElementsByTagName("div").length; i++) {
news[i] = tck.getElementsByTagName("div")[i];
news[i].style.left = tickerwidth + "px";
}
actual = Math.floor(Math.random() * news.length);
rollNews();
addEvent(tck, "mouseover", stopNews);
addEvent(tck, "mouseout", rollNews);
}
}
}
function rollNews() {
news[actual].style.left = parseInt(news[actual].style.left) - step + "px";
if (parseInt(news[actual].style.left) == ((tck.offsetWidth % step)+8)){
tick = setTimeout("rollNews()",delay);
}
else {
if (parseInt(news[actual].style.left) <= 0-news[actual].offsetWidth) {
actual++;
if (actual == news.length) {actual = 0;}
news[actual].style.left = tck.offsetWidth + "px";
}
tick = setTimeout("rollNews()",speed);
}
}
function stopNews() {
clearTimeout(tick);
}
function addEvent(obj, evType, fn){
if (obj.addEventListener){
obj.addEventListener(evType, fn, true);
return true;
} else if (obj.attachEvent){
var r = obj.attachEvent("on"+evType, fn);
return r;
} else {
return false;
}
}
)