HTML vs XHTML

Mark · 29 November 2011

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

Code:

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

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.

Code:

<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 <head> und <body> 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 <html> 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?

mermshaus · 29 November 2011

Willkommen im Forum.

Das ist mit Sicherheit Quirks-Modus-Verhalten:

- Quirks-Modus

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.

Mark · 29 November 2011

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.

Wustersoss · 29 November 2011

Hallo,

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

HTML:

<!DOCTYPE html>
<html>
    <head>
         <meta charset="utf-8">
        <title>Seitentitel hier einfügen</title>
        <meta name="description" content="Beschreibung der Seite.">
        <link rel="Shortcut Icon" type="image/ico" href="img/favicon.png">
        <link rel="stylesheet" href="css/style.css" type="text/css" media="screen">
    </head>
    <body>

struppi · 29 November 2011

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.

Mark · 29 November 2011

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

<!DOCTYPE html>

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

Code:

[COLOR=#000080][/COLOR][COLOR=#000080]<!DOCTYPE html>
<html>
<head>
<title>Irgendwas</title>
</head>
<body>
[/COLOR]<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.

Wustersoss · 29 November 2011

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:

<!DOCTYPE html>
<html>
    <head>
        <title>Irgendwas
        </title>
    </head>
    <body>
        <table  style="border-collapse:separate; width:150px; border:1px solid black;">
            <tr>
                <td style="height:50px; border:1px solid red; ">&nbsp; </td>
            </tr>
        </table>
    </body>
</html>

Jetzt sieht es gleich aus.

struppi · 29 November 2011

Mark schrieb:
macht der IE die Tabellenzelle 4px zu breit und 4px zu hoch.
Nur wenn ich den DOCTYPE ganz weglasse macht der IE es richtig,...

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?

Mark · 29 November 2011

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.

struppi · 29 November 2011

Mark schrieb:
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.

Mark · 29 November 2011

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.

Wustersoss · 29 November 2011

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:

<!DOCTYPE html>
<html>
    <head>
        <title>Irgendwas
        </title>                                         
        <style>
        * {padding:0;margin:0;}
        table {border-collapse:separate; width:150px; border:1px solid black;} 
        tr{}
        td{height:50px; border:1px solid red; }       
        </style>
    </head>
    <body>
        <table>
            <tr>
                <td>&nbsp; </td>
            </tr>
        </table>  
    </body>   
</html>

Mark · 29 November 2011

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.

struppi · 29 November 2011

Mark schrieb:
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.

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.

Mark · 29 November 2011

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.

struppi · 29 November 2011

Mark schrieb:
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?

Wustersoss · 29 November 2011

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;}

Mark · 29 November 2011

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.

Mark · 29 November 2011

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.

Wustersoss · 29 November 2011

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:

<!DOCTYPE html>
<html>
    <head>
        <title>Irgendwas
        </title>                                         
        <style>
        * {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; }       
        </style>
    </head>
    <body>

HTML vs XHTML

Neues Mitglied

Senior HTML'ler

Neues Mitglied

Wustersoss

Guest

struppi

Guest

Neues Mitglied

Wustersoss

Guest

struppi

Guest

Neues Mitglied

struppi

Guest

Neues Mitglied

Wustersoss

Guest

Neues Mitglied

struppi

Guest

Neues Mitglied

struppi

Guest

Wustersoss

Guest

Neues Mitglied

Neues Mitglied

Wustersoss

Guest