Welchen Doctype

[molily]

Hallo, Cyx,

Zusätzlich mit border zu hantieren, finde ich heikel, da MSIE (6) und Mozilla die Höhe als Gesamthöhe inklusive border verstehen, während Opera (7) height als Innenhöhe versteht. Wenn du eine durchgehende einfarbige Linie willst, schalte die Rahmenlinien ab und benutze Farbangaben und height wie im Beispiel.

was meinst du jetzt, das Verhalten von Opera nur bei ganz bestimmtem doctype?

Was sind für dich ganz bestimmte Doctypes? Ich gehe immer vom standardkompatiblen Modus mit voller Dokumenttyp-Deklaration aus. Im Quirks-Mode rendert Opera 7 bekanntlich weitesgehend wie MSIE.

Angenommen, es werden folgende Formatierungen vergeben:
hr {color:black; background-color:black; border-style:none; height:5px; border:5px solid red;}
In einem Dokument, welches in MSIE 6, Opera 7 und Mozilla (hier Firebird 0.6) den standards compliant mode auslöst (hier XHTML 1.0 Strict), wirken sie sich unterschiedlich aus.

• Opera 7 zeigt ein insgesamt 15 Pixel hohen Strich an, welcher aus einem fünf Pixel hohen roten, einem fünf Pixel hohen schwarzen und wieder einem fünf Pixel hohen roten Segment besteht
• MSIE 6 zeigt einen fünf(!) Pixel hohen durchgehend roten(!) Strich an
• Gecko wählt einen Mittelweg: ein rotes Segment der Höhe ein(!) Pixel, ein schwarzes Segment der Höhe fünf Pixel und wieder ein rotes Segment der Höhe ein Pixel.

Bei height:15px und gleichen border sieht es so aus:

• Opera 7: 25 Pixel Höhe insgesamt, 5px rot, 15px schwarz, 5px rot
• MSIE 6: Insgesamt 15 Pixel Höhe, 5px rot, 5px schwarz, 5px rot
• Gecko: Dieselbe Darstellung wie MSIE 6

Bei height:5px und border:10px solid red (sic, das ist exakt die Testkonfiguration):

• Opera 7: 25 Pixel Höhe, 10px rot, 5px schwarz, 10px rot
• MSIE 6: durchgehend roter, fünf Pixel hoher Strich
• Gecko: 6 Pixel Höhe (!), davon 1px rot, 4 Pixel schwarz, 1px rot

Mit unvollständigem DOCTYPE (HTML 4.01 Transitional):

Bei height:5px und border-width:5px:

• Opera 7: dieselbe Darstellung wie MSIE 6 (vermutlich Absicht)
• MSIE 6:  fünf Pixel hoch, durchgehend rot
• Gecko: insgesamt elf(!) Pixel hoch, 5px rot, 1px schwarz, 5px rot

Bei height:15px und border-width:5px:

• Opera 7: dieselbe Darstellung wie MSIE 6 (vermutlich Absicht)
• MSIE 6: insgesamt 15 Pixel hoch, 5px rot, 5px schwarz, 5px rot
• Gecko: insgesamt 16(!) Pixel hoch, 5px rot, 6(!) Pixel schwarz, 5px rot

Bei height:5px und border-width:10px:

• Opera 7: 15 Pixel hoch, durchgehend rot, an den Rändern aber stufenförmig, in etwa so:
     _______..._______
   _/                 \_
  |_                   _|
    \_______..._______/

• MSIE 6: 5 Pixel hoch, durchgehend rot

• Gecko: insgesamt 21(!) Pixel hoch, davon 10px rot, 1px(!) schwarz, 10px rot

Daher mein Rat, den Kram mit der border besser sein zu lassen... Und ich habe andere relevante Browser noch nicht einmal getestet.

Grüße,
Mathias