IE 6: bottom: -1px, Darstellung mal so, mal so!??

[J.Hahn]

Hi allerseits,

ich versuche einen Kasten für beliebigen Inhalt mit abgerundenten Ecken zu realisieren. Die runden Ecken sind kleine Grafiken, die ich in einem DIV-Container absolut jeweils ans Eck eines übergeordneten DIV-Containers (dem eigentlichen Kasten) positioniere. Die Seitenrahmen des Außen-DIVs erzeuge ich ganz einfach mit "border: 1px solid #FF0000";

Das Ganze sieht wie folgt aus:
.container {
 position: relative;
 border: 1px solid #FF0000;
 zoom: 1; /* Braucht IE, damit Container Eigenschaft "hasLayout" hat */
}

.cornerNW {
 width: 12px;
 height: 12px;
 position: absolute;
 top: -1px;
 left: -1px; /* damit der Rahmen des Vatercontainers verdeckt wird */
 background-image: url('/img/corner_nw.gif');
 background-repeat: no-repeat;
 background-position: top left;
}

.cornerSW {
 width: 12px;
 height: 12px;
 position: absolute;
 bottom: -1px;
 left: -1px;
 background-image: url('/img/corner_nw.gif');
 background-repeat: no-repeat;
 background-position: top left;
}

[...]

Das HTML:

<div class="container">
 <div class="cornerNW">&nbsp;</div>
 <div class="cornerSW">&nbsp;</div>
 <div class="cornerNE">&nbsp;</div>
 <div class="cornerSE">&nbsp;</div>
 <div class="containerInner">Hier kommt der eigentliche Inhalt hin</div>
</div>

Klappt alles soweit mit FF, Opera und IE 7. Nur der IE 6 hat Probleme mit den unteren Ecken: Je nach Inhalt der Box (sic!) werden die unteren Ecken-DIVs mal richtig (also den Rahmen verdeckend), mal einen Pixel zu weit oben positioniert (den linken oder rechten Rahmen verdeckend, den unteren nicht). Das schein ein IE 6-Bug zu sein, für den ich leider keine Lösung finde. Weiß jemand Rat.

Vielen Dank im voraus. Schöne Grüße, Josef

[ChrisB]

Hi,

.cornerNW {
.cornerSW {
[...]

Die immer gleichen Eigenschaften solltest du zusammenfassen.

Nur der IE 6 hat Probleme mit den unteren Ecken: Je nach Inhalt der Box (sic!) werden die unteren Ecken-DIVs mal richtig (also den Rahmen verdeckend), mal einen Pixel zu weit oben positioniert (den linken oder rechten Rahmen verdeckend, den unteren nicht).

Lass mich raten - davon abhaengig, ob das Vorfahrenelement eine gerade oder ungerade Pixelhoehe hat ...?

Das schein ein IE 6-Bug zu sein, für den ich leider keine Lösung finde.

Googlen nach "IE position 1px" liefert schon einiges, bspw. IE6 1px gap on absolute elements
Da ist sowohl bestaetigt, dass das ganze nur bei ungerader Hoehe des Vorfahrenelements auftritt, als auch Vorschlaege fuer einen Workaround:
"The truth is that there is not a lot that can be done. [...] One way to get around this problem is not to use absolute positioning at all and to place the corner element after the main element and then drag it into position with a negative margin."

MfG ChrisB