Layout-Probleme mit unterschiedlichen Browser

Computer: Software & Programmierung HTML & CSS
#1

Hallo zusammen,

ich bin gerade dabei mir meinen schmalen html-Kenntnissen an einer Homepage rum zu spielen. Ich war auch soweit zufrieden, bis ich es mit einem anderen Browser angeschaut habe.

Zunächst meine Ausgaben…

Unter Google Chrome sieht es perfekt so aus, wie ich es gerne hätte:

http://meteo-mabe.de/chrome.jpg

Nun das ganze unter Mozilla:

http://meteo-mabe.de/mozilla.jpg

Die Tabelle auf der linken Seite passt nun gar nicht mehr so schön…desweiteren werden komischerweise irgendwelche Leerzeilen eingefügt (oberhalb Platz 1 und unterhalb Platz 3). Ich kann mir einfach nicht erklären warum das so ist.

Und nun noch unter IE:

http://meteo-mabe.de/ie.jpg

Hier kommt noch hinzu, dass der Rahmen nicht richtig passt beim Bild rechts und außerdem die Überschrift nicht small ist.

Und nun noch mein Code von diesem Abschnitt…mmh ich bekomm den hier nicht sauber hin…also hab ich den Teil mal upgeloaded:

http://meteo-mabe.de/Code.txt

Aus praktikablen Gründen hab ich hier mal nur die Wertung für Berlin…die anderen Städte sind genauso programmiert…wäre aber zu langer Code jetzt.

Die Werte, die in der linken Tabelle stehen, werden also aus einer Datei heraus gelesen.

Zusammengefasst: Mein Problem ist, dass das Layout, wie oben beschrieben, nicht in allen Browsern gleich ausschaut. Unter Google-Chrome ist es genauso, wie ich es mir wünsche. In den anderen aber leider nicht :frowning:

Hier mal noch die Internet-Adresse zum selbst gucken: http://www.wetterturnier.de/index_en.php?stadt=b

Ich hoffe mir kann jmd sagen, wo das Problem liegt und mir einen Lösungsvorschlag anbieten.

Ich bedanke mich vielmals
Mfg
Marcus

#2

Hallo,
ich befürchte es ist schwierig dir da jetzt direkt zu helfen. Möglicherweise würde es helfen, wenn du mal die CSS-Definitionen postest, damit man sich unter der Klasse „content“ etwas mehr vorstellen kann. Diese Klasse scheint ja der Grund für die Darstellung der einzelnen Wertungen zu sein und somit vermutlich auch der Verursacher.

Was mir allerdings direkt aufgefallen ist, ist die falsche Verschachtelung der Tags an der Stelle mit den Wertungen.
Das wird wohl z.B. das Problem sein, dass das „small“ in manchen Browsern gar nicht „small“ dargestellt wird, da diese wohl nicht ganz so schmerzfrei auf falsche Verschachtelung reagieren wie andere. :wink:

Hier mal die Stelle um die es mir geht:

<small><br><?PHP $file_name=file("wertungen/uebersicht_b.php");<br />for ($i=0;$i<count></count> {<br> $file2_name=explode(" ",$file_name[$i]); <br> if ($file2_name[0]=="Wertung" and $file2_name[1]=="der")<br> {<br> if ($timediff &lt; "86400")<br> {<br> echo $file_name[$i+3]."<br>";<br> }<br> elseif ($timediff &gt; "86400" and $timediff ";<br> echo rtrim($file_name[$i+8])."<br>";<br> echo rtrim($file_name[$i+9]);<br> }<br> else<br> {<br> echo rtrim($file_name[$i+4])."<br>";<br> echo rtrim($file_name[$i+5])."<br>";<br> echo rtrim($file_name[$i+6]);<br> }<br> }<br>}<br>?&gt;<br></small>

das problem hierbei ist z.B. das: "

<small></small>

"

Gruß

#3

Hallo MaBe,

habe leider keine Zeit genauer nachzusehen, aber mal kurz und global:

Ganz wichtig ->In deiner Datei fehlt ein Doctype, siehe auch:

http://de.selfhtml.org/html/allgemein/grundgeruest.h…

Der erste Blick auf dein Quelltext besagt, dass du nur den Doctype HTML-Transitional verwenden kannst.

Auch ganz wichtig: ALLES was DU nicht festlegst (Abstände, Größen…), interpretiert der Browser mit eigenen Standards, die ja bekanntlich verschieden sind, so entstehen Diskrepanzen in der Anzeige. Dass Google Chrome das so anzeigt, wie es dir gefällt, ist in dem Fall einfach Glücksache.
Auch zu festgelegten Abständen und Größen haben Browser nicht immer gleiche Auffassung.
Hier würde ich dir empfehlen, dass du dich mit CSS beschäftigst.
Erste Anlaufstelle wäre: http://www.css4you.de

Zur Überprüfung der Richtigkeit deiner Seite, solltest du zwischendrin immer wieder validieren, so kannst du einige Fehler vermeiden und/oder ausmerzen:

http://validator.w3.org/

Gruß
Maja

#4

Hallo,

danke für deine Antwort…ich poste mal den Kopf der index.php Datei:

 .:: wetterturnier.de ::.\<!--
function MM\_preloadImages() { //v3.0
 var d=document; if(d.images){ if(!d.MM\_p) d.MM\_p=new Array();
 var i,j=d.MM\_p.length,a=MM\_preloadImages.arguments; for(i=0; i\<a.length; i++)
 if (a[i].indexOf("#")!=0){ d.MM\_p[j]=new Image; d.MM\_p[j++].src=a[i];}}
}
function MM\_swapImgRestore() { //v3.0
 var i,x,a=document.MM\_sr; for(i=0;a&&i\<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM\_findObj(n, d) { //v4.0
 var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))\>0&&parent.frames.length) {
 d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
 if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i\<d.forms.length;i++) x=d.forms[i][n];
 for(i=0;!x&&d.layers&&i\<d.layers.length;i++) x=MM\_findObj(n,d.layers[i].document);
 if(!x && document.getElementById) x=document.getElementById(n); return x;
}
function MM\_swapImage() { //v3.0
 var i,j=0,x,a=MM\_swapImage.arguments; document.MM\_sr=new Array; for(i=0;i\<(a.length-2);i+=3)
 if ((x=MM\_findObj(a[i]))!=null){document.MM\_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
// --\> 

var weatherStack1 = new makeArray ("/img/shuffle/200605II.JPG", 
"/img/shuffle/PICT9658.JPG", "/img/shuffle/110504V.JPG", 
"/img/shuffle/PICT5200.JPG", "/img/shuffle/PICT9127.JPG", 
"/img/shuffle/PICT4674.JPG", "/img/shuffle/2.JPG", 
"/img/shuffle/230504VI.JPG", "/img/shuffle/PICT8431.JPG", 
"/img/shuffle/9.JPG", "/img/shuffle/220803.JPG", 
"/img/shuffle/PICT5158.JPG", "/img/shuffle/7.JPG", 
"/img/shuffle/10.JPG", "/img/shuffle/230604VI.JPG", 
"/img/shuffle/PICT8646I.JPG", "/img/shuffle/030704III.JPG", 
"/img/shuffle/PICT4941.JPG", "/img/shuffle/030504I.JPG", 
"/img/shuffle/3.JPG", "/img/shuffle/PICT4871.JPG", 
"/img/shuffle/PICT5232.JPG", "/img/shuffle/PICT4881.JPG", 
"/img/shuffle/5.JPG", "/img/shuffle/PICT4678.JPG", 
"/img/shuffle/PICT5296.JPG", "/img/shuffle/4.JPG", 
"/img/shuffle/6.JPG", "/img/shuffle/8.JPG", 
"/img/shuffle/PICT5270.JPG", "/img/shuffle/PICT8788.JPG", 
"/img/shuffle/Halo.JPG", "/img/shuffle/100704VI.JPG", 
"/img/shuffle/1.JPG");
 
var weatherVar = 1;
 
 
function makeArray() {
 this.length = makeArray.arguments.length
 for (var i = 0; i \< this.length; i++) this[i+1] = makeArray.arguments[i]
}
 
function weatherChanger() {
 document.imageweatherchanger1.src = weatherStack1[weatherVar];
 weatherVar += 1;
 if (weatherVar == weatherStack1.length) weatherVar = 1;
 setTimeout("weatherChanger()", 15000);
}
 
 


.......

Ansonsten schonmal vielen Dank für den Hinweis der Schachtelung.

Viele Grüße
Marcus

#5

Die Datei…
hier noch die css-Datei: http://www.wetterturnier.de/css/master.css

Grüße
Marcus

#6

Hallo,

danke für deine Antwort…ich dachte, die Definitionen wären alle in der css Datei… mit der muss ich mich nochmal richtig auseinander setzen…da kenn ich mich noch nicht aus…aber ich denke das wird der Schlüssel zur Lösung sein. Muss ich dann trotzdem noch den Doctype festlegen?

Grüße
Marcus

#7

Anmerkung…
…ich hab jetzt mal die Dokumententyp-Deklaration eingebaut… nun hab ich die Abstände auch bei Chrome :expressionless: Außerdem ist bei Mozilla nun noch ne zusätzliche Leerzeile oberhalb von Platz 1 zu finden … also quasi jetzt 2 Leerzeilen oben und eine drunter :expressionless:

Grüße
und Danke
Marcus

#8

Also, bei einem genaueren Betrachten habe ich ein paar Einfälle gehabt.

Bzgl. Abständen solltest du dir Gedanken über die verwendeten Attribute cellpadding und cellspacing in deiner Siegertabelle machen.
Hier wird unabhänig vom Stylesheet schonmal ein Platz zwischen den Tabellenelementen gelassen.

Dann habe ich mir überlegt, ob es nicht vllt sinnvoller wäre, das „pre“ tag bei der Ausgabe der Sieger in der Tabelle zu vermeiden.
Ich befürchte, dass dadurch dieser riesige Abstand ensteht. Allerdings müsstest du dann den Textdatei-Inhalt vor dem Anzeigen auf der Website nochmal überarbeiten, damit alle Whitespaces auch wirklich übernommen werden im Browser(dieser kürzt ohne pre tag grundsätzlich alle whitespaces bis auf 1 heraus).

Also könntest du den String aus der mittels php eingelesenen Datei in der Form umschreiben, dass du alle " " in " " umwandelst, dann wird ein Leerzeichen aus der Textdatei auch als Leerzeichen in deiner Tabelle ausgegeben.

Soweit meine Idee, vielleicht hilft es dir ein wenig.

#9

Ich meinte natürlich nicht von " " zu " " umwandeln sondern von " " zu " &_n_b_s_p_; " ^^ (ohne die Unterstriche… aber anders kann man es hier im Forum nicht darstellen wie ich gerade feststellen musste)

Allerdings habe ich eine noch einfacher Lösung gerade gefunden:

in deiner master css datei musst du einfach folgendes ergänzen:

td.content pre {
 margin:0;
}

dies entfernt den Platz oberhalb und unterhalb der textdaten.
Die 2. Zeile oberhalb der Daten entsteht dadurch, dass du das pre tag verwendet und dann einen Zeilenumbruch machst bevor du per php die Daten ausgibst. Lösche diesen Zeilenumbruch raus nach dem pre tag in der tabelle, dann ist auch diese leerzeile verschwunden.

:wink:
Gruß

#10

Hallo,

schoneinmal vielen Dank…ich werde es mir mal anschauen. Hab nur gerade keine Zeit. Ich melde mich wieder, falls es noch Probleme gibt.

Danke
Marcus

#11

Hallo Marcus,

Doctype ist eigentlich Pflicht, sonst bist du jedem Browser ausgeliefert (siehe Quirks-Modus).

Ehrlich, deine Seite hat einige Fehler :frowning:, hast du versucht zu validieren?

CSS-Datei: die style-Tags solltest du raus löschen (da kommen nur CSS-Anweisungen rein, ohne die HTML-Tags

So etwas wie rightmargin im body gibt es zB nicht. Zudem hast du ja bereits in CSS margin auf Null.

Warum du in CSS für body ein padding von 5px hast, erschließt sich mir auch nicht?

…ich hab jetzt mal die Dokumententyp-Deklaration eingebaut…
nun hab ich die Abstände auch bei Chrome :expressionless: Außerdem ist bei
Mozilla nun noch ne zusätzliche Leerzeile oberhalb von Platz 1
zu finden … also quasi jetzt 2 Leerzeilen oben und eine
drunter :expressionless:

Wenn du keine Abstände haben möchtest, versuche mal für pre-Tag margin auf Null zu setzen -> pre {margin:0; }, oder eben so, wie dir Lucidus vorgeschlagen hat.
Wobei ich nicht ganz verstehe, wieso du pre-Tag überhaupt eingesetzt hast? Nun gut…
Zudem hast du in der CSS eine Klasse pre.listing, die aber in HTML nicht eingesetzt, statt dessen schreibst du nochmal extra bgcolor=navy in HTML, obwohl das in der CSS-Klasse schon drin steht. Hmhm…

So rede ich hier vor mir her und weiß noch nicht mal ob du weißt wovon ich rede :wink:

Gruß
Maja

#12

Hallo Maja…

… danke sehr. Klar kann ich dir folgen. Das Problem ist einfach, ich habe die Seite nicht selbst programmiert…ich wollte dort einfach nur die Startseite neu machen…ich muss das mal alles in Ruhe anschauen.

Mit euren Hinweisen komm ich da bestimmt weiter. Sonst meld ich mich nochmal.

Die pre-Tags sind übrigens gemacht, damit es 1 zu 1 aus der Datei ausgelesen wird…sonst würde das alles zusammengeschoben, ohne Leerzeichen.

Grüße
und Danke
Marcus