[HTML/CSS] Border in IE und FF verschieden interpretiert

[Eichi]

Hallo liebe Leute,
ich habe schon danach gesucht, aber leider nichts in diesem Forum gefunden.
Es geht einfach nur darum, dass ich einen Border bei meiner Seite machen will, IE und FF diesen command aber verschieden interpretieren.

Beispiel an einer Box:
IE erstellt den border an der Innenseite der Box
FF erstellt den border auserhalb der Box

Nun würde ich gerne wissen, wie man es hinbekommt, dass der Befehl von beiden Browsern gleich ausgeführt wird, sprich: beide browser sollen den Border innerhalb oder außerhalb der Box erstellen. Wie rum es nun ist, ist mir im moment so ziemlich egal.

Ich hoffe ihr könnt mir bei diesem kleinen Problem helfen.

 

[krizzelfix]

Hallo Eichi,

wie meinst du das mit Innerhalb und aussen?
Einfach wie der Border aussieht oder der Abstand zum Inhalt?

Wenn du den abstand meinst musst du einfach dem Container ein paddding geben. Der IE und FF haben unterschiedliche Standards bei den Paddings, Margins etc.

Wenn du das aussehen meinst könntest du das mit einer Hintergrundgrafik machen.

Grüße

tewes

 

[Eichi]

Ich meinte das jetzt so:
Ich habe zum Beispiel eine Box die 500 pixel breit ist und x pixel hoch.
Wenn ich jetzt um es mal zu übertreiben 50px border an der linken seite der box mache hat die box bei FF eine gesamtlänge von 550px. Heißt also er schiebt den border von außen dran.

Beim IE hingegen bleibt die Breite bei 500px, nur der Border wird nach innen hin gelegt.

Ich hoffe mit der Grafik wird verständlicher was ich meine:

 

[Zweipunktnull]

Schreibe valides (X)HTML mit einem korrekten DOCTYPE.

Also dein Problem ist das fehlerhafte Boxmodell des Internet Explorers. Allerdings ist das bereits im MSIE6 korrigiert worden. Jediglich im Quirksmodus verwendet der MSIE6 noch das falsche Boxmodell. Und in diesen Modus schaltet er (unter anderem), wenn man keinen oder einen falschen DOCTYPE angibt. Und da ich davon ausgehe, dass du nicht den MSIE5 benutzt, wird das bei dir der Fehler sein.
Wenn du also auf MSIE5-Unterstüzung keinen Wert legst, dann schreibe einfach sauberes (X)HTML und diese Probleme lösen sich von ganz alleine.
Wenn du umbedingt MSIE5-Unterstüzung willst, dann musst du über Conditional Comments weitere, an den MSIE angepasste Stylesheets einbinden.

 

[Eichi]

Ich habe noch nie mit DOCTYPEs geschrieben.
Sind diese eigentlich wichtig? Ich werde mich erstmal näher über DOCTYPE informieren. Danke für die Hilfe

 

[Zweipunktnull]

Ob diese wichtig sind kannst du dir nach meinem Post eigentlich selbst beantworten. Mit ihnen existieren deine Probleme nicht, ohne ihnen schon. Sind sie nun wichtig oder nicht?

Im Übrigen gehört ein DOCTYPE immer an den Anfang einer (X)HTML-Datei, selbst wenn das Nichtvorhandensein keine Fehler verursachen würde. Ein DOCTYPE gehört nunmal genauso zu einer (X)HTML-Datei wie das html-, head- und body-Element. Wieso einige den DOCTYPE weglassen ist mir nicht ganz klar. Wahrscheinlich ist der Grund, dass die wenigsten (X)HTML wirklich beherrschen, sondern immer nur ein paar Tags zusammenwürfeln, die aus purer Gnade der Browser korrekt angezeigt werden, mit korrektem (X)HTML allerdings nicht im Geringsten etwas zu tun haben.

 

[Backslash]

Hier sei noch erwähnt, dass du deine Seiten unter http://validator.w3.org/ auf X/HTML validität überprüfen lassen kannst. Dann sollte soetwas nicht mehr vorkommen.

mfg

/edit: Ich hab grad mal jff diesen post durchlaufen lassen und die Seite ist nicht valide: "Missing xmlns attribute for element html. The value should be: http://www.w3.org/1999/xhtml"

 

[Zweipunktnull]

Die meisten (dynamischen) Websites sind laut W3C-Validator nicht valide, obwohl sie es im Prinzip sind.
Der Grund ist, dass die meisten Webpräsenzen die Ampersands in den URLs nicht maskieren - das meckert der Validator dann natürlich an. Wenn das allerdings die einzigsten Fehler sind, ist die Website für mich trotzdem valide.

Ein fehlendes xmlns-Attribut im html-Element sollte dagegen leicht behebbar sein, oder CB?

 

[Crizzo]

Hier siehst du, wie du den Boxmodell-Bug beheben kannst: http://www.thestyleworks.de/tut-art/boxmodelhacks.shtml