IE macht keinen Zeilenumbruch in Tabellenzelle

klaus52 · #1 30-06-2006, 00:08

Ich hab zurzeit an der Un i ne Projektarbeit, in der wir ein Contentmangementsystem, mit allem möglichen Schnickschnack erstellen müssen... dass klappt soweit auch schön und gut... aber in der Navi haben wir grad ein Problem festgestellt, als wir mal mim IE genauer drübergeschaut haben: Er fängt keine neue Zeile an, wenn der Text nicht in die gleiche passt, sondenr lässt den Textz hinter der nächsten Spalte verschwinden. Damit ihr trotz dieser unverständlcihen Beschreibung erkennt, was ich meine hänge ich mal ein Bild vom Problem an... "wiederkehrenden Termin hinzufügen" wird der Text einfach abgeschnitten...

Die seite ist in (viel zu sehr verschachtelten) Tabellen realisiert. Ich schätze allerdings für dieses Prblem dürfte nur die unten Links relevant sein daher poste ich jetzt mal von dieser den Code

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Unbenanntes Dokument</title>
</head>
<body>
<table width="100%" border="0" cellpadding="0" cellspacing="0" style="height: 100%;">
  <tr>
    <td valign="top">
      <table width="5%" border="0" cellspacing="0" cellpadding="0" class="navi-spalte2">
        <tr>
          <td><a href="calendar.jsp"  class="nav">Kalender betrachten</a> </td>
        </tr>
        <tr>
          <td height="3" width="93"><img alt="1" height="1" src="http://localhost:8080/cms/img/hellblau.gif" width="93" /></td>
        </tr>
        <tr>
          <td><a href="addDate.jsp"  class="nav">Termin hinzuf&uuml;gen </a> </td>
        </tr>
        <tr>
          <td height="3" width="93"><img alt="1" height="1" src="http://localhost:8080/cms/img/hellblau.gif" width="93" /></td>
        </tr>
        <tr>
          <td><a href="addRecDate.jsp"  class="nav">wiederkehrenden Termin hinzuf&uuml;gen</a> </td>
        </tr>
        <tr>
          <td height="3" width="93"><img alt="1" height="1" src="http://localhost:8080/cms/img/hellblau.gif" width="93" /></td>
        </tr>
      </table>
    </td>
    <td width="100%" valign="top" class="navi-rechts">
      <table width="100%" border="0" cellpadding="0" cellspacing="0" class="navi-balken" style="height: 95%;">
        <tr>
          <td><a href="http://localhost:8080/cms/index.jsp" class="nav">Zur Startseite</a>. </td>
        </tr>
        <tr>
          <td height="9" width="93"><img alt="1" height="9" src="http://localhost:8080/cms/img/navi-abtrennung.gif" width="93" /></td>
        </tr>
        <tr>
          <td><a href="http://localhost:8080/cms/user/admin.jsp" class="nav">Zum Admin-Center</a>. </td>
        </tr>
        <tr>
          <td height="9" width="93"><img alt="1" height="9" src="http://localhost:8080/cms/img/navi-abtrennung.gif" width="93" /></td>
        </tr>
        <tr>
          <td><a href="http://localhost:8080/cms/login.jsp" class="nav">Einloggen</a> </td>
        </tr>
        <tr>
          <td height="9" width="93"><img alt="1" height="9" src="http://localhost:8080/cms/img/navi-abtrennung.gif" width="93" /></td>
        </tr>
        <tr>
          <td><a href="http://localhost:8080/cms/logged_in.jsp" class="nav">Login-Information</a>.</td>
        </tr>
        <tr>
          <td height="9" width="93"><img alt="1" height="9" src="http://localhost:8080/cms/img/navi-abtrennung.gif" width="93" /></td>
        </tr>
        <tr>
          <td><a href="http://localhost:8080/cms/logout.jsp" class="nav">Ausloggen</a>. </td>
        </tr>
        <tr>
          <td class="navi-abtrennung" height="9">&nbsp;</td>
        </tr>
        <tr>
          <td><a href="http://localhost:8080/cms/message/message_center.jsp" class="nav">Zum 
            Message Center</a>. </td>
        </tr>
        <tr>
          <td height="9" width="93"><img alt="1" height="9" src="http://localhost:8080/cms/img/navi-abtrennung.gif" width="93" /></td>
        </tr>
        <tr>
          <td><a href="http://localhost:8080/cms/calendar/calendar.jsp" class="nav">Zum 
            Kalender</a>. </td>
        </tr>
        <tr>
          <td height="9" width="93"><img alt="1" height="9" src="http://localhost:8080/cms/img/navi-abtrennung.gif" width="93" /></td>
        </tr>
        <tr>
          <td><a href="http://localhost:8080/cms/news/index.jsp" class="nav">Zum Newsmodul</a>. </td>
        </tr>
        <tr>
          <td height="9" width="93"><img alt="1" height="9" src="http://localhost:8080/cms/img/navi-abtrennung.gif" width="93" /></td>
        </tr>
        <tr>
          <td><a href="http://localhost:8080/cms/gallery/index.jsp" class="nav">Zur Gallery</a>. </td>
        </tr>
        <tr>
          <td height="9" width="93"><img alt="1" height="9" src="http://localhost:8080/cms/img/navi-abtrennung.gif" width="93" /></td>
        </tr>
        <tr>
          <td><a href="http://localhost:8080/cms/board/index.jsp" class="nav">Zum Board</a>. </td>
        </tr>
        <tr>
          <td height="9" width="93"><img alt="1" height="9" src="http://localhost:8080/cms/img/navi-abtrennung.gif" width="93" /></td>
        </tr>
        <tr>
          <td style="height: 100%" class="navi-lightblue">&nbsp;</td>
        </tr>
      </table>
    </td>
  </tr>
  <tr>
    <td valign="top">&nbsp;</td>
    <td valign="top" class="navi-rechts">&nbsp;</td>
  </tr>
</table>
</body>
</html>

Und der volständigkeithalber noch die verwendeten Stylesheets:

Code:

.navi-spalte2 {
	background-color: #003b53;
	margin-left: 50px;
}
.navi-rechts {
	background-color: #003b53;

}

.navi-balken {
	border-left-width: 1px;
	border-left-style: solid;
	border-left-color: #000000; 
}

.nav {
	FONT-SIZE: 11px; FONT-FAMILY: Arial, Helvetica, sans-serif
}
A.nav:link {
	COLOR: #cccccc; FONT-STYLE: normal; TEXT-DECORATION: none
}
A.nav:visited {
	COLOR: #cccccc; FONT-STYLE: normal; TEXT-DECORATION: none
}
A.nav:active {
	COLOR: #ffffff; FONT-STYLE: normal; TEXT-DECORATION: none
}
A.nav:hover {
	COLOR: #ffffff; FONT-STYLE: normal; TEXT-DECORATION: none
}

Bin für jede Idee dankbar, da mir so langsam die Ideen ausgehen... meine recherche hat bisher nur ergeben, wie ich mit "nowrap" einen Zeilenumbruch verhindere... was ich bräuchte wäre das Gegenteil...

Gruß
Klaus

***Sven*** · #2 01-07-2006, 15:04

Hilft es dir, wenn ich dir sage,m daß das Zauberwort in CSS dafür 'white-space' lautet?
http://de.selfhtml.org/css/eigenscha...tm#white_space

klaus52 · #3 01-07-2006, 20:53

Cool danke, ich denke genau das habe ich gesucht

Nur zu blöd, dass ich es jetzt doch nicht mehr verwenden werde... Anfang Mai wurde uns gesagt, wie sollen das ganze im Design der Uni Mannheim realisieren... naja, ist zwar unserer Meinung nach ziemlihc beschissen

, aber was solls... dann ahben wir uns erstmal um die wichtigsten Funktionalitäten gekümmert, und jetzt kürzlich das Design angegangen, was nun auch, abgesehen, von diesem Zeilenumbruch, perfekt stand... und woh wesentlich eleganter gelöst war als es die Uni gemacht hatte... (Frames... und wenn man sich dann eine HTML aus den Frames anschaut sind da wieder Frames drin... und wenn man sich dann da wieder eine anschaut, findet man wieder nur Frames... Wenn sie Frames verwenden wollen bitte... gefällt mir zwar nicht, aber okay... aber müssen sie sie danna uch noch x-Fach verschateln? Da hörts doch echt auf

)

Und jetzt dieses Wochenende - 2 Wochen vor der Deadline - bekommen wir ne Mail mit den Dateien des Original Layouts, und dem Hinweis, dass wir dieses verwenden müssen geschickt... schön... hätten sie auch von vorneherein sagen können, dann hätten wir die Zeit fürs Layout immerhin in Dinge stecken können, für die uns jetzt die Zeit knapp wird... Test Cases, Dokumentation, UML-Diagramme, fein-tuning und bug-fixing... stattdessen müssen wir das ganze jetzt nochmal in ein andere Dateien integrieren

P.S.: Wäre glaube ich doch nicht genau das, was ich gesucht habe, aber wenigstens ein erster workaround... sehe ich das richtig? Ich könnte mit Hilfe von "white-space: pre-line;" (hab ich grad aus ner andren Seite, im selfhtml wird das gar nicht angegenen

) dafür sorgen, dass er vor "hinzufügen" einen Umbruch macht, indem ich auch im Quellcode einen Umbruch mache... aber das er generell Zeilen umbricht, wenn der Platz nciht mher reicht kann ich damit nicht erreichen? [Das ist ja normalerweise auch die standardeinstellung, und wenn ich grad den Code von oben kopier, dann bricht er auch die Zeile um... wenn die Tabelle aber im Gesamtlayout eingebunden ist nicht mehr... is wie wenn irgendwo nowrap angegeben wär... ist aber nicht... und jetzt stell ich fest, dass er die Zeile schon umbricht - aber erst seehhr viel später... ich schätze mal genau 50Pixel später... irgendwie mag er den margin-left nicht, und rafft nciht, dass er schon hinter der nächsten Spalte ist

Naja, egal... ]

Naja, dass ganze soll mein Ärger nicht mehr sein... ich hab jetzt ja neue vorgaben fürs Design

Auf jeden Fall danke für die Hilfe

Auf eventuelle Fragen, die ich grad gestellt habe, muss auch nciht mehr eingegangen werden - jedenfalls nicht für mich

- ich bin in nächster Zeit eh erstmal genügend beschäftigt, und habe mich nur mal laut gewundert, weil mich das ganze doch ein wenig verwirrt hatte

Aktive Benutzer in diesem Thema: 1 (Registrierte Benutzer: 0, Gäste: 1)