Ecken werden "ausradiert" bei Verwendung von border-radius

[Degers]

Hallo,

Bei der Verwendung von border-radius verschwinden bei einem Element die unteren Ecken. An der Eigenschaft selber wird es nicht liegen- Sie wird per Klasse an alle abgerundeten Elemente vergeben. Außerdem tritt dieser Effekt am oberen Rand des Elements nicht auf.
Das sieht dann folgendermaßen aus:

Dieser Effekt ist in allen üblichen Browser nachzuvollziehen

Folgende Eigenschaften wirken auf das Element selbst:

width:50%;
float:left;
margin:1% 4% 1% 1%;
background: #E7F1FC;
border-radius: 7pt;
border: 2px solid #95ABC3;
font-family: "Tahoma,Times New Roman";
color: #262525;

Das umgebende Element, beides Div, weist folgende Eigenschaften auf:

background: #F5FAFF;
width: 83%;
padding: 0 1% 1% 1%;
margin: 0 0 0 15%;
font-family: "Tahoma,Times New Roman";
color: #262525;

Die Umgebung sieht von der Auszeichung her folgendermaßen aus:

<div id"mv_content">
<div id="mv_home_pinboard" class="border border-radius background"></div>
<div id="mv_home_ranking" class="border border-radius background"></div>
<div id="mv_home_results" class="border border-radius background"></div>
</div>

Die Inhalte habe ich der Übersicht halber mal weggelassen, sollten wir zu der Ansicht kommen, dass sie zur Problemlösung relevant sind, reiche ich sie natürlich nach.

Hat jemand eine Ahnung, womit das zusammenhängen könnte? Ich steh da gerade vollkommen auf dem Schlauch.

 

[newlord]

Ich beziehe mich jetzt nur mal auf den Anhang den du gepostet hast.

Soweit wie ich das sehen kann, ist das ein Formular (evtl. auch das innenliegende Fieldset) mit einem Background. Dieses überlagert wahrscheinlich deine DIV's. Entweder kannst du den weiteren Kind-Elementen noch einen border-radius verpassen oder du erhöhst die Abstände (margin bzw. padding) der Elemente zueinander.

 

[Degers]

Tatsache, da war wirklich kein Abstand mehr. Es sah zwar wegen der Farben nicht so aus, als würde etwas überdeckt werden, dem Formular kurz eine border gegeben sah man, wie das eckige Formular in die Rundung des Divs lief.
Beide beschriebenen Lösungen funktionieren, da an der Stelle jeder Pixel zählt habe ich mich für die Variante mit dem border-radius für das Formular entschieden.
Danke!

 

[jasonback]

Fast das gleiche Problem....allerdings klappt die vorgeschlagene Lösung nicht.

Hallo,
ich habe leider ein relativ ähnliches Problem das ich leider mit der vorgeschlagenen Lösung nicht beheben kann. Es handelt sich hierbei um die unteren Ecken eines Dropdown Menüs. Das Problem tritt nur dann auf, wenn im aufgeklappten Zustand sich unter den Menüpunkten ein Flash Objekt befindet.

Ich habe ein Beispiel Code worin das Problem simuliert wird und dieses Ergebnis herauskommt:

Den vollständigen Code kann ich natürlich auch posten bei Bedarf. Ich vermute aber das dieser Part hier ausreicht:

.nav ul li:hover > ul {
        position:absolute;
        left:0px;
        top:39px;
}
.nav ul li ul {
        position:absolute;
        left:-9999999px;
        top:-9999999px;
        display:block;
        border-radius:3px;
        background:#e8f4fb;
        width:155px;
        height:auto;
        list-style:none;
        margin:0px;
        padding:2px 0px 2px 0px;
        overflow:hidden;
        border:1px solid #ccc;
}

Ich versuche schon seit Tagen das Problem zu lösen und bin jetzt auf euch gestossen. Hoffe, dass Ihr mir weiterhelfen könnt. Wie von euch vorgeschlagen, habe ich die Abstände erhöht bzw. border-radius Eigenschaften eingefügt. Aber es klappt trotzdem nicht.:?

 

[newlord]

@jasonback: Versuch mal folgendes in .nav ul li ul einzufügen:

z-index:999;

Möglicherweise liegt das Flash-Objekt auf der gleichen Ebene wie eben deine UL's.

 

[jasonback]

Problem gelöst.

@jasonback: Versuch mal folgendes in .nav ul li ul einzufügen:

z-index:999;

Danke für die Antwort. Mit z-index habe ich bereits versucht das ganze auf die oberste Ebene zu hieven. Hat alles nicht geklappt. Das Problem resultiere deshalb weil Flash Objekte standardmäßig auf der allerobersten Ebene plaziert werden. Jetzt habe ich die Lösung dazu gefunden. Der Parameterwert wmode muss auf transparent umgestellt werden.

Also einfach nur diesen Code ins Object Tag einfügen:


<param name="wmode" value="transparent">
Vielen Dank und ein schönes Wochenende.