nicht angemeldet
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"> </div>
<div class="cornerSW"> </div>
<div class="cornerNE"> </div>
<div class="cornerSE"> </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