• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Tabellenproblem mit 4.01 Strict

M

Max Air

Neues Mitglied
Hallo Forum

Bevor ich mir noch die letzten Haare vom Kopf reisse, wende ich mich mal lieber an euch.

Ich habe eine Tabelle mit Bildern die mit HTML 4.01 Transitional wunderbar funktioniert...nur leider bin ich dank anderem Code auf Strict angewiesen. Das Problem ist ein Abstand den ich mir nun wirklich nicht erklären kann. Der W3C-Validator meldet weder Errors noch Warnings. Es ist kein Border, es ist nicht die Schriftgrösse, es ist nicht der leere Raum unten...es scheint gar nichts zu sein. Aber für dieses Nichts ist es ziemlilch hässlich. Zum besseren Erkennen wurde der Background einiger Zellen eingefärbt.

Ich hab allerhand eingefügt, Zellenhöhen verkleinert...alles nutzt nichts. Ziel ist es, dass die Bilder (Strichlinien unterhalb von Thamnophis) aneinander anschliessen...korrekt angezeigt wird es mittels:

HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
Hier das Corpus Delicti:

HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>weils sein muss!</title>
<style type="text/css">
html {
margin:auto;
}

body {
overflow-y: scroll;
overflow-x: hidden;
text-align:center; /* for IE */
margin:0 auto; /* for the rest */
padding:0px;
}

table {
text-align: left;
padding:0px;
margin:0px;
}

td {
margin:0px;
padding:0px;
}
.LinkTree1 {  font-family: Verdana, Arial, Helvetica, sans-serif;  font-size: 8px; color: #000000; font-weight: bold; text-decoration:  underline}
.CONTENTText1 { font-family: Arial, Helvetica, sans-serif; font-size: 8px; color: #000000; font-weight: normal }
.TreeGat1 {  font-family: Verdana, Arial, Helvetica, sans-serif;  font-size: 8px; color: #000000; font-weight: bold; text-decoration:  none; font-style:italic }
</style>
</head>
<body onLoad="window.focus();" style="background-color:#000000; height:10">
<table border="0" cellspacing="0" cellpadding="0" class="CONTENTText1" style="background-color:#9F9205; height:20px">
 <tr>
  <td class='CONTENTText1' valign='middle' style='height:25px' colspan='4'>&nbsp;</td>
 </tr>
 <tr>
  <td style='height:15px' class='TreeGat1' colspan='4'>&nbsp;Thamnophis</td>
 </tr>
 <tr>
  <td  class='CONTENTText1' style='height:10px; width:10%;  background-color:#FF00F0'><img style='border:none'  src='/images/artline2.gif' alt='----'></td>
  <td  class='CONTENTText1' style='height:10px;  background-color:#FF00F0'  colspan='3'>&nbsp;<i>atratus</i></td>
 </tr>
 <tr>
  <td style='height:15px; width:10%' class='CONTENTText1'><img  style='border:none' src='/images/artline3.gif' alt='----'></td>
  <td style='height:15px; width:10%' class='CONTENTText1'><img  style='border:none' src='/images/artline1.gif' alt='----'></td>
  <td style='height:15px; width:30%'  class='CONTENTText1'>&nbsp;<a href='#'  class='LinkTree1'>atratus</a></td>
  <td style='height:15px; width:70%' class='CONTENTText1'>&nbsp;</td>
 </tr>
 <tr>
  <td  class='CONTENTText1' style='height:10px; width:10%;  background-color:#FF00F0'><img style='border:none'  src='/images/artline2.gif' alt='----'></td>
  <td  class='CONTENTText1' style='height:10px;  background-color:#FF00F0'  colspan='3'>&nbsp;<i>brachystoma</i></td>
 </tr>
 <tr>
  <td style='height:15px; width:10%' class='CONTENTText1'><img  style='border:none' src='/images/artline3.gif' alt='----'></td>
  <td style='height:15px; width:10%' class='CONTENTText1'><img  style='border:none' src='/images/artline1.gif' alt='----'></td>
  <td style='height:15px; width:30%'  class='CONTENTText1'>&nbsp;<a href='#'  class='LinkTree1'>brachystoma</a></td>
  <td style='height:15px; width:70%' class='CONTENTText1'>&nbsp;</td>
 </tr>
</table>
</body>
</html>
Vielen Dank schonmal im Voraus und Grüsse aus der Schweiz,
Max
 
Du hast keine tabellarischen Daten, folglich ist die Tabelle hier unnötig und falsch angebacht. Ohne Tabelle könntest Du sehr einfach per CSS die Bilder direkt nebeneinander setzen. In deinem Fall müsstest Du noch die CSS-Eigenschaften border-collapse beachten die auf collapse gesetzt werden müsste.
 
Sorry, I'm coder, not actor...please translate to catch it ;) Die Sache ist die: Es handelt sich um eine vorzeitliche Webapplikation die wenn immer möglich mit geringem Aufwand angepasst werden soll. Es steckt schon so viel Zeit in der Verwaltungsapplikation, dass ich ehrlich gesagt schon jetzt genug hab....deshalb das rudimentäre Gerüst. Folglich wär ich dankbar um eine Lösung des Problems mit Tabelle. Aber wenns die nicht gibt, was ich bezweifle, wenn niemand die Zeit oder Musse hat, was gut möglich ist, dann werde ich mich mal damit auseinandersetzen. So oder so, Danke für Deine Ausführung. Dennoch würde mich interessieren was diesen Abstand verursacht...ich kann es mir nicht erklären.
 
Das hat nichts mit strict oder nicht zu tun, sondern der erste DOCTYPE versetzt den Browser in de Quirksmodus, der zweite in den Standardmodus, der eigentlich immer vorzuziehen ist.

Und die von threadi gezeigte Eigenschaft, sollte das Problem beheben.
 
Danke struppi. Hab zuerst mal falsch gelesen. Beim zweiten Mal gings auch bei mir rein...wenig Schlaf und viel Quelltext passen nicht zusammen. Thanx!

Ich habe border-collapse versucht. Mal ganz einfach, neuer Code:

Zu sehen unter: border-collapse

HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>border-collapse</title>
<style type="text/css">
table, td {
 border: 1px solid #000000;
 height: 10px;
 padding: 0px;
}
</style>
</head><body>
<table style="border-collapse: collapse">
<tr>
 <td><img style="border: none" src='/images/blah.gif' alt='----'></td>
 <td>Second TD of first TR</td>
 <td>Third TD of first TR</td>
</tr>
<tr>
 <td><img style="border: none" src='/images/blah.gif' alt='----'></td>
 <td>&nbsp;</td>
 <td>Third TD of second TR</td>
</tr>
</table>
</body></html>
Wenn ich mir folgendes Beispiel hier anschaue, müsst das gehen. Geht aber nicht. Mit HTML 3.2 kein Problem, aber 4.01...

CSS - Fun with tables

Wie zu sehen ist, hat der Border keinen Einfluss. Was zum Henker überseh ich da nur?

@struppi
Ehh, ja, das stimmt. Aber, nun kommts...so sähe man wie es aussehen müsste...und vielleicht hilft ja genau das beim Auflösen des Problems? Der Unterschied der Quirksmodi zum Korrekten.
 

Anhänge

  • blah.gif
    blah.gif
    600 Bytes · Aufrufe: 3
Zuletzt bearbeitet:
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben