CSS Ordentlicher Border Radius

[mercsen]

Moin moin,

diesesmal komme ich mit css nicht weiter.

Ich versuche das von mir gebaute dialog system ein wenig auzumotzen, hauptsächlich im designe.

Er baut sich wie folgt auf (verinfachte darstellung)

<div id="_system_dialog_frame" class="z_dialog">
   <div id="_system_dialog_title">Dialog</div>
   <div id="_system_dialog_content">&nbsp;</div>
   <div id="_system_dialog_buttons">&nbsp;</div>
</div>

es gibt also einen "frame" der wiederrum 3 divs enthält.

_system_dialog_title stellt den titel und die X-Schaltfläsche zur verfügung
_system_dialog_content stellt den text des dialogs zur verfügung
_system_dialog_buttons, wie der name vernuten lässt, die ok/cancel/ ABC buttons

weil ich ein fan von rund und symetrisch bin habe ich dem frame nun folgende eigeschaften verpasst: (auszug)

div#_system_dialog_frame {
 position: absolute;
 border-radius: 10px;
 background-color: white;
 overflow: hidden;
}

(die klasse z_dialog dient nur um sicherzugehen das der dialog IMMER das oberste element ist)

soweit klappt es auch.

das problem ist nun folgendes:

wenn ich in der titelleiste die eigenschaft border-radius nicht setze stehen die ecken des div felders über! Sie gehen über die gerundeten ecken des frames hinaus, obwohl ich dem frame gesagt habe; overflow: hidden

gebe ich der toitel leiste nun die eigenschaft border-radius: 10px und begrenze diese auf die beiden oberen ecken bekomme ich einen unschönen doppelten rand.

beim frame dann den oberen border zu entfernen und nur den von der titel leiste anzuzeigen führte auch nicht zu dem gewünschten ergebnis

Meine einzige idee wäre entweder auf bilder statt auf css zu setzen oder aber die titelleiste aus dem Frame zu entfernen und drüber zu psoitionieren, sodass diese die oberste Zeile bildet, was aber nicht so dem entspricht was ich vor hatte

Kann mir einer dieses verhalten erklären? Was hat das W3C bei so einer spezifikation gedacht?
Oder ist das feature einfach nur bisher unzureichend implementiert.

Wie sollte ich das umgehen?


Benutze btw. Chrome 21 (Chrome 20 ist übrigens als Zielsystem definiert)

 

[Turas]

Ich glaube Overflow bezieht sich nicht auf die Ecken, sondern nur auf den Inhalt. Du musst auch bei den Titel die Kanten an den entsprechenden Stellen abrunden mit border radius.

 

[mercsen]

wie ich bereits sagte, das führt zu einem unschönen doppeltem rand und stattdessen beim frame den oberen zu entfernen, entfernt auch zum teil die runden ecken!

wie sich das overflow verhält sehe ich ja, aber ich würde gerne verstehen wie man auf solche eine spezifikation kommt! Der Rahmen begrenzt das Element. Overflow: hidden sorgt dafür das alles was über den rahmen rausgeht versteckt wird, also logischerweise auch wenn die ecke gerundet ist, das passiert hier aber nicht >: (

 

[Daaron]

Die Spezifikationen haben halt hier und da Aussetzer, damit muss man leben lernen.
Den doppelten Rand kannst du ja auch ganz einfach verhindern: Lass deinen Frame komplett "nackt". Kein Rahmen, keine Radius-Deklaration, keine Hintergrundfarbe. Deklarier die entsprechenden Werte alle innerhalb der Kinder so wie es am Ende werden soll.

 

[mercsen]

sooo habe ich es ja gerade gemacht, war aber ja genau die sache die ich nicht machen wollte. einfach weil ich keine lust habe den bestehenden code umzubauen, dialoge werden nämlich stets nach bedarf angepasst im aussehen, farbe und layout. jetzt ists jedenfalls so und danke

Hoffe die ändern noch was an der spezifikation, oder vlt. ist es ja wirklich noch fehlerhaft implementiert, hatte bisher keine lust die spezifikation zu lesen

 

[Daaron]

Geh davon aus, dass sich nichts ändert. Schreib lieber so, dass es auf aktuellen Browsern gut aussieht.