display:inline zerstört Tabelle im Firefox!

[Frank]

Ich habe zwar nicht viel Hoffnung, aber vielleicht kann mir ja doch jemand helfen...
Ich möchte mehrere Tabellen für einen Kalender "inline" darstellen lassen (http://www.i-y-c.de/IYC_termine.php)

Im IE6.0 siehts ausnahmsweise wie gewünscht aus, der Firefox 1.5.0.10 stellt die Tabellen jedoch total zerstört dar:

So sieht die CSS Klasse für die Tabellen aus:

.kal_table2{
  display:inline;
  background-color:#FFFFFF;
  color:#000000;
  border: 1px solid #A0A0A0;
  font-size:80%;
  border-collapse:collapse;
  empty-cells:show;
 margin:5px;
 padding:0px;
}

Der Html-Code ist valide, und ich verstehe einfach nicht, wo ich noch nach Fehlern suchen könnte.

[MudGuard]

Hi,

Im IE6.0 siehts ausnahmsweise wie gewünscht aus, der Firefox 1.5.0.10 stellt die Tabellen jedoch total zerstört dar:

Du machst aus einer Tabelle eine nicht-Tabelle und wunderst Dich dann, daß diese nicht-Tabelle nicht wie eine Tabelle dargestellt wird?

Um block-Elemente (wie z.B. Tabellen) nebeneinander zu positionieren, bietet sich float an.

cu,
Andreas

[Frank]

Danke, das klingt plausibel...
Tja, mit float:left statt display:inline; (war mein erster Ansatz :) ) verschwindet zwar der Fehler im Firefox, aber dafür habe ich im IE eine 3 Monate breite Lücke zwischen den Tabellen. Woran liegt das nun?

[Detlef G.]

Hallo Frank

... aber dafür habe ich im IE eine 3 Monate breite Lücke zwischen den Tabellen. Woran liegt das nun?

Die hast du auch, wenn du im Firefox die Schrift vergrößerst.
Schau dir mal die Höhe der Tabellen genau an. Im Firefox wird die Tabelle des Jeweiligen Monats bei Schriftvergrößerung ein paar Pixel höher, wenn sie einen Termin (gelber Hintergrund mit fetter Schrift) enthält, und im IE ist sie ein paar Pixel höher, wenn die letzte Tabellenzeile nicht leer ist.

Im Firefox kannst du das vermeiden, indem du eine Höhe für die Tabellenzellen angibst, die ein klein wenig größer ist, als die Zelle mit fetter Schrift.
eventuell:

.kal_table2 td{  
 height:1.4em;  
}  

Vielleicht hilft das auch schon beim IE, vielleicht musst du dort auch noch border:none; bei .kal_whitespace entfernen oder ändern.
(Mit IE konnte ich im Moment nicht testen.)

Auf Wiederlesen
Detlef

[Frank]

Tausend Dank, Detlef!
Mit einer Borderdefinition für die leeren  Zellen und dem height:1.4em; klappt es jetzt endlich! Super wie einem hier geholfen wird!

Frank