Mozilla Tabellenzellen & Inline Elemente

[Daniel Petratsch]

Hallo!

Ich ärgere mich nun schon seit geraumer Zeit mit dem Mozilla herum, indem ich versuche in einer Tabellenzelle 2 <p> nebeneinander darzustellen. Das funktioniert aber nur wenn ich für den <p> Tag ein Inline Element zuweise, ansonsten wird nach jedem Tag ein Zeilenumbruch gemacht.

Das Problem ist aber, dass sobald ich den Tags ein Inline Element zuweise, so werden diese Elemente über die Tabellenzelle hinaus dargestellt insofern die Tabellenzelle kleiner als der von den darin vorkommenden Elementen beanspruchte Platz ist, was natürlich kompletter Unsinn ist.

Wieso macht der Mozilla das so, ist das ein Bug oder ist das vielleicht wieder einer von so vielen unbrauchbaren Standards des W3C ?

freundliche Grüsse,
Daniel

[Orlando]

Hi Daniel,

Ich ärgere mich nun schon seit geraumer Zeit mit dem Mozilla herum, indem ich versuche in einer Tabellenzelle 2 <p> nebeneinander darzustellen. Das funktioniert aber nur wenn ich für den <p> Tag ein Inline Element zuweise, ansonsten wird nach jedem Tag ein Zeilenumbruch gemacht.

http://selfhtml.teamone.de/css/eigenschaften/positionierung.htm#float
 http://www.w3.org/TR/CSS21/visuren.html#propdef-float

und "width:" nicht vergessen.

Das Problem ist aber, dass sobald ich den Tags ein Inline Element zuweise, so werden diese Elemente über die Tabellenzelle hinaus dargestellt insofern die Tabellenzelle kleiner als der von den darin vorkommenden Elementen beanspruchte Platz ist, was natürlich kompletter Unsinn ist.

Kann man sich das online ansehen?

Wieso macht der Mozilla das so, ist das ein Bug oder ist das vielleicht wieder einer von so vielen unbrauchbaren Standards des W3C ?

So unbrauchbar wie die Zeichensetzung.

Grüße,
 Roland

[Daniel Petratsch]

Hi Orlando,

http://selfhtml.teamone.de/css/eigenschaften/positionierung.htm#float
http://www.w3.org/TR/CSS21/visuren.html#propdef-float

und "width:" nicht vergessen.

Werd ich mal probieren, danke :)

Das Problem ist aber, dass sobald ich den Tags ein Inline Element zuweise, so werden diese Elemente über die Tabellenzelle hinaus dargestellt insofern die Tabellenzelle kleiner als der von den darin vorkommenden Elementen beanspruchte Platz ist, was natürlich kompletter Unsinn ist.

Kann man sich das online ansehen?

Ja, kannst du, ist zwar noch nicht ganz funktionsfähig aber es geht:
http://www.buyaustria.at

Wieso macht der Mozilla das so, ist das ein Bug oder ist das vielleicht wieder einer von so vielen unbrauchbaren Standards des W3C ?

So unbrauchbar wie die Zeichensetzung.

Welche Zeichensetzung meinst du denn?

freundliche Grüsse,
Daniel

Grüße,
Roland

[was vergessen]

Hallo nochmal,

Hab dir nur vergessen zu sagen wo das Problem liegt:

Wenn du zb. auf "Bücher->Weiterbildung->Anatomie" auf Detailansicht klickst, so wird bei mir rechts oben wo der Lieferant steht die Schrift über die Tabellenzelle hinaus in eine benachbarte Tabellenzelle "verschoben". Dies ist nicht immer der Fall, sondern nur "zwischendurch".

freundliche Grüsse,
Daniel

Das ist der ganze Jammer, die Dummen sind immer so sicher und die Gescheiten so voller Zweifel.
[Bertrand Russell]

[Orlando]

Hi Daniel,

Wenn du zb. auf "Bücher->Weiterbildung->Anatomie" auf Detailansicht klickst, so wird bei mir rechts oben wo der Lieferant steht die Schrift über die Tabellenzelle hinaus in eine benachbarte Tabellenzelle "verschoben". Dies ist nicht immer der Fall, sondern nur "zwischendurch".

es geht also (siehe </faq/#Q-19>) um

https://ssl15.inode.at/buyaustria.at/html/iframe_main.php?c=55&art=10072&ref=55&det=1 und
 https://ssl15.inode.at/buyaustria.at/html/buyaustria_screen.css

Das Stylesheet scheint mir in Ordnung zu sein, bis auf die Scrollbar-Definitionen ist alles korrekt. Dein Problem liegt vermutlich (auch) hier -- Quelltext gekürzt, da unzumutbar verschachtelt ;-)

<table style="width:100%;">
 <tr>
  <td style="width:75%;" ... >
   <p>...</p>
   <table style="width:100%;">
    <tr>
     <td ... >Anatomie</td>
     <td><p>&rArr;Herkunft: ...</p></td>
    </tr>
    <tr>
     <td style="padding:5px;">Artikelnummer: 10072</td>
     <td><p class="inl blue1 cap1">&rArr;Vertrieb: ... </p></td>
    </tr>
    <tr>

Bis hierher ist das auch OK, aber jetzt definierst du zwei Spalten und weist der ersten eine Breite von 100% der Tabelle zu. Folglich hat die zweite rechts daneben keinen Platz und Mozilla tut sich schwer dabei, mit diesem Code eine ansprechende Darstellung zu rendern. Dass M$IE und Opera trotzdem "korrekt" rendern liegt einfach daran, dass du mit deren Fehlerkorrektur-Routinen mehr Glück gehabt hat. Falsch macht Mozilla strenggenommen nichts...

<td style="padding:5px;width:100%;">Unternehmen Sie ... </td>
    <td style="text-align:right;" colspan="3">

Begrenze die Breite der ersten Spalte und der Fehler könnte verschwinden. Nach nochmaliger Durchsicht des Quelltextes bin ich mir da allerdings nicht mehr so sicher, da dieses Tabellen-Gewusel kaum zu durchschauen ist. Gib allen Tabellen und -zellen einen Rahmen

table {border:1px solid red }
 td { border:1px solid green }

um das Problem einzugrenzen.

Der Validator bemängelt weiters, dass kein Encoding angegeben ist (http://selfhtml.teamone.de/html/kopfdaten/meta.htm#zeichensatz und/oder per HTTP-Header) und dass die "&" in den Verweisen nicht maskiert sind:

http://validator.w3.org/check?uri=https%3A%2F%2Fssl15.inode.at%2Fbuyaustria.at%2Fhtml%2Fiframe_main.php%3Fc%3D55&doctype=(detect+automatically)&charset=iso-8859-1+(Western+Europe)

Richtig wäre "&", siehe auch http://validator.w3.org/docs/errors.html#bad-entity.

Grüße,
 Roland

[Daniel Petratsch]

Hallo Orlando,

Wenn du zb. auf "Bücher->Weiterbildung->Anatomie" auf Detailansicht klickst, so wird bei mir rechts oben wo der Lieferant steht die Schrift über die Tabellenzelle hinaus in eine benachbarte Tabellenzelle "verschoben". Dies ist nicht immer der Fall, sondern nur "zwischendurch".

es geht also (siehe </faq/#Q-19>) um

https://ssl15.inode.at/buyaustria.at/html/iframe_main.php?c=55&art=10072&ref=55&det=1 und
https://ssl15.inode.at/buyaustria.at/html/buyaustria_screen.css

Ja stimmt :)

Das Stylesheet scheint mir in Ordnung zu sein, bis auf die Scrollbar-Definitionen ist alles korrekt. Dein Problem liegt vermutlich (auch) hier -- Quelltext gekürzt, da unzumutbar verschachtelt ;-)

Ja die Scrollbar Definition musste ich einbauen, damit es im IE (den ja 80% der Benutzer haben) auch ansprechend aussieht. Ich habe dies zuerst auch in XHTML gehabt, aber in XHTML hat es bezüglich des I-Frames viele Probleme gegeben (Vertikale Scrollbalken, Farbformatierung)

<table style="width:100%;">
<tr>
  <td style="width:75%;" ... >
   <p>...</p>
   <table style="width:100%;">
    <tr>
     <td ... >Anatomie</td>
     <td><p>&rArr;Herkunft: ...</p></td>
    </tr>
    <tr>
     <td style="padding:5px;">Artikelnummer: 10072</td>
     <td><p class="inl blue1 cap1">&rArr;Vertrieb: ... </p></td>
    </tr>
    <tr>

Bis hierher ist das auch OK, aber jetzt definierst du zwei Spalten und weist der ersten eine Breite von 100% der Tabelle zu. Folglich hat die zweite rechts daneben keinen Platz und Mozilla tut sich schwer dabei, mit diesem Code eine ansprechende Darstellung zu rendern. Dass M$IE und Opera trotzdem "korrekt" rendern liegt einfach daran, dass du mit deren Fehlerkorrektur-Routinen mehr Glück gehabt hat. Falsch macht Mozilla strenggenommen nichts...

Ja schon, aber ich wüsste nicht wie ich das anders definieren sollte. Da sich ja das in der Tabelle liegende Element (in dem Fall wieder eine Tabelle) auf das Elternelement bezieht, so bedeutet ja 100% im Kindelement die gesamten 75% des Elternelementes, oder habe ich da etwas falsch verstanden?

Da ich gerade während des Postens beim ausprobieren bin habe ich festgestellt, dass dies tatsächlich so ist wie du sagst :) Ich kann zwar nicht mehr nachvollziehen wieso ich der Zelle 100% gegeben habe, aber in Anbetracht mehrerer nächtlicher Arbeitseinschübe könnte dies einen triftigen Grund darstellen ;)
Also auf gut Deutsch hat der Mozilla Probleme wenn ich eine Tabelle mit einer gewissen Breite definiere und dann einer Tabellenzelle die gesamten 100% der Breite zuweise (ist ja irgendwie auch logisch). Das kommt aber alles davon, dass ich vorher hauptsächlich nach dem IE programmiert habe, was ein grosser Fehler ist, den ich mittlerweile bereue, da einem die eingebauten Fehlerroutinen Glauben machen, dass der besagte Code funktionsfähig ist.

<td style="padding:5px;width:100%;">Unternehmen Sie ... </td>
    <td style="text-align:right;" colspan="3">

Begrenze die Breite der ersten Spalte und der Fehler könnte verschwinden. Nach nochmaliger Durchsicht des Quelltextes bin ich mir da allerdings nicht mehr so sicher, da dieses Tabellen-Gewusel kaum zu durchschauen ist. Gib allen Tabellen und -zellen einen Rahmen

Habe ich gemacht und......*zapp*  :)

table {border:1px solid red }
td { border:1px solid green }

um das Problem einzugrenzen.

Der Validator bemängelt weiters, dass kein Encoding angegeben ist (http://selfhtml.teamone.de/html/kopfdaten/meta.htm#zeichensatz und/oder per HTTP-Header) und dass die "&" in den Verweisen nicht maskiert sind:

Ja das mit den Entities...
Bezugs des Encodings,ja das habe ich vergessen, danke. Ist mir deswegen nicht aufgefallen, da ich das vorher in XHTML gehabt habe und dann im Frame auf HTML 4.01 "umgestiegen" bin da ja der IE diesen komischen Bug hat,der - sobald etwas vor dem XHTML Doctype steht - in den Quirks Mode schaltet und somit viele CSS Befehle nicht richtig interpretiert werden.

http://validator.w3.org/check?uri=https%3A%2F%2Fssl15.inode.at%2Fbuyaustria.at%2Fhtml%2Fiframe_main.php%3Fc%3D55&doctype=(detect+automatically)&charset=iso-8859-1+(Western+Europe)

Richtig wäre "&", siehe auch http://validator.w3.org/docs/errors.html#bad-entity.

Jedenfalls mal Danke für die Hilfe!

freundliche Grüsse,
Daniel

[Orlando]

Hi Daniel,

Ja die Scrollbar Definition musste ich einbauen, damit es im IE (den ja 80% der Benutzer haben) auch ansprechend aussieht.

Opera und Konqueror färben die Scrollbars übrigens auch (so man das nicht deaktiviert).

[...] Da sich ja das in der Tabelle liegende Element (in dem Fall wieder eine Tabelle) auf das Elternelement bezieht, so bedeutet ja 100% im Kindelement die gesamten 75% des Elternelementes, oder habe ich da etwas falsch verstanden?

Das ist schon korrekt, aber wenn bereits eine Spalte 100% der verfügbaren Breite einnimmt, bleibt für die zweite kein Platz.

Also auf gut Deutsch hat der Mozilla Probleme wenn ich eine Tabelle mit einer gewissen Breite definiere und dann einer Tabellenzelle die gesamten 100% der Breite zuweise (ist ja irgendwie auch logisch).

Strenggenommen sollte jeder Browser damit Probleme haben :-)

Begrenze die Breite der ersten Spalte [...]

Habe ich gemacht und......*zapp*  :)

Schön.

[...] da ich das vorher in XHTML gehabt habe und dann im Frame auf HTML 4.01 "umgestiegen" bin da ja der IE diesen komischen Bug hat,der - sobald etwas vor dem XHTML Doctype steht - in den Quirks Mode schaltet und somit viele CSS Befehle nicht richtig interpretiert werden.

Nur, wenn du die XML-Deklaration in die erste Zeile schreibst, was aber nicht notwendig ist, da du die Seiten ja ohnehin als text/html ausgibst.

http://gutfeldt.ch/matthias/articles/doctypeswitch.html

Grüße,
 Roland