[HTML/CSS] Probleme mit Doctype-Angabe: verunstaltet Design

[mh166]

Hi Leutz,

ich hab ein Problem mit meinem Design. Und zwar taucht das auf, sobald ich nen Doctype definiere.
Ab da verschiebt sich im Opera das Design bei dem a:href. Da wird der Bereich einige Pixel weiter nach rechts gezeichnet, statt bündig mit dem Rest des Blockes aufzuhören, wie es ohne Doctype auch ging.

Besonders drastisch sind die Fehler mit dem IE. Da werden oben die zwei ersten <div>-Boxen ca 2px kleiner gezeichnet, als der Rest und beim hover verstärkt sich das noch.

Was mich wundert is halt, dass es ohne Doctype-Angabe geht. Aber sobald ich einen definiere (egal ob Transitional oder Strict), kommen diese komischen Bugs.

Die funktionierende Seite ohne Doctype-Angabe
Die defekte Seite mit Doctype-Angabe

Ich hoffe ihr könnt mir sagen worans liegt. Die Stylesheets hab ich mal direkt im Source definiert, damit ihr sie gleich mit anschauen könnt.

mfg, mh166

[mh166]

*push*

Keiner ne Idee? Ich bräuchte das nämlich dringend. Oder kann mir jemand ne Alternative sagen, wie ich mit CSS den Fehler umgehen und (annähernd) den selben Effekt erzielen könnte?

mfg, mh166

[SubData]

Zitat:

Authors should use the Strict
DTD when possible, but may use the Transitional DTD when support
for presentation attribute and elements is required.

Warum nimmste nich das Transitional?

[Gina]

Hi,

es liegt an width:100% bei a. Wenn du margin, padding etc. benutzt, dann verrechnet er sich bzw. der eine Browser rechnet anderes wie der andere. Nimm die 100% mal raus, bei mir sieht es dann ganz vernünftig aus...

Gina.

[Mystic]

Zitat:

Zitat von Gina

Wenn du margin, padding etc. benutzt, dann verrechnet er sich bzw. der eine Browser rechnet anderes wie der andere.

IE 6 und Opera im Quirks Mode (z.b. kein Doctype) sowie IE 5 und kleiner benutzen ein fehlerhaftes Box-Model. Dabei werden Padding und Border in die Größe der Box mit eingerechnet:

http://www.constile.org/images/tutor..._model/ie5.gif

Korrekt ist es so:
http://www.constile.org/images/tutor...l/standard.gif
IE 6 und Opera im Standard Mode (korrektes Doctype) sowie die Mozilla Browser verwenden dieses Box-Model.

[mh166]

Zitat:

Zitat von SubData

Zitat:

Authors should use the Strict
DTD when possible, but may use the Transitional DTD when support
for presentation attribute and elements is required.

Warum nimmste nich das Transitional?

Ich hab doch gesagt:

Zitat:

Zitat von mh166

Was mich wundert is halt, dass es ohne Doctype-Angabe geht. Aber sobald ich einen definiere (egal ob Transitional oder Strict), kommen diese komischen Bugs.

Danke, @Mystic und Gina. Das sieht ganz nach dem Problem aus. Also bleibt mir wohl nix anderes übrig, als mit gleich mit absoluten Angaben zu rechnen, weils sonst sein kann, dass es wieder nich hinhaut. Naja, danke trotzdem!