HTML vs XHTML

Ich habe gerade meine HP überarbeitet und wegen einiger neuer Funktionen wurde aus einfachem jetzt

<?xml version="1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
" http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd "> 
<html xmlns=" http://www.w3.org/1999/xhtml ">

Das funktioniert prima, mit einer einzigen Ausnahme, und damit stehe ich auf dem Schlauch.

Ich habe das Problem auf das Minimum reduziert, so dass das Drumrum nicht ablenkt, tatsächlich ist die Seite natürlich viel grösser.

<table width="150" border="1">
<tr>
<td height="50">
&nbsp;
</td>
</tr>
</table>

Völlig egal, ob ich die Seite schön komplett nach Regeln schreibe mit und usw., oder einfach nur dieses kleine Stückchen Code, das Ergebnis bleibt gleich.
Im IE ändert sich die Grösse mit dem DOCTYPE.
Als einfaches ohne weitere Angaben zu DOCTYPE oder sonstwas wird die Tabellenzelle 2px kleiner als angegeben plus Rahmen also passend.
Als XHTML mit genauer Angabe zu version und DOCTYPE wird die Tabellenzelle 2px grösser (höher und breiter) als angegeben plus Rahmen also 4px zu breit und 4px zu hoch.

Ich habe nicht alle Browser ausprobieren können, ich kann nur sagen, das Problem tritt auf in IE8 und IE9, FireFox hat das Problem nicht, der macht es immer gleich.

Kann mir jemand sagen, was das soll, bzw. wie ich das in allen Browsern passend bekomme?

Willkommen im Forum.

Das ist mit Sicherheit Quirks-Modus-Verhalten:

Du solltest immer darauf achten, dass Browser im Standards-Modus rendern, das heißt: korrekte DOCTYPEs setzen. Was Browser im Quirks-Modus tun, ist in gewisser Weise unerwartbar.

Vielen Dank für den Link, das klingt tatsächlich genau nach meinem Problem.
Nur wie bringe ich den IE dazu das richtig zu machen.
Zwar verstehe ich den Hinweis:

Microsofts Internet Explorer erkennt in der Version 6 bei streng nach den Regeln des W3C gestalteten XHTML-Dokumenten deren Dokumenttypdefinition nicht an und wechselt in den Quirks-Modus.

Aber wie man das verhindert/umgeht/berichtigt steht nicht dabei, und was IE8 und IE9 daraus machen auch nicht.

Hallo,

du kannst einfach den HTML5 doctype verwenden. Der Rest ist eh Geschichte.

[HTML]

Seitentitel hier einfügen [/HTML]

Das sehe ich genauso. Wenn du aber unbedingt (das nicht mehr zeitgemäße) (X)HTML verwenden willst, lasse die XML Deklaration weg, die ist deinem Fall sowieso überflüssig.

Vielen Dank für die Antworten.
Ich habe das gerade ausprobiert und mit

funktioniert das, was ich ursprünglich mit XHTML machen wollte genauso.
Soll mir auch Recht sein, nur leider löst es das Problem nicht, denn auch mit

<!DOCTYPE html>
<html>
<head>
<title>Irgendwas</title>
</head>
<body>
<table width="150" border="1">
<tr>
<td height="50">
&nbsp;
</td>
</tr>
</table>
</body>
</html>

macht der IE die Tabellenzelle 4px zu breit und 4px zu hoch.
Nur wenn ich den DOCTYPE ganz weglasse macht der IE es richtig, allerdings muss ich dazu den Browser schliessen und neu öffnen, und dann funktionieren ein paar andere Sachen, wo ich CSS verwende auf meiner HP nicht.

Das liegt an den unterschiedlichen Voreinstellungen im Browser-CSS. Hier eben Border-Collapse, welche unterschiedlich eingestellt sind.

Du solltest dir angewöhnen alle Formatanweisungen in CSS zu schreiben. Für Testzwecke kannst du das Style-Attribut verwenden. Aber besser ist es die CSS-Anweisungen in eine extra Datei zu schreiben.

Beispiel:
[HTML]

Irgendwas
 

[/HTML]

Jetzt sieht es gleich aus.

Das kann nicht sein. Ohne DOCTYPE ist der IE im Quirksmodus, d.h. er benutzt ein anderes falsches Boxmodel und versucht Fehlerhaften Code irgendwie zu darzustellen, vielleicht liegt es daran, dass der Code falsch ist. Was sagt denn der w3c Validator?

Nein, das sieht nicht gleich aus.
Auch mit deinem Code hat die Tabellenzelle im IE eine Höhe von 52px plus Rahmen.
Auch mit deinem Code macht der IE es nur dann richtig, wenn ich den DOCTYPE ganz weglasse.

Wie gesagt, das ist nicht richtig. Ohne DOCTYPE ist es falsch.

Das müsste sich für euch relativ leicht nachvollziehen lassen.
Ich habe den Code von Wustersoss 1:1 in Windows Editor kopiert, nicht dazu gemacht, nichts weggelassen, als test.html auf meinem Desktop gespeichert, im IE geöffnet, Screenshot gemacht, in MS-Paint eingefügt und nachgemessen.
Höhe der Zelle innerhalb vom roten Rahmen = 52px.

Dass es ohne DOCTYPE falsch ist, ist mir klar, weil dann auf meiner HP einiges an CSS nicht funktioniert, aber mit DOCTYPE zeigt der IE definitiv die falsche Grösse an.

Es ist wie immer, voreingestellte Abstände.

Schreib einfach immer am Anfang in dein CSS * {padding:0;margin:0;}

Dein Code muss nun so aussehen:[HTML]

Irgendwas * {padding:0;margin:0;} table {border-collapse:separate; width:150px; border:1px solid black;} tr{} td{height:50px; border:1px solid red; }
 

[/HTML]

Damit kommen wir der Lösung 50% näher, jetzt hat die Zelle innen 50px Höhe, plus Rahmen aber immer noch 2px höher als in FireFox.

Schau dir mal das CSS Boxmodel an, ohne DOCTRYPE benutzt der IE das falsche. Es ist zwar nicht besonders intuitiv, aber es wurde halt so definiert.

Die unterschiedliche Höhe, kommt vermutlich durch die unterschiedliche Schriftgröße (  ist ein Leerzeichen), im Grund sollte man sowieso nicht erwarten dass eine HTML Seite in jedem Browser Pixelgenau gleich aussieht, das ist genau das gegenteil wofür HTML eigentlich mal gedacht war. Es soll nur in allen Browsern oder Darstellungsprogrammen, dargestellt werden. Du kannst aber mittels CSS natürlich versuchen die Angaben weitestgehend anzugleichen. Wie z.b. hier die Innenabstände des Dokument, die kommen vom Browser Stylesheet.

Schriftgrösse macht keinen Unterschied, die Zelle bleibt gleich gross, auch wenn ich gar nichts in die Zelle schreibe, ist ja auch logisch, weil 50px deutlich höher ist als jede default Schriftart.

Ich habe ja begriffen, dass der IE ohne DOCTYPE das falsche Boxmodell verwendet, ich will den DOCTYPE ja auch angeben, damit mein CSS funktionieret.

Komisch ist nur, dass das falsche Modell die richtige Ausgabe bringt, während das richtige Modell es falsch anzeigt.
Ich hätte halt gerne das richtige Modell UND die richtige Anzeige.

Wie gesagt, das Boxmodel ist nicht intuitiv
SELFHTML: Stylesheets / CSS-Formate definieren / Das CSS Box-Modell

Eine Tabelle hat aber noch mehr Eigenschaften die unterschiedlich sein können. Warum darf die Tabelle nicht ein paar Pixel unterschiedlich sein? Wäre es nicht einfacher ein DIV Element zu verwenden?

Habe mir mal die Geschichte zu Border-Collapse angesehen, weil ich denke das es daran liegt. Microsoft schreibt dazu:

The property has a default value of separate. The Cascading Style Sheets (CSS) attribute is not inherited.

Abhilfe könnte jetzt wohl nur das ändern des Border-Collapse verhalten bringen. Anstatt den Wert separate zu verwenden, wird dann collapse verwendet und die Abstände per CSS für die Tabellenfelder angegeben.

CSS:
table {boder-collapse:collapse;}

Es soll mir egal sein, ob das in verschiedenen Browsern verschieden angezeigt wird, ich brauche nur eine Formel, mit der ich (in PHP) ausrechnen kann, wie hoch und breit eine bestimmte Menge Zellen inkl. Rahmen ist und der Wert muss immer stimmen, egal ob der Browser die Höhe plus Rahmen oder inkl. Rahmen anzeigt.

Z.B. wenn ich einen Block von x mal x Zellen habe, dann muss ich irgendwie rausbekommen, wieviele Pixel der Block im verwendeten Browser tatsächlich hat.
Wenn ich eine Abweichung von 2px pro Zelle habe und das für einen Block von 50 Zellen ausrechne, bekomme ich 100px Unterschied, und das hat mit pixelgenau nichts mehr zu tun.

Mit boder-collapse:collapse kommen wir nochmal 50% näher an die Lösung, damit hat die Zelle im IE immer noch 50px Höhe, im FF aber statt 48px jetzt 49px.

So, habe es jetzt für alle Browser gleich. Getestet mit einem Grid von 25 x 20 Zellen.
Werde hier aber nur den Teil bis um Body-Tag präsentieren. Der Rest ist eh nur eine normale Tabelle.

[HTML]

Irgendwas * {padding:0;margin:0;} html, body, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } body: {line-height:1.2em;} table {border-collapse:separate; border-spacing: 0; border:2px solid black;} tr{margin:1px;padding:1px;} td{height:20px; border:solid 1px red; margin:2px; } [/HTML]