Firefox stellt display:table falsch dar

[paco]

Hallo,
ich habe gerade eine Tabelle mit divs und css erstellt, die ausnahmsweise mal im IE8 richtig dargestellt wird aber dafür im Firefox 3.6 nicht :-(

Der Aufbau ist folgender

<div id="tabelle" class="table">
<div class="table_row">
  <div class="table_cell">1</div>
  <div class="table_cell">2</div>
  <div class="table_cell">3</div>
  <div class="table_cell">4</div>
</div>
<div class="table_row">
          <input type="text" value="" name="text_1" class="table_cell"/>
          <input type="text" value="" name="text_2" class="table_cell"/>
          <input type="text" value="" name="text_3" class="table_cell"/>
          <input type="text" value="" name="text_4" class="table_cell"/>
</div>
      </div>

mit entsprechender css (.table{ display: table}; .table_row{ display: table-row}; ...)

Im IE8 sieht alles so aus wie es soll, Tabellenzellen in den jeweiligen Reihen übereinander.
+    1    +    2    +    3    +    4    +
+  text1  +  text2  +  text3  +  text4  +

Im Firefox aber so

+    1                                  +  2  +  3  +  4  +
+  text1  +  text2  +  text3  +  text4  +

Der Code ist wirklich simpel, ich habe keine Ahnung wo ich da ansetzen soll, eigentlich sollte der FF das display: table doch seit Version 2 unterstützen, oder?

Wenn irgendjemand eine Idee hat, wäre ich sehr dankbar!

Liebe Grüße
Paco

[suit]

ich habe gerade eine Tabelle mit divs und css erstellt [...]

Warum zur Hölle tust du das? Proof of Concept oder praktischer Nutzen?

[paco]

Warum zur Hölle tust du das? Proof of Concept oder praktischer Nutzen?

Beides, schätze ich. Ist ein Formular und ich habe ein JavaScript das mir onclick eine neue Tabellenzeile hinzufügt.

Ginge sicher auch alles mit ner normalen Tabelle, aber warum kann der FF das nicht? Was spricht denn dagegen das so zu lösen (außer das es offensichtlich Darstellungsprobleme gibt)? Ist so ein MIttelding aus Layout und Taellenstruktur, daher dachte ich, ich machs jetzt mal besonders schön..

lg,
Paco

[suit]

Warum zur Hölle tust du das? Proof of Concept oder praktischer Nutzen?
Beides, schätze ich. Ist ein Formular und ich habe ein JavaScript das mir onclick eine neue Tabellenzeile hinzufügt.

Und das geht mit Tabellen nicht?

Ginge sicher auch alles mit ner normalen Tabelle, aber warum kann der FF das nicht?

Ich hab' mir die Sache nicht näher angesehen weil sie mir Absurd erscheint. Ich gehe aber davon aus, dass du irgend eine Eigenschaft vergessen hast oder es sich um einen Bug handelt.

Was spricht denn dagegen das so zu lösen (außer das es offensichtlich Darstellungsprobleme gibt)?

Die Semantik: wenn es eine Tabelle ist, nimm Tabellen - wenn es keine Tabelle ist, nimm keine Tabellen.

Ist so ein MIttelding aus Layout und Taellenstruktur, daher dachte ich, ich machs jetzt mal besonders schön..

Es scheint ein Formular zur Eingabe von Datensätzen zu sein - was genau soll da an einer Tabelle falsch sein? "Schön" ist in diesem Fall eher Unsinnig, einerseits logisch/semantisch und andererseits ist der Aufwand dafür auch enorm.

[paco]

Es scheint ein Formular zur Eingabe von Datensätzen zu sein - was genau soll da an einer Tabelle falsch sein? "Schön" ist in diesem Fall eher Unsinnig, einerseits logisch/semantisch und andererseits ist der Aufwand dafür auch enorm.

Naja, viel größer als bei ner normalen Tabelle ist der Aufwand nicht.
<div class="table_row">blabla</div> statt <tr>blabla</tr>

Oder was hat das noch für Nachteile? Ich dachte ich bin da eher freier in der Gestaltung.

Aber bevor ich jetzt endlos rumsuche worans liegt werd ichs wohl doch umschreiben..

Vielen Dank Suit!

Bis päter ;-)

[suit]

Naja, viel größer als bei ner normalen Tabelle ist der Aufwand nicht.
<div class="table_row">blabla</div> statt <tr>blabla</tr>

Die Formatierung erledigt sich von allein?

Der Quelltext wird unnötig aufgebläht?

Oder was hat das noch für Nachteile? Ich dachte ich bin da eher freier in der Gestaltung.

Die Gestaltung hat nichts mit der Struktur der Daten zu tun - du gewinnst durch diese Struktur nichts, außer dass du Semantik verlierst.

Zudem verlierst du Sinnhaftigkeit - durch die Klassen table_row usw. bindest du die Darstellung an den HTML-Code. Das ist mindestens genauso schlimm wie die Klasse "red" anstatt "warning" oder "litte_green_right_arrow.png" anstatt "list-item.png" oder "li.png"

[ChrisB]

Hi,

Ich dachte ich bin da eher freier in der Gestaltung.

In wie fern?

Du lässt es explizit als Tabelle *darstellen* - also hast du damit genau die gleichen Vor- und Nachteile, die du unter Gestaltungs-Gesichtspunkten auch unter Verwendung einer „echten“ Tabelle hättest.

MfG ChrisB

[MudGuard]

Hi,

Oder was hat das noch für Nachteile?

Screenreader könnten bei table/tr/th/td besser verstehen was gemeint ist als bei div/div/div/div

cu,
Andreas

[Havyrl]

Der einzige Sinn, der sich mir aus dieser Vorgehensweise ergibt, bei dir nicht gegeben. Da du die Struktur bereits im HTML vorgibst.

Wenn du es nur im CSS machen würdest, dann könnte man ja noch sagen du willst die Möglichkeit haben, das Layout schnell mal von einer Tabelle zu einem anderen Konstrukt um zubauen.

Aber so wie du es aufbaust, kannst du auch gleich eine echte Tabelle nehmen.

[Encoder]

Mal unabhängig von Sinn oder Unsinn, um das nachzuvollziehen fehlt noch der Style von table_cell.

[Beat]

Der Aufbau ist folgender

...

<input type="text" value="" name="text_1" class="table_cell"/>

...

mit entsprechender css (.table{ display: table}; .table_row{ display: table-row}; ...)

Es ist davon abzuraten, Formularelementen irgend einen display-typen verschienden von inline, inline-block oder block zu geben.

Folgender Code erzeigt im FX ein nettes Grid, aber viele Formatierungsoptionen hat man ersichtlicherweise nicht:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"  
 "http://www.w3.org/TR/html4/strict.dtd">  
  
<html>  
<head>  
<title>Test</title>  
<style type="text/css">  
form{display:table; border:2px solid #00c;}  
form > div{display:table-row;}  
form > div > * {display:table-cell; width:5em;border:1px solid #f00;}  
form > div > * + * {width:10em;}  
</style>  
  
</head>  
<body>  
  
<form action="">  
   <div>  
   <label>1</label><input type="text" value="text">  
   </div>  
   <div>  
   <label>2</label><select><option>Selectfeld</option></select>  
   </div>  
   <div>  
   <label>Check</label><input type="checkbox">  
   </div>  
   <div>  
   <label>Radio</label><input type="radio">  
   </div>  
   <div>  
   <label>Submit</label><input type="submit" value="Submit">  
   </div>  
</form>  
  
</body>  
</html>  

Wie erhalte ich ein nettes Grid mit soweinig Code?
Antwort: Nicht mit display:table

Besser ist es, den label Elementen display:inline-block mit definierter Breite zu geben. Dadurch erscheint für die erste "Spalte" also Grid.

mfg Beat