IE9: Höhe von Zeilen kann nicht fixiert werden

MarkP1972 · #1 (**permalink**) 05.02.2014, 12:12

Hallo,
ich versuche, eine Tabelle zu erstellen, wobei in eine Zelle, die über 4 Tabellenzeilen geht, recht viel Text rein muss. Hierbei sollen die ersten 3 Zeilen der Tabelle in gleichbleibender Höhe sein und nur die letzte Zeile der Tabelle soll größer werden, wenn der Text die Höhe aller 4 Zeilen überschreitet.

Dies ist der Code, mit dem ich das versuche:

HTML-Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>APEX Row Template</title>
</head>
<body>

<table border="1" width="700px">
 <tr>
  <td style="width:20%; height:22">Row 1. Height 22px</td>
  <td style="width:80%" rowspan="4" valign="top">Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test test</td>
 </tr>
 <tr>
  <td style="height:22">Row 2. Height 22px</td>
 </tr>
 <tr>
  <td style="height:22">Row 3. Height 22px</td>
 </tr>
 <tr>
  <td>Row 4. Height auto</td>
 </tr>
</table>

</body>
</html>

Wenn man sich das im Firefox anguckt, ist alles wunderbar, im IE9 hingegen werden die ersten 3 Zeilen größer gezogen, obwohl ich dort die Höhe auf 22 Pixel beschränkt habe.

Darstellung im Firefox

Darstellung im IE9

Was mache ich da falsch?

Viele Grüße,
Mark

explanator · #2 (**permalink**) 05.02.2014, 12:22

Du versuchst nicht-tabellarische Daten in eine Tabelle zu pressen.

Die Zeilenhöhe einer Tabellenreihe wird auf das TR-Element und nicht auf das Zellenelement angewendet.

Verwende für HTML die dafür vorgesehenen Elemente, da gibt es mehr als nur Table.

Verwende HTML5 als doctype.

Überblick der derzeit verfügbaren Elemente unter HTML5 Doctor, helping you implement HTML5 today

Teste deine Seite immer mit dem http://validator.w3.org/unicorn/

MarkP1972 · #3 (**permalink**) 05.02.2014, 13:53

Hallo,

vielen Dank für deine Antwort. Ich habe den Code mal vom Validator chkecken lassen und alles soweit geändert, dass der Validator keine Fehler mehr findet. Dies ist nun der aktuelle Code:

Zitat:

<!DOCTYPE html>
<html lang='de'>
<head>
<title>Template Test</title>
<meta charset="UTF-8">
</head>

<body>

<table style="border:1px solid #9E8DE3; border-collapse:separate; width:700px">
<tr style="height:22px">
<td style="width:20%">Row 1. Height 22px</td>
<td style="width:80%; vertical-align:top" rowspan="4">Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test test</td>
</tr>
<tr style="height:22px">
<td>Row 2. Height 22px</td>
</tr>
<tr style="height:22px">
<td>Row 3. Height 22px</td>
</tr>
<tr>
<td>Row 4. Height auto</td>
</tr>
</table>

</body>
</html>

Ich muss die Table-Syntax verwenden, da ich mit dem Code ein Report-Template für eine Oracle Application Express-Anwendung definieren will.

Das Problem bleibt leider: IE9 zeigt es nicht richtig an, Firefox schon. Ist es nicht möglich, mit einer HTML-Tabelle ein Layout so zu gestalten, dass es im IE9 wie im Firefox angezeigt wird?

Viele Grüße,
Mark

explanator · #4 (**permalink**) 05.02.2014, 14:22

IE 9 und auch IE8 ignorieren Höhenangaben in den Tabellenzellen, wenn Rawspan verwendet wird.

Lösung ist keine vorhanden, du musst dir was anderes einfallen lassen.

MarkP1972 · #5 (**permalink**) 05.02.2014, 14:29

Na das sind ja tolle Nachrichten.

Ich finde in Google dazu nichts: Klappt das denn mit dem IE10?

Und wenn man so ein Layout mit Tabellen-Definition lösen kann, mit welchen HTML-Mittel könnte man das sonst lösen?

Viele Grüße,
Mark

MarkP1972 · #6 (**permalink**) 05.02.2014, 15:52

Ahhh, ich habe die Lösung gefunden und die Lösung ist so einfach...

Ich definiere einfach eine innere Tabelle, in der ich nur 3 Zellen habe mit einer Höhe von 22 Pixeln. Diese Tabelle packe ich in eine Zeile in die erste Zelle. In die selbe Zeile kommt rechts eine zweite Zelle, dort steht der Bemerkungstext, der nun beliebig wachsen kann.

Hier der Schnipsel vom APEX-Template:

HTML-Code:

 <tr>
  <td style="width:16%" align="right" valign="top" cellpadding="0">
   <table border="0" cellpadding="0" cellspacing="0">
    <tr>
     <td align="right" style="height:22px">NG #NG#</td>
    </tr>
    <tr>
     <td align="right" style="height:22px">NV #NV#</td>
    </tr>
    <tr>
     <td align="right" style="height:22px">KA #KA#</td>
    </tr>
   </table>
  <td style="width:4%">&nbsp;</td>
  <td style="width:16%" align="right" valign="top"><b>Bemerkung:</b></td>
  <td style="width:64%" colspan="4" valign="top">#BEMERKUNG#</td>
 </tr>

Viele Grüße,
Mark

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Ansicht
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
DIV: Ausfüllen restlicher Höhe bei weiterem DIV mit fixer Höhe	danoman	CSS	5	24.04.2011 18:38
ie ignoriert Zeilen Höhe	danliker	CSS	0	23.02.2009 09:11
Tablle mit 100% Höhe in IE	Be1er0ph0r	CSS	4	03.03.2007 16:15
divs aneinander in der höhe ausrichten - wie ?	MS Master	CSS	1	24.02.2005 16:49
Höhe eines td festlegen	to.ni	CSS	2	12.06.2004 15:00