Marquee-Ersatz wird falsch angezeigt

K

KuLiSN

Grünschnabel
Hallo zusammen,

ich hatte hier um Forum den JS Marquee Ersatz gefunden
http://www.tutorials.de/forum/javascript-ajax/286322-gibt-es-eine-marquee-ersatz.html
und hatte mich für den 2. entschieden http://www.doktormolle.de/temp/ticker2.htm

Nun hab ich das Problem das dieser nicht richtig angezeigt wird in FF und IE6/7, Opera und Safari machen es so wie es soll.

Ich hoffe ihr könnt mir helfen das die Verschiebung im FF und IE sich auflöst und es in jedem Browser gleich aussieht.

Ich kann euch leider keinen Link zur seite geben da sie unter htaccess Schutz steht und mein Kunde es nicht möchte das andere momentan Zugriff darauf haben. Um es zu verdeutlichen welches Problem ich habe, habe ich ein paar Screenshots gemacht.

Firefox
IE6
IE7
Safari
Opera

Diverse Sachen wie margin-top: 10px; hab ich probiert und würde klappen nur ist denn alles im Safari und Opera verschoben und top: -20px; lässt den Text hinter dem CSS-Hintergrund verschwinden.

Hoffe jemand kann mir hier helfen.
 
Zunächst checken ob der Code valide ist. Das haut schonmal die meisten Probleme raus.
Dann per Firebug im FF mal den Code genauer unter die Lupe nehmen, respektive IE Developer Toolbar für den IE.

Habe hier leider nur den IE6, kann von daher nicht groß helfen, sry
 
Hi,

um hier einen sachdienlichen Hinweis geben zu können, solltest du anstelle der Browser-Screenshots deine Fassung des Quellcodes zeigen, denn im Original-Script tauchen in den genannten Browsern keine deratigen Probleme auf.

mfg Maik
 
So der Clientseitige Code

HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD  XHTML 1.0 Strict//EN"  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
        <head>
<base href="http://hb-line.de/hb-line/14-18/" />        
                <title>HB-Line - Hair &amp; Beauty Line</title>
                <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
                <link rel="stylesheet" type="text/css" href="./style.css" />
<!--[if lt IE 8]>
<script src="http://ie7-js.googlecode.com/svn/version/2.0(beta3)/IE8.js" type="text/javascript"></script>
<![endif]-->

        </head>
        <body>
                <div id="wrapper">
                
                        <div id="head">
                                <div id="telefon">Telefon <br/> Fax</div>
                        </div>
                        <div id="under_head">
                                <div id="under_head_arrow"></div>
                                <div id="under_head_info"><a href="./info/index.html">Friseur Info</a></div>

                                <div id="under_head_suche"><a href="./suche/index.html">Eintragssuche</a></div>
                        </div>
                        <div id="bilder"></div>
                        <div id="dynamicbar">
                                                <script type="text/javascript">
                                tNews=new Array();
                                tNews.push('Hier könnte Ihr Text stehen. Willkommen auf B-Line. Hier können Sie sich informieren zu einem Friseur oder Kosmetiker in Ihrer nähe.');
                                </script>
                                <script type="text/javascript" src="./inc/js/ticker.js">
                                </script>
                        
                        </div>

                        <div id="content">
                                <div id="menu">
                                        <div id="button_1" class="menu_font"><a href="./home/index.html">Home</a></div>
                                        <div id="button_2" class="menu_font"><a href="./kontakt/index.html">Kontakt</a></div>
                                        <div id="button_3" class="menu_font"><a href="./info/index.html">Info</a></div>
                                        <div id="button_4" class="menu_font"><a href="./impressum/index.html">Inpressum</a></div>
                                        <div class="box_left">

                                                <div class="box_left_head"></div>
                                                <div class="box_left_inhalt"></div>
                                        </div>
                                        <div id="werbung_links">
                                        </div>
                                
                                </div>
                                <div id="middle">
                                        <div id="content_head"><img src="./image/hb-line_25.jpg" alt="" /></div>

                                        <div id="content_news">

                                        </div>
                                        <div id="content_footer">
                                                Telefon. <br/>
                                                Fax. <br/>
                                                Mail. <br/>

                                        </div>
                                
                                </div>
                                <div id="sidebar">
                                        <div class="box_right">
                                                <div class="box_right_head"></div>
                                                <div class="box_right_inhalt"></div>
                                        </div>
                                        <div id="werbung_rechts">


                                        </div>
                                </div>
                        </div>
                </div>
                <div class="clear"></div>
                <div id="footer"></div>
        </body>
</html>

Der JS Code

Code: 
//tNews=new Array();

//tNews.push('TEXT');
//tNews.push('TEXT');
//tNews.push('TEXT');
//°°°°°°°°°°Delimiter zwischen den einzelnen News
tDelimiter  ='';
//°°°°°°°°°°Interval in ms
tInterval   =10;
//°°°°°°°°°°Stop bei mouseover?true:false
tStop       =true;
//°°°°°°°°°°Falls Leeraum zwischen News...hier Wert erhoehen...minimum:1
tRepeat     =15;
//°°°°°°°°°°Rahmen
tBorder     ='0px solid black';
//°°°°°°°°°°Breite
tWidth      =770;
//°°°°°°°°°°Höhe
tHeight     =20;
//Abstand Rahmen->Inhalt (top+bottom)
tPadding    =0;
//Das Aussehen per CSS anpassbar unter Verwendung des Selectors #ticker
IE  = document.all&&!window.opera;
DOM = document.getElementById&&!IE;
if(DOM||IE)
    {
    var tGo,
        tPos  = 0,
        tStop = tStop?'onmouseover="clearInterval(tGo)"'+ 'onmouseout="tGo=setInterval(\'DM_ticken()\','+tInterval+')"':'',
        tTxt  = tDelimiter+tNews.join(tDelimiter),
        tNews = tTxt;
        
        for(i = 1; i < tRepeat; ++i)
          {
            tNews+=tTxt;
          }
          
        document.write('<div style="overflow:hidden;border:' + tBorder +
                       ';width:' + tWidth + 'px;height:' + tHeight + 'px;' +
                       'padding:' + tPadding + 'px 0px ' + tPadding + 'px 0px;">' +
                       '<div style="position:absolute;left:12px;width:' + tWidth + 'px;height:' + tHeight + 'px;'+
                       'overflow:hidden;clip:rect(0px '+tWidth+'px '+tHeight+'px 0px)">'+
                       '<span id="ticker"style="white-space:nowrap;position:relative;"' + tStop + '>' + tNews + 
                       '</span></div></div>');
        
        tObj = IE ? document.all.ticker : document.getElementById('ticker');
    
    function DM_ticken()
      {
        tOffset = tObj.offsetWidth/tRepeat;
        if(Math.abs(tPos) > tOffset)
          {
            tPos=0;
          }
        tObj.style.left=tPos+'px';
        tPos=parseInt(tPos)-1;
      }
    
    tGo=setInterval('DM_ticken()',tInterval);
    }

Web-Developer im FF gibt keine Validitätsfehler zurück und Firebug sag auch das es alles io ist.

Das Problem hatte ich Lokal unter Xampp nicht nur als ich es beim Hoster (one.com) hochgeladen hatte.
 
Die Unterschiede beim Hoster sind meistens so Sachen wie Kodierung, also er sendet evtl. UFT8 und du willlst ISO
Das solltest einmal prüfen
 
Wenn es ein Kodierungsfehler wäre würden doch diese krillischen Zeichen sein oder nicht und würde es dann nicht in jedem Browser falsch dargestellt werden?
 
KuLiSN hat gesagt.:
Das Problem hatte ich Lokal unter Xampp nicht nur als ich es beim Hoster (one.com) hochgeladen hatte.
Zum Vergrößern anklicken....
Dann nenn uns mal den Link zu deiner Seite bei deinem Webhoster, denn im "Blindflug" wird hier niemand etwas zu den möglichen Ursachen sagen können, es sei denn, er besitzt hellseherische Kräfte.

mfg Maik
 
Ich würde mal das doppelt vorhandene Ticker-Script entfernen:

Code: 
<div id="dynamicbar">
                                                <script type="text/javascript">
                                tNews=new Array();
                                tNews.push('Hier könnte Ihr Text stehen. Willkommen auf B-Line. Hier können Sie sich informieren zu einem Friseur oder Kosmetiker in Ihrer nähe.');
                                </script>
                                <script type="text/javascript" src="./inc/js/ticker.js">
                                </script>
                        
                        </div>
mfg Maik
 
Dort ist nichts doppelt

HTML: 
<div id="dynamicbar">
                                                <script type="text/javascript">
                                tNews=new Array();
                                tNews.push('Hier könnte Ihr Text stehen. Willkommen auf B-Line. Hier können Sie sich informieren zu einem Friseur oder Kosmetiker in Ihrer nähe.');
                                </script>
                                <script type="text/javascript" src="./inc/js/ticker.js">
                                </script>
                        
                        </div>

HTML: 
 <script type="text/javascript">
tNews=new Array();
tNews.push('Hier könnte Ihr Text stehen. Willkommen auf B-Line. Hier können Sie sich informieren zu einem Friseur oder Kosmetiker in Ihrer nähe.');
</script>

Hier wird der Script begonnen und danach wurde er nur in einer Datei ausgelagert so wie es dort beschrieben wurde auf der Seite wo ich es her habe.
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück