Hallo,
ich hab eine Box erstellt mit runden Ecken. Nun hab ich das Problem, dass der Hintergrund der Box im unteren Bereich rausschaut. Der obere Bereich wird korrekt dargestellt.

Ich find den Fehler in meiner css nicht.

Gruss
Julchen

Zitat von julchen

Ich find den Fehler in meiner css nicht.

Wir so auch nicht

mfg Maik

Wie wäre es wenn du mal den Code postest den du Verwendest.. also den HTML-Container und den CSS-Sektor.

Sorry,
hier der Link:
http://www.praxis-huntscha.de/index_test.php

Es geht um den rechten News Bereich.

Gruss
Julchen

Da es sich bei den runden Ecken scheinbar um GIFs handelt, die außen eine transparente Farbe besitzen, mußt du die derzeit deklarierte Hintergrundfarbe für die Mutterbox #box_round_home stattdessen für eine Nachfolgebox verwenden, die einen den Grafikdimensionen entsprechenden Außenabstand erhält, damit sein Hintergrund nicht mit den transparenten Flächen der Grafiken in Berührung kommt.

In diesem erforderlichen Konstrukt wäre es dann ratsam, die <span>-Elemente durch <div>-Elemente zu ersetzen, und diese ineinander zu verschachteln.

mfg Maik

Zitat von Maik

Da es sich bei den runden Ecken scheinbar um GIFs handelt, die außen eine transparente Farbe besitzen

Ich revidiere ganz fix meine voreilig getroffene Behauptung bzgl. der scheinbar transparenten GIFs, bevor ich hier noch wegen Falschaussage vor den Kadi gezogen werde

Die Ursache findet sich in den gruppierten Selektoren deines "IE6-Fix", der ausschließlich im erstgenannten Selektor mit dem "Star-HTML-Hack" eine Übereinstimmung hat, die nachfolgenden Selektoren aber überhaupt nicht, und somit werden sie auch von den Browsern interpretiert, die überhaupt nicht auf den Namen "IE6" hören, und die betroffenen Elemente von ihnen entsprechend drei Pixel breiter und höher dargestellt werden, wie sie eigentlich sollten.

mfg Maik

So war die Fehlerkorrektur aber nicht zu verstehen:

Code css:

1 2 3 4 5 6 7

/* IE6 Fix */ * html span.box-top-right, span.box-bottom-left, span.box-bottom-right { width: 16px; /* ehemals width:19px */ height: 16px;  /* ehemals width:19px */ margin-bottom: -1px; } /* IE6 Fix END */

sondern vielmehr so:

Code css:

1 2 3 4 5 6 7

/* IE6 Fix */ * html span.box-top-right, * html span.box-bottom-left, * html span.box-bottom-right { width: 19px; height: 19px; margin-bottom: -1px; } /* IE6 Fix END */

Zur Erläuterung: Jedem einzelnen der drei Selektoren, die hier mittels der Kommas gruppiert sind (siehe hierzu auch den Abschnitt Gruppierung im Kapitel zu den Selektoren), muß die Syntax "* html" des "Star-HTML-Hacks" vorne angestellt werden, ansonsten wird, wie bei dir geschehen, nur der erste Selektor, der sie besitzt, als solches von den Browsern behandelt (IE5/IE6 (Win) akzeptiert diese Notation, alle anderen Browser ignorieren sie *), die beiden nachfolgenden Selektoren jedoch von allen Browsern akzeptiert, und so die drei enthaltenden Regeln auf alle <span>-Elemente im Dokumentbaum angewendet, die die Klassenbezeichner box-bottom-left u. box-bottom-right besitzen.

* Wenn das HTML-Dokument den Browsern nicht im standardkonformen Modus, sondern im Quirksmodus übergeben wird, interpretieren auch IE7 und IE8 den "Star-HTML-Hack".

Man könnte ja auf die Idee kommen, und den "Star-HTML-Hack" so interpretieren, dass seine Notation zu Beginn der Zeile automatisch alles einschließt, was nachfolgend bis zur öffnenden geschweiften {-Klammer genannt wird. Dem ist aber nicht so, denn das Komma zwischen zwei Selektoren trennt sie strikt voneinander.

Mit dieser ebenso möglichen Schreibweise wird hier der Zusammenhang vielleicht etwas deutlicher:

Code css:

1 2 3 4 5 6 7 8 9

/* IE6 Fix */ * html span.box-top-right, * html span.box-bottom-left, * html span.box-bottom-right { width: 19px; height: 19px; margin-bottom: -1px; } /* IE6 Fix END */

mfg Maik

Hmm..., liegt dein Projekt "Runde Ecken" seither auf Eis, oder warum erhalte ich hier keine Antwort mehr?

mfg Maik