✔ Mozilla und Firefox

Status
Nicht offen für weitere Antworten.
S

sunflower84

Erfahrenes Mitglied
Hallo
Ich habe ein Problem mit der Darstellung meiner Website. Im Großen und Granzen wird alles richtig angezeigt außer mein Header der verrutsch beim Mozilla nach links. Beim IE sitzt er richtig in der Mitte.
Was kann ich daran ändern damit er mir das in beiden Browsern richtig anzeigt?

HTML: 
<table cellSpacing="0" cellPadding="0" width="800"  align="center" border="0" bgcolor="#FFFFFF">
    <tr><img src="header4.jpg" width="800" height="100"  border="0" alt="header"></tr>
    <tr><img src="Streifen5.jpg" width="800" height="20"  border="0" alt="header"></tr>
  </td>
<tr>

Lg
Sunflower84
 
Das stimmt so schon:
HTML: 
<table cellSpacing="0" cellPadding="0" width="800"  align="center" border="0" bgcolor="#FFFFFF">
    <tr><img src="header4.jpg" width="800" height="100"  border="0" alt="header"></tr>
    <tr><img src="Streifen5.jpg" width="800" height="20"  border="0" alt="header"></tr>
Ich will ja nur zwei Zeilen und keine Spalten :)

Hat jemand noch eine andere Idee?

Lg
Sunflower84
 
HTML: 
<table cellspacing="0" cellpadding="0" width="800"  align="center" bgcolor="#FFFFFF">
	<tr><td><img src="header4.jpg" width="800" height="100" alt=""></td></tr>
	<tr><td><img src="Streifen5.jpg" width="800" height="20" alt=""></td></tr>
</table>
 
Klasse das klappt jetzt. Vielen Dank :)
Hab noch ein Problem mit meinem Newsticker. Der wird im Mozilla nämlich ungefähr einen halben zentimeter breiter dargestellt. Weisst du an was das liegen könnte?
Hier ein Teil meines Newstickercodes:
Code: 
<script type="text/javascript">


tNews=new Array();
tNews.push('Test');
tNews.push('Test2');
tNews.push('Test3');
tNews.push('Test4');
tNews.push('Test5');


    //°°°°°°°°°°Laufrichtung(up,down,left,right)
strDir      ='up';

    //°°°°°°°°°°Delimiter zwischen den einzelnen News(nur bei left/right)
strDelimiter=' + + + ';

    //°°°°°°°°°°Interval in ms
intInterval =50;

    //°°°°°°°°°°Stop bei mouseover?true:false
blnStopHover=true;

    //°°°°°°°°°°Falls Leeraum zwischen News...hier Wert erhoehen...minimum:1
intRepeat   =2;

    //°°°°°°°°°°Rahmen
strBorder   ='0px solid #818181';

    //°°°°°°°°°°Breite
intWidth    =130;

    //°°°°°°°°°°Höhe
intHeight   =200;

    //Abstand Rahmen->Inhalt
intPadding  =4;

    //Background-color
strBgc      ='#515151';

    //Text-color
strTxtc     ='#ffffff';

    //Textausrichtung
strAlign    ='center';

    //Schritt pro Durchlauf(px)
intStep=1;

Lg
Sunflower84
 
Das liegt wahrscheinlich an der unterschiedlichen Interpretation des CSS-Box-Modells, wobei der Internet Explorer fälschlicherweise die Polsterung (padding), den Rahmen (border) und den Abstand (margin) von den Höhen- und Breitenangaben abzieht statt sie hinzuzufügen.
 
wenn du den rest vom script (also auch das vor und nach dem javascript) angeben würdest, wärs ganz gut - ich glaube kaum, dass das java-script fehlerhaft ist, sondern eher die breite-Angabe im "Container"-tag deines scripts...

zu oben: du musst, auch wenn du nur eine zeile anzeige willst, die spalten tags mitschreiben, sonst ist dein code nicht (x)html konform, da er den dtd-standard nicht einhält...

also bei einer zeile: <tr><td></td></tr>
 
Hier ist mein kompletter Code:
Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html><head><title>Ticker</title>
	<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1"><!--base href="http://www.test.de/"--><!--base href="http://test.de/"-->

         <link rel="stylesheet" type="text/css" href="10_data/style.css">
<!-- Menue und Sonstiges -->
<style type="text/css">
p	{font-size:80%;
	line-height:40%;
	font-family:Arial,Helvetica,sans-serif;margin-top:0px; margin-bottom:0px;;
	}
ul li {
	position: relative;
	}
li ul {
	position: absolute;
	left: 129px;
	top: 0;
	display: none;
	}
ul li a {
	font-size:80%;
	font-family:Arial;
	display: block;
	text-decoration: none;
	color: #092644;
	background: #e6e6e6;
	padding: 3px;
	border: 1px solid #ccc;
	border-bottom: 0;
	}
b {
	line-height:2500%;
	font-size:80%;
	font-family:Arial;
	display: block;
	text-decoration: none;
	color: #777;
	background: #e6e6e6;
	padding: 5px;
	border: 1px solid #ccc;
	border-bottom: 1px solid #ccc;
	}
ul {
	margin: 0;
	padding: 0;
	list-style: none;
	width: 130px;
	border-bottom: 1px solid #ccc;
	}
li:hover ul { display: block; }

li:hover ul, li.over ul {
	display: block; }

/* Fix IE. Hide from IE Mac \*/
* html ul li { float: left; }
* html ul li a { height: 1%; }
/* End */

</style>

<script language="javascript">

startList = function() {
if (document.all&&document.getElementById) {
navRoot = document.getElementById("nav");
for (i=0; i<navRoot.childNodes.length; i++) {
node = navRoot.childNodes[i];
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" over";
  }
  node.onmouseout=function() {
  this.className=this.className.replace(" over", "");
   }
   }
  }
 }
}
window.onload=startList;
</script>
</head>

<body>

<table cellspacing="0" cellpadding="0" width="800"  align="center" bgcolor="#ffffff">
	<tr><td><img src="header4.jpg" width="800" height="100" alt=""></td></tr>
	<tr><td><img src="Streifen5.jpg" width="800" height="20" alt=""></td></tr>

  <td>
    <!--Menue-->
    <ul id="nav">
        <li><a href="indextest.html">Home</a></li>
        <li><a href="#">About</a>
          <ul>
            <li><a href="#">History</a></li>
            <li><a href="#">Team</a></li>
            <li><a href="#">Offices</a></li>
          </ul>
        </li>
        <li><a href="#">Services</a>
          <ul>
            <li><a href="#">Web Design</a></li>
            <li><a href="#">Internet Marketing</a></li>
            <li><a href="#">Hosting</a></li>
            <li><a href="#">Domain Names</a></li>
            <li><a href="#">Broadband</a></li>
          </ul>
        </li>
        <li><a href="Internetc.html">Internetcafe</a>
          <ul>
            <li><a href="#">Schottland</a></li>
            <li><a href="#">Kopenhagen</a></li>
            <li><a href="#">Wien</a></li>
            <li><a href="#">München</a></li>
          </ul>
        </li>
        <li><a href="#">AV Equipment</a>
          <ul>
            <li><a href="#">Test</a></li>
            <li><a href="#">Test 2</a></li>
            <li><a href="#">Test 3</a></li>
            <li><a href="#">Test 4</a></li>
          </ul>
        </li>
        <li><a href="#">Programmierung</a>
          <ul>
            <li><a href="#">Test</a></li>
            <li><a href="#">Test2</a></li>
          </ul>
        </li>
        <li><a href="#">Database</a>
          <ul>
            <li><a href="#">Test1</a></li>
            <li><a href="#">Test2</a></li>
            <li><a href="#">Test3</a></li>
            <li><a href="#">Test4</a></li>
          </ul>
        </li>
        <li><a href="#">Meetings</a>
          <ul>
            <li><a href="#">Test</a></li>
            <li><a href="#">Test</a></li>
            <li><a href="#">Test</a></li>
            <li><a href="#">Test</a></li>
          </ul>
        </li>
        <li><a href="#">Kontakt</a>
          <ul>
            <li><a href="#">Test</a></li>
          </ul>
        </li>
        <li><a href="#">Impressum</a>
          <ul>
            <li><a href="#">Test2</a></li>
            <li><a href="#">Test3</a></li>
          </ul>
        </li>
      </ul>
  </td></td>


    <br>
      <!--<div align="center">
      <p><font color="#092644"><font size="-1">Willkommen bei edl EDV & Dienstleistungs GmbH</font></font></p><br>
      </div>
   </tr>
</td>-->
  <tr><td>



<script type="text/javascript">
<!--
/* * * * * * * * * * * * * * * * D I E  V A R I A B L E N * * * * * * * * * * * * * * * * * */

    //°°°°°°°°°°Die News

tNews=new Array();
tNews.push('Test');
tNews.push('Test2');
tNews.push('Test3');
tNews.push('Test4');
tNews.push('Test5');


    //°°°°°°°°°°Laufrichtung(up,down,left,right)
strDir      ='up';

    //°°°°°°°°°°Delimiter zwischen den einzelnen News(nur bei left/right)
strDelimiter=' + + + ';

    //°°°°°°°°°°Interval in ms
intInterval =50;

    //°°°°°°°°°°Stop bei mouseover?true:false
blnStopHover=true;

    //°°°°°°°°°°Falls Leeraum zwischen News...hier Wert erhoehen...minimum:1
intRepeat   =2;

    //°°°°°°°°°°Rahmen
strBorder   ='0px solid #818181';

    //°°°°°°°°°°Breite
intWidth    =130;

    //°°°°°°°°°°Höhe
intHeight   =200;

    //Abstand Rahmen->Inhalt
intPadding  =4;

    //Background-color
strBgc      ='#515151';

    //Text-color
strTxtc     ='#ffffff';

    //Textausrichtung
strAlign    ='center';

    //Schritt pro Durchlauf(px)
intStep=1;



/* * * * * * * * * * * * * * * * * * D E R  T I C K E R * * * * * * * * * * * * * * * * * * * * * */

    //IE ab V4?
IE=document.all&&!window.opera;
    //DOM-Browser(ausser IE)
DOM=document.getElementById&&!IE;


//läuft ab IE4 und in DOM-Browsern
if(DOM||IE)
  {
        //Ermitteln, ob Ticker horizontal oder vertikal laufen soll
    blnDir=(strDir=='up'||strDir=='down')?true:false;

        //Bei horizontalem Ticker wird ein nobr-, ansonsten ein div-Tag verwendet
    strNobr=(blnDir)?'div':'nobr';

        //Trennzeichen zwischen den Einzelnen Eintraegen
        //bei horizontalem Ticker gemäss Angabe in Variale strDelimiter
        //Ansonsten Zeilenumbrueche
    strDelimiter=(blnDir)?'<br><br>':strDelimiter;

        //String fuer Textausrichtung bei vertikalem Ticker
    strAlign=(blnDir)?'text-align:'+strAlign+';':'';

        //Variable zum Speichern des Intervals
    var objGo;
        //Variable zum Speichern der Position
    intPos=0;

        //String erzeugen fuer JS-Code, falls Ticker beim mouseover stoppen soll
    strStopHover=(blnStopHover)?'onmouseover="clearInterval(objGo)"onmouseout="objGo=setInterval(\'DM_ticken()\','+intInterval+')"':'';

        //Tickertext zu String zusammenfuegen
    strText=(blnDir)?tNews.join(strDelimiter)+strDelimiter:tNews.join(strDelimiter)+strDelimiter;
    strNews=strText;
    for(i=1;i<intRepeat;++i)
        {
        strNews+=strText;
        }

        //TickerCode zu String zusammenfuegen
    strTicker='<div style="'+strAlign+'overflow:hidden;background-color:'+strBgc+
                    ';border:'+strBorder+';width:'+intWidth+'px;height:'+intHeight+'px;padding:'+intPadding+
                    'px;"><'+strNobr+'><span id="ticker"style="position:relative;color:'+strTxtc+';background-color:'+strBgc+
                    ';"'+strStopHover+'>'+strNews+'</span></'+strNobr+'></div>';

        //TickerCode im Dokument ausgeben
    document.write(strTicker);

        //Funktion, um Ticker ticken zu lassen
    function DM_ticken()
    {
        //Ticker-Objekt je nach Browser ermitteln
    objTicker=(IE)?document.all.ticker:document.getElementById('ticker');

        //Array fuer zu manipulierende Eigenschaften des Tickers je nach Richtung
        //Richtung=new Array(Pixelwert zur Aenderung der Position,Breite/Höhe des Tickers,zu andernder Positionswert);
    arrDir=new Array();
    arrDir['up']    =new Array(-1,objTicker.offsetHeight,'top');
    arrDir['down']  =new Array(1,objTicker.offsetHeight,'top');
    arrDir['left']  =new Array(1,objTicker.offsetWidth,'left');
    arrDir['right'] =new Array(-1,objTicker.offsetWidth,'left');

        //Ermitteln von Breite bzw. Höhe der anzuzeigenden Items
    dblOffset=arrDir[strDir][1]/intRepeat;

        //Neuen Positionswert ermitteln
    switch(strDir)
        {
        case'right':
            intPos=(Math.abs(intPos)>dblOffset)?0:intPos;break;
        case'left':
            intPos=(intPos>0)?-dblOffset:intPos;break;
        case 'up':
            intPos=(Math.abs(intPos)>dblOffset)?0:intPos;break;
        case 'down':
            intPos=(intPos>0)?-dblOffset:intPos;break;
        }
        //Neuen Positionswert zuweisen
    objTicker.style[arrDir[strDir][2]]=intPos;

        //Positionswert hoch/heruntersetzen
    intPos+=intStep*arrDir[strDir][0];
    }
        //Erneut ticken lassen
    objGo=setInterval('DM_ticken()',intInterval);
  }
//-->
</script>

</td>

</tr>



  <td width="800" height="20" bgcolor="#6f6f6f">
  <div align="center">
  <a style="text-decoration: none;" href="Impressum.html"><font size="-1" color="#ffffff">[ Impressum ]&nbsp;</a></font>
  <a style="text-decoration: none;" href="test.html"><font size="-1" color="#ffffff">[ Contact ]</a></font>
  </div>
  </td>
  </table>
</body></html>

Lg
Sunflower84
 
Zuletzt bearbeitet:
Setz mal einen anderen Doctype ein, damit der IE nicht im Quirksmodus läuft und das Boxmodell korrekt interpretiert.
 
Ehrlich gesagt weiss ich nicht was ich da für einen Doctype nehmen kann. Kenn nur noch den mit XHTML. Aber den wo ich benutze ist doch ein Standard, oder?

Lg
Sunflower84
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück