• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Internet-Explorer: In den Vordergrund

F

Flubber

Neues Mitglied
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&uuml;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;
  }
}

Zum angucken:

http://test.suricates.ch/forum/

Firefox: Funktioniert
IE7: Menu überlagert sicht mit Ticker


Gruss
 
Zuletzt bearbeitet von einem Moderator:
Das wird trotzdem im IE7 nicht klappen.

IE 6- 8 fallen wegen dem fehlenden Doctype in den Quirksmodus.
Im IE 8 würde es mit dem richtigen Doctype funktionieren.
Für IE6-7 müsstest du das position: relative in #ticker rausnehmen.
 
Zuletzt bearbeitet:
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben