Tabellenformatierung in FF und IE unterschiedlich

ZapBee

ich weiß, etwas OT, aber vielleicht gibts ja ein paar Webmaster hier:
meine Frage
Ich kriege ums Verrecken die Ausgabe im IE nicht richtig hin. Hat einer eine Idee?

Zap

zisoft

Hi Zap,

Deine colspans sind alle um 1 zu hoch.
Nimm' z. B. mal die Spalte "Frühstück", die überdeckt nur 2 Spalten, nämlich die Grafik und den Text, also muss der colspan = 2 sein.

So ist es bei allen anderen Zeilen auch.

Überall den colspan um eins reduzieren, dann passt's beim FF und beim IE, hab's ausprobiert

ZapBee

Zitat von zisoft

Überall den colspan um eins reduzieren, dann passt's beim FF und beim IE, hab's ausprobiert

da hast du recht :daumen:
leider nicht für alle fälle, also muß ich weiter ausholen:
die Baumstruktur ist in einer DB abgelegt, und es bei jedem Klick neu ausgelesen, welche gruppen und merkmale gerade zu sehen sein müssen.
für den gezeigten fall klappt es, aber wenn ich jetzt "Frühstück" zumache, siehts im IE so aus (FF klappt):
<Anhang>
tja, wenns denn so einfach gewesen wäre...
edit:
und noch was "witziges": wenn ich die gleiche Struktur (2.Ebene offen) an anderer Stelle mache, stimmt es: <Anhang2>

Zap

zisoft

In solchen Fällen hilft nur, den ausgegebenen HTML-Quelltext nach Fehlern zu durchsuchen. Hilfreich ist dabei der W3C Online-HTML-Validator. Quelltext lokal speichern und in die Seite uploaden. Der Validator sagt Dir dann sofort, wo z.B. Ending-Tags fehlen usw.

ac-chan

Als erstes ist mir aufgefallen das du keine Tableheader nutzt. Aber das machen anscheint so wie so nur ganz wenige.

Desweiteren würde ich die px durch em Angaben ändern. Auf die weise bezieht es sich unter den verschiedenen Systemen auf das selbe. Denn px wird von linux und Mac völlig anders interpretiert als von M$ Fenster.

Dein Formatirungsfehler kannst du auch umgehen in dem du bei den Bildern die Größe mit angibst(baut sich dann auch schneller auf) und die abständer der Tabelle zu Inhalt auf null setzt. Dann müssen die Bilder aber alle gleichgroß sein.

ZapBee

Leider ist der einzige Fehler dieser

Zitat

Line 1, column 0: no document type declaration; implying "<!DOCTYPE HTML SYSTEM>"

es ist ja auch alles mit der gleichen Schleife erzeugt, mich hauts ja vom hocker, daß es mal richtig ist und mal falsch

Zap

zisoft

Poste noch mal den Code von der falschen Darstellung.

ZapBee

es ist jeweils die gleiche Aufklappebene (2) geöffnet.
Zuerst der mit der fehlerhaften Darstellung:
Anhang 1 + Screenshot 1
Dann ein korrekter (nur ein anderer Ast geöffnet)
Anhang 2 + Screenshot 2

ähnliches passiert auch in anderen Zweigen:
mal ist ebene 1 korrekt, in einem anderen Zweig ist sie falsch
wenn ich jetzt im oberen fall "frühstück" auch noch öffne (also ebene 3), stimmt alles wieder Screenshot 3

Zap

zisoft

Ich habe mal noch etwas damit rumgespielt. Bei mir funktioniert die Darstellung, wenn Du den Zellen, die die Grafik-Buttons enthalten, auch eine Größenangabe gibst (width='14'). Ansonsten bestimmt der Browser die aus seiner Sicht optimale Breite der einzelnen Zellen. Wenn mehr Platz da ist, als benötigt wird, werden die Zellen vom Browser gleichmässig verbreitert.

ZapBee

Zitat von zisoft

Ich habe mal noch etwas damit rumgespielt. Bei mir funktioniert die Darstellung, wenn Du den Zellen, die die Grafik-Buttons enthalten, auch eine Größenangabe gibst (width='14').

das habe ich probiert, zuerst in der php-datei, jetzt steht es in der css drin (td class=navbild). hat beides nicht für alle fälle geklappt, und es machte auch keinen Unterschied, ob es in der php-datei oder in der css steht.

Zap

zisoft

Zitat von ZapBee

td class=navbild

Das ist mir auch noch aufgefallen, setz' den Klassennamen mal in Hochkomma (td class='navbild')

Das Stylesheet habe ich natürlich nicht, aber ich konnte die fehlerhafte Darstellung reproduzieren und mit der zusätzlichen Größenangabe war sie weg. Vielleicht hast Du im Stylesheet ja an der Stelle noch einen Fehler.

ZapBee

Zitat von zisoft

Das ist mir auch noch aufgefallen, setz' den Klassennamen mal in Hochkomma (td class='navbild')
Das Stylesheet habe ich natürlich nicht, aber ich konnte die fehlerhafte Darstellung reproduzieren und mit der zusätzlichen Größenangabe war sie weg. Vielleicht hast Du im Stylesheet ja an der Stelle noch einen Fehler.

ok das werde ich morgen mal testen, bin jetzt nämlich im (zumindest heute) unverdienten feierabend. den ganzen tag an diesem %§&/(§$ rumgefrickelt. Mann, mir stehen diese darstellungsunterschiede bei den browsern bis oberkante unterkiefer

Bin sehr dankbar für die Hilfe :ja:

Zap

ZapBee

Zitat von zisoft

Das ist mir auch noch aufgefallen, setz' den Klassennamen mal in Hochkomma (td class='navbild')

hab ich gemacht. leider kein effekt.

Zitat von zisoft

aber ich konnte die fehlerhafte Darstellung reproduzieren und mit der zusätzlichen Größenangabe war sie weg.

bei mir nicht

Zitat von zisoft

Vielleicht hast Du im Stylesheet ja an der Stelle noch einen Fehler.

Code

td.navbild
{ width:15px }

die browser reagieren auch beide auf eine Änderung, wenn ich z.B. 45px schreibe, gibts einen Riesenabstand.

Zap

zisoft

Dann pack' nochmal ein gutes und ein fehlerhaftes Source-File zusammen mit dem Stylesheet in ein zip und häng's hier rein.

Datenbank-Inhalte in HTML zu verpacken ist mein Tagesgeschäft

ZapBee

Zitat von zisoft

Dann pack' nochmal ein gutes und ein fehlerhaftes Source-File zusammen mit dem Stylesheet in ein zip und häng's hier rein.

also das erste "waehle_merkmal_fehlerhaft" ist im prinzip das von gestern. wenn ich auf "Frühstück" klicke, wird der Baum neu ausgelesen und es entsteht "waehle_merkmal_korrekt". Das zweite fehlerhafte soll zeigen, daß es nicht nur auf der einen ebene zu fehlern kommt. ich habe bisher noch keine regelmäßigkeit erkannt.
die php-datei ist immer die gleiche, es wird alles mit der gleichen while-schleife angezeigt (außer die navigation oben natürlich). das einzige was sich von seite zu seite ändert, ist die mysql-tabelle mit der aktuellen baumstruktur, die ausgegeben werden soll

Zap

zisoft

Nach eingehender Analyse fühle ich mich einmal mehr bestätigt: Der Internet-Explorer ist Müll :mad:

Zunächst mal sind etliche &nbsp - Entitäten nicht mit einem Semikolon abgeschlossen, die Korrektur hat allerdings noch nicht geholfen.

Der IE versucht immer noch, die Zellen selbst in der Breite festzulegen. Abhilfe habe ich nur dadurch erreicht, den Zellen noch ein width='xx%' mitzugeben. Trage das z.B. mal in die Zelle ein, in der "Frühstück" steht, z.B. width='70%', dann hat's bei mir funktioniert.

Sehr hilfreich für solche Analysen ist das Kommandozeilen-Tool tidy.exe, damit kann man den HTML-Text wieder schön mit Einrückungen formatieren.

ZapBee

habe jetzt alles soweit gefixt wie ich konnte und dann aufgegeben. Zum Testen habe ich zu den merkmalen noch ein paar kontrollwerte dazugeschrieben (Baumlevel, Typ usw.). Die jetzt alle wieder rausgenommen, und auf einmal gehts :eek:
ich gebe mich jetzt nicht der illusion hin, daß ich beim bearbeiten zufällig die richtige lösung gefunden hätte. ich glaube vielmehr, es ist durch die aktuelle kombination aus colspan, width und nbsp's ein pseudostabiler zustand entstanden. oder eine ausgabe, die auf meinem Rechner so aussieht, als wäre sie korrekt. harren wir der überraschungen, die da noch kommen mögen *grusel*

Zap

edit: ach verflixt, schon wieder den alten post überschrieben. :hm:
also, nochmal danke für die tipps und Deine Zeit :daumen:

ZapBee

Heureka!
Ich habe den IE überlistet! Olaalaaaa, wir haben einen Za-ap, ooolaalaaaa...
Und zwar baue ich einfach vor der ersten richtigen Ausgabezeile eine Dummy-Zeile der Höhe 0, in die genau so viele 14px-Zellen geschrieben werden, wie gerade Ebenen des Baumes offen sind. Also steht dann in dieser ersten Zeile z.B. sowas:

Code

<tr height='0'><td width='14'></td><td width='14'></td><td width='14'></td></tr>

Damit kann der IE besser umgehen, als wenn er diese kleinen Spalten erst später "sieht", weil sie ja erst weiter unten kommen.
Paaarty Peeeeople!!!! Whomp there it is!!! :rock:

Zap

edit: nee, daran lags auch nicht. ich will ins wochenende! :nein:

wodi666

Zitat von ZapBee

td.navbild
{ width:15px }

Am Ende sollte auch ein Semikolon stehen...
td.navbild
{ widht: 15px; }

Gleitz

Die Diskussion ist jetzt leider total an mir vorüber gegangen.

Hier noch mal ein interessante Link http://www.alistapart.com/articles/zebratables/

Was noch beachtet werden muss, der IE berechnet wie witdh Area falsch und es es ist wichtig, in welchem Mode der IE läuft. Ich finde jetzt leider den link dazu nicht mehr.

Jetzt mitmachen!