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?
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:
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.
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.
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.
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.
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.
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.
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.