Problem mit runden Ecken

J

julchen

Erfahrenes Mitglied
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
 
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
 
Maik hat gesagt.:
Da es sich bei den runden Ecken scheinbar um GIFs handelt, die außen eine transparente Farbe besitzen
Zum Vergrößern anklicken....
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:

CSS: 
/* 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:

CSS: 
/* 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:

CSS: 
/* 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
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück