[HTML] Problem mit Tabelle bei Doctype = strict

sn4ke

sn4ke

treuer Stammgast
Problem mit Tabelle bei Doctype = strict

hallo zusammen

Ich habe folgendes HTML-Problem: Ich habe den doctype auf strikt eingestellt: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

Bei einer einfachen Tabelle mit eingefügten Bild, gibt es immer einen Abstand unterhalb zwischen dem Bild und der Tabelle. Ich habe bereits alles mögliche probiert mit cellspacing, cellpadding und auch mit css, konnte jedoch keinen Erfolg verbuchen. Sobald ich den doctype rausnehme oder auf traditional schalte verschwindet der browserunabhängige Abstand unterhalb des Bildes

Mein code:

Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>
<body>

<table border="0" cellspacing="0" cellpadding="0">

<tr>
<td><img src="test.jpg"></tr>
</tr>

<tr>
<td><img src="test.jpg"></tr>
</tr>

</table>

</body>
</html>

Irgendwer ne Ahnung? Doctype einfach rausnehmen ist ja wohl auch nicht der Sinn der Sache..

Nachtrag: Macht ein strikter doctype überhaupt Sinn? Ich habe mich da einmal ein wenig umgeschaut und eigentlich so gut wie keinen "strikten" doctype gehesenen. Alle waren auf transitional..
 
Zuletzt bearbeitet:
Ich hab's mal direkt im Zitat ein wenig in Rot für "Fehler, bitte entfernen" und Grün für "versuchs mal so" angepasst.
sn4ke schrieb:
Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
"http://www.w3.org/TR/html4/strict.dtd">

<html>
[COLOR="SeaGreen"]<head>
<title>So ist's besser</title>
</head>
<style type="text/css">
<!--
table, tr, td, img{margin:0px;padding:0px;border:0px}
// -->
</style>[/COLOR]
<body>

<table border="0" cellspacing="0" cellpadding="0">

<tr>
<td><img src="test.jpg">[COLOR="Red"]</tr>[/COLOR][COLOR="SeaGreen"]</td>[/COLOR]
</tr>

<tr>
<td><img src="test.jpg">[COLOR="Red"]</tr>[/COLOR][COLOR="#2e8b57"]</td>[/COLOR]
</tr>

</table>

</body>
</html>

Irgendwer ne Ahnung? Doctype einfach rausnehmen ist ja wohl auch nicht der Sinn der Sache..
Zum Vergrößern anklicken....

Nein, ist es wirklich nicht ... ;)
 
Wenn du schon strict sein willst, musst du auch wissen, welche Regeln dafür gelten...
Sonnst bleib doch einfach Transitional, wenn dir strict zu schwer ist!
Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<body>
<table border="0" cellspacing="0" cellpadding="0">
<tr><td><img [COLOR="Red"]style="display:block"[/COLOR] src="test.jpg" alt=""></td></tr>
<tr><td><img [COLOR="Red"]style="display:block"[/COLOR] src="test.jpg" alt=""></td></tr>
</table>
</body>
</html>
 
Warum display:block?
Was soll die Umdefinition bringen, ausser dass das Bild wie ein p, li oder ähnliches behandelt wird und damit immer noch margins und borders und paddings vorhanden sind?
Zu Abständen siehe auch CSS2 Box Model

Und ja, ich geb's zu, ich habe das alt Tag vergessen, welches definitiv bei 4.01 als required angegeben ist...

Ansonsten, hier noch ein Link auf die Schnelle:
Objects, Images, and Applets in HTML documents
 
QuHno schrieb:
Warum display:block?
Zum Vergrößern anklicken....
Weil es in strict nur so geht?

Es ging ja auch nicht um validen Quelltext, sonden um das Problem mit den Bildern in der Tabelle ;)

Im übrigen funktioniert deine Lösung nicht, QuHno eben weil es nur mit display:block geht.
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>
<body bgcolor="#ffffff" text="black" topmargin="0" marginheight="0" leftmargin="0" marginwidth="0">

<table border="0" cellspacing="0" cellpadding="0" width="100%">

<tr>
<td><img src="test.jpg"></tr>
</tr>

<tr>
<td><img src="test.jpg"></tr>
</tr>

</table>

</body>
</html>

---------------------------
So gehts, zumindetst im IE und Firefox. Es liegt am Body-Tag !! Topmargin und leftmargin mit Zusatz. Obd as aber jetzt Strict zu 100% ist, das kann und will ich nicht beantworten - zu faul zum suchen :D
 
* {margin:0px;padding:0px;} //setzt sämtliche margins und paddings auf 0, wenn der Browser HTML und CSS Strict kann, klappt das auch.

Ansonsten: Warum bitteschön überhaupt Layout Tabellen? Das ist der größte Blödsinn seit der Benutzung von Frontpage als HTML "Editor"...
Es geht locker ohne!

Man kann alles mit CSS sauber positionieren, sogar über- und untereinander! Auch INLINE Elemente!

! :rtfm ! und ! :rtfm ! und :info:

edit:
Und schaut auch mal in den Quelltext und das Stylesheet der WAI Seite hinein. Da findet man weder Tabellen, noch umdefinierte IMG Tags und trotzdem ist unter dem Bild oben kein Rand zu sehen...
 
Zuletzt bearbeitet:
Leute...die Frage war, wie er den Abstand wegbekommt.
Die Antwort meinerseits ist die richtige.
Ob und wie das jetzt verschiedene Browser die anderen Vorschläge interpretieren, spielt dabei überhaupt keine Rolle es soll auf allen 4 großen Browsern gleich aussehen. Das mit 2 Browsern zu testen ist sinnfrei, da kann mans auch gleich lassen. Vor allem sowas über den Bodytag lösen zu wollen ist glatter Unfug, wenn es sich auf ein Problem innerhalb einer Tabelle bezieht.
Warum bitteschön überhaupt Layout Tabellen?
Zum Vergrößern anklicken....
Wo steht hier was von Layout?

Man kann alles mit CSS sauber positionieren
Zum Vergrößern anklicken....
Lächerliche Aussage. Schon mal selbst versucht ein komplexes Desing standartkonform so aufzubauen, das es in den 4 üblichen Browsern annähernd gleich aussieht?
Was nutzt es, wenn ich so layoute, das es in NC, FF und Opera toll aussieht, aber im IE alles zerstört ist? Dann kann man natürlich sagen, was schert mich ein Browser, der sich nicht an Standarts hält. Tolle Ausrede, wenn man sich allein an seinen Webseiten erfreuen will, aber auch nur in diesem Fall ;)
Da hilft das fuchteln mit RTFM Büchern auch nichts, eher wirkt es albern.

Und am Ende interessiert sich der Fragestelle für dieses Thema mal garnicht mehr also ist auch jegliche Diskussion überflüssig.
 
SoKoBaN schrieb:
Lächerliche Aussage. Schon mal selbst versucht ein komplexes Desing standartkonform so aufzubauen, das es in den 4 üblichen Browsern annähernd gleich aussieht?
Zum Vergrößern anklicken....
Ja. Und es geht.
Es interessiert mich allerdings meistens nicht, da ich Webseiten für Menschen entwerfe und nicht für Browser. Und bevor Du mich jetzt verprügelst: Wir beide vertreten grundsätzlich unterschiedliche Auffassungen. Solche Diskussionen wurden schon oft geführt und führen zu wenig.
Da hilft das fuchteln mit RTFM Büchern auch nichts, eher wirkt es albern.
Zum Vergrößern anklicken....
Ich kann die RTFM Bücher auch einfach löschen, dann sieht man vielleicht de Links dahinter besser. Und was lernen wir daraus? Grafische Links sind böse - aber das wollte ich eigentlich nicht damit erreichen. Da habe ich ganz klar das Ziel verfehlt!

Ansonsten zum Thema komplexes Design ein nettes Beispiel:
/moose/css/destroy/::
Klick Dich durch die Links und lass Dich inspirieren. Wenn Du so etwas mit Tabellen aufbaust, wirst Du auf Dauer krank im Kopf und der Code lässt sich nahezu nicht pflegen.
Auf der Seite siehst Du auch, dass der Autor sich durchaus trotz seiner Opera-Brille die Mühe gemacht hat, selbst komplexe Designs mit mehreren Browsern zu überprüfen und vor allem sicher zu stellen, dass die Seiten 100% strict validiert sind, außer er hat extra etwas anderes erwähnt.

BTW: WAI ist kein Witz, für einige Leute ist es extrem wichtig, dass Webseiten eben nicht mit Tabellen aufgebaut werden, da sich Tabellen z.B. nur sehr schwer vorlesen lassen. WAI steht nicht für schlechtes Design und auch nicht dafür, dass man auf Spielereien verzichten muss. Allerdings sollte man den Nutzer im Auge behalten.

Wer allerdings nur auf pixelgenaues Design und weniger auf Inhalt Wert legt, ist wohl bei Flash besser aufgehoben. Das ist meistens bunt, groß und verspielt und sieht überall gleich aus - zumindestens meistens...

Und wirklich pixelgenause Design gibt es mit HTML sowieso nicht. Das kannst Du gerne austesten, wenn Du mal mit Deinem Handy, vorausgesetzt es kann HTML Seiten darstellen, eine Webseite besuchst. Dann bleibt nicht mehr viel von Tabellen und Co übrig. Das ist zwar ein Extrembeispiel - obwohl mittlerweile mehr Leute mit Handys surfen als man meint - aber selbst eine andere Bildschirmauflösung kann manchmal das Design zerhageln -egal was man anstellt um solche Effekte auszugleichen - oder eine anders eingestellte minimale Fontgröße (kann auch der IE!). Selbst wenn man 2 Mal den (soweit möglich) gleichen Browser nimmt und ihn nur auf verschiedenen Betriebssystemen laufen lässt, kann das schief gehen. Ich hatte einmal das Vergnügen einem Vortrag von Tantec Celic genau zu diesem Thema (Unterschiede IE Win und Mac) lauschen zu können, das hat mir damals die Augen geöffnet.

OK, jetz aber Schluß mit Tiraden meinerseits:
Friede?
Wir haben halt unterschiedliche Ansichten und ich kann damit leben...
 
Die ursprüngliche Frage war doch mal:

----- Zitat ---------------
Bei einer einfachen Tabelle mit eingefügten Bild, gibt es immer einen Abstand unterhalb zwischen dem Bild und der Tabelle. Ich habe bereits alles mögliche probiert mit cellspacing, cellpadding und auch mit css, konnte jedoch keinen Erfolg verbuchen. Sobald ich den doctype rausnehme oder auf traditional schalte verschwindet der browserunabhängige Abstand unterhalb des Bildes
------ Zitat Ende -----------

Es war nirgendow die Rede davon, dass Du die eierlegende Wollmilchsau haben möchtest (einfache Tabelle war gefragt). Also blöke hier bitte nicht so rum. Du solltest dann schon die Frage dementsprechend formulieren.

Und ansonsten geb ich OuHno recht. Ist mit CSS lösbar - sofern es der Browser rafft. Das ist aber nicht das Problem von CSS, es ist das Problem der Browser-Entwickler.
Und wenn' s halt sein soll, dann nimm den Doctype halt raus - hast Du ein problem damit?

Habe fertig - und keine Antwort mehr dazu von mir.
 
@Bullabeisser
Samma...redest du mit mir oder was? Weil, ich hab ganz den Eindruck und finde, das ich weder rumblöke noch sonnstwas...da gabs mal einen Spruch, "Wer lesen kann ist klar...." :ätsch

@QuHno
Das ein Layout nicht aus Tabellen aufgebaut sein soll, ist mir bewußt, ich selbst layoute generell in CSS und weiß daher auch um den Terror mit den verschiedenen Browsern. Ich rede dabei nicht von pixel genauem Desing aber ich weiß das ich, wenn ich gerade dem Internet Explorer was recht machen will, auf bestimmte Sachen einfach verzichten oder userunfreundliches JavaScript einsetzen oder extra Hacks für den IE verwenden muß. Natürlich hart an der Grenze zur konformität oder auch mal etwas darüber hinaus.

Ich layoute auch für User allerdings möchte ich auch, das alle meine Seiten betrachten können und muß daher auch alle Macken der 4 großen berücksichtigen. Das hat nichts damit zu tun, das ich es allen Browsern recht machen will, ich muß es einfach.
Ich will nicht rumstreiten oder sowas, aber ich kenne total überzogene Meinungen zu CSS, welche Tabellen von Grund auf verteufeln. Natürlich ist das Schwachsinn, es gibt tabellarische Daten, die gehören ganz einfach in eine Tabelle und es ist absolut Sinnfrei, diese mit irgendwelchen Verrenkungen in DIV Container zu packen nur um irgend einen Schein zu wahren.

In diesem Sinne, wenn ich streitsüchtig rüberkam tut es mir leid, ich wollte nur darauf hinweisen, das es Blödsinn ist, generell auf Tabellen zu verzichten und es einfach manchmal nicht möglich ist, mit CSS Sachen zu bauen ohne das man bestimmte User außen vor lässt. Es ist zwar recht nett, wenn jemand sich die Mühe macht, ein komplexes Desing zu schaffen, was auch überall funktioniert aber wenn ich mein eigenes machen will und es eben nicht so hinbekomme, wie ich mir das vorstelle, nutzen mir die Testversuche anderer herzlich wenig ;)
 
Ich seh's kommen...man wird mich steinigen :ROFLMAO: :D

Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>fidi-trullala</title>
<style type="text/css">
<!--
.bild
	{
	background-image:url(bild.jpg);
	height:150px;
	width:200px;
}
//-->
</style>
</head>
<body>

<table border="0" cellspacing="0" cellpadding="0" style="height:300px">
	<tr>
		<td class="bild">Hab den IE ned zur Hand</td>
	</tr>
	<tr>
		<td class="bild">...weiss nicht ob der funzt</td>
	</tr>
</table>

</body>
</html>
 
Tabellen oder CSS???

Das ist in der Tat eine Glaubensfrage, beides hat sicherlich in bestimmten Situationen seine Vorteile.

Aber um einmal dem Soko etwas in die Seite zu treten....ääääh...zur Seite treten natürlich.:D
Ich arbeite hauptsächlich mit Tabellen und setze CSS eher spärlich ein, was aber vielleicht auch daran liegen mag, das es zu meinen Webdesign-Anfängen noch gar kein CSS gab und bei den Browsern hatte man die Auswahl zwischen IE und Netscape.
Mir fehlte vielleicht auch einfach die Zeit mich umzuorientieren.

Aber ich komme damit ganz gut klar und ist der Aufbau auch noch so komplex.
Da ich heutzutage HTML nur noch als Gerüst für variable Inhalte per PHP/Mqsql benutze, finde ich dafür Tabellen fast zweckmässiger.
Außerdem kann ich sie ja auch per Script parsen lassen, was auch vieles vereinfacht.

Wie ich bereits sagte, ist halt eine Glaubenssache.
Beide Systeme haben sicherlich ihre Stärken ebnso wie schwächen.
 
@SoKoBaN, vielen Dank für die Lösung!!

@rest, vielen Dank für die angeregte Diskussion ;)
 
Bischen spät, aber das Thema hat mir keine Ruhe gelassen:
Beispiel: Meine Seite mit Tabelle ohne display:block (Erklärung auf der Seite)

Das ist zwar nicht die Lösung die gesucht wurde, aber eine nette Alternative, die auch gleichzeitig den Vorteil hat, dass man über das Bild einen netten Textlink legen kann bzw den ganzen Kram beschriften oder sogar mit einem weiteren Bild belegen kann. Das einfache Rechtsklick "Bild speichern" wird damit auch auf diversen Browsern ausgehebelt. Das hält zwar niemanden ernsthaft ab, aber man kann's ja versuchen ;)

BTW: Eine Möglichkeit, sich ein wenig Tipp oder Kopierarbeit zu sparen:
Code: 
.bild{width: (Bildhöhe)px;height:(Bildhöhe)px;}
td img{display:block}
im Stylesheet und
Code: 
<td class="bild"><img class="bild" src="bild.gif" alt="Bild" /></td>
im Body wäre eine alternative Schreibweise zum "inline" style. (.bild wenn alle Bilder gleich groß sind). Ich habe allerdings nicht getestet, ob das td img überall läuft ...

@SoKoBaN
Sorry wg meiner Mission, alle bekehren zu wollen, dass CSS das Mittel der Wahl ist! Ich kann da einfach nicht anders... ;)
Du hast Recht, es geht wirklich nicht anders, wenn man das Bild in eine Tabelle hineinsetzen will - was zugegebenermaßen manchmal sogar sinnvoll ist, wenn man z.B. eine 2 oder mehrspaltige Tabelle baut, in der in einer Spalte die Bilder und in der nächsten Informationen zu den Bildern sind. Das ist selbst Sinne der WAI nicht schlecht. :D

Sollen die Bilder allerdings nur dekorativen Zwecken dienen, finde ich die Background Methode schöner, da sie diverse Probleme umgeht. Wenn man dann noch die Größen der Zellen (ist in diesem Fall zwingend, wenn man die Bilder vollständig sehen will!) und/oder die der gesamten Tabelle angibt, springt sogar nicht einmal die Anzeige beim Seitenaufbau, wenn der Server mal wieder die Bilder langsamer liefert... (gut, man könnte das auch nur bei den direkt in eine Tabelle gesetzten Bildern machen aber: Die Diskussion über das "Für und Wider" würde in diesem Thread IMHO viel zu weit führen) ;)

PS: Ich hätte die RTFM Smileys ja gerne wieder wegeditiert, aber da direkt darauf Bezug genommen wurde, sollen andere Leser auch sehen, warum sich darüber (mittlerweile muss ich sagen zu recht ) "aufgeregt" wurde. Während des Erstellens des Postings fand ich das noch witzig, mittlerweile nicht mehr und es tut mir leid. Die Webseiten, zu denen man kommt, wenn man auf die Smileys klickt, hätte ich allerdings dennoch als Link gepostet, da die dortigen Inhalte IMHO auf alle Fälle lesenswert sind.

edit:
@Astrominus:
das es zu meinen Webdesign-Anfängen noch gar kein CSS gab
Zum Vergrößern anklicken....
Also vor 1996 (Datum der ersten Spec). Wow, warst Du früh im Netz! :respekt2

Gibt's noch Relikte von damals, die Du uns zeigen kannst? (nicht bösartig gemeint, ich bin nur fürchterlich neugierig :))

edit2:
W3C QA - Recommended list of DTDs you can use in your Web document
als Anregung, was vom W3C als Doctype empfohlen wird und was nicht...
 
Zuletzt bearbeitet:
Du musst dich einloggen oder registrieren, um hier zu antworten.
Oben