Georg: Probleme mit DIVs und den Hintergrundfarben

Beitrag lesen

Hi Leute,

ich hab ein Problem (warum sonst sollte ich auch hier ein neues Thema starten). Ich such schon seit Stunden, aber ich hab noch ein Thema gefunden, das mein Problem im mindesten löst.

Num zum Problem:

Ich nutze als Grundlage YAML (www.yaml.de), ich weiß nicht, obs von Bedeutung ist, aber sicher ist sicher. Darüber hinaus nutze ich ich "Runde-Ecken"-System, das ohne Grafiken funktioniert.

Und schon sind wir beim Problem:

Innerhalb dieser runden Boxen liegt ein DIV, das wiederum zwei weiter DIVS enthält, die einmal die Überschrift und einmal den Inhalt enthalten.

Zu sehen hier: www.tip-o-mat.de

Im Opera gibts da keine Probleme, nur der IE 6 macht wieder Probleme, er nimmt die Farbe des "Hintergrund"-Divs und ignoriert die Hintergrundfarben des Überschriften- und des Inhaltsdivs, die Schrift und der Inhalt selber wird aber korrekt dargestellt.

Zur Sicherheit mal den CSS-Code:

rundeboxen.css

#container {background:#d8d8ee; width:600px; margin:15px; padding:20px;}
.xsnazzy h1, .xsnazzy h2, .xsnazzy p {margin:0 10px; letter-spacing:1px;}
.xsnazzy h1 {font-size:2.5em; color:#fc0;}
.xsnazzy h2 {font-size:2em; color:#234; border:0;}
.xsnazzy p {padding-bottom:0.5em; color:#eee;}
.xsnazzy h2 {padding-top:0.5em; padding-left:10px;}
.xsnazzy {background: transparent; margin:1em;}

.xsnazzy em {display:block; width:0; height:0; color:#d8d8ee; overflow:hidden; border-top:12px solid green; border-left:12px dotted transparent; border-right:12px dotted transparent; margin-left:50px;}
/* hack for IE5.5 */
* html .xsnazzy em {width:24px; height:12px; w\idth:0; hei\ght:0;}
.xsnazzy span {display:block; width:0; height:0; color:green; overflow:hidden; border-top:10px solid #fff; border-left:10px dotted transparent; border-right:10px dotted transparent; margin-left:52px; margin-top:-15px;}
* html .xsnazzy span {width:20px; height:10px; w\idth:0; hei\ght:0;}

.xb1, .xb2, .xb3, .xb4, .xb5, .xb6, .xb7 {display:block; overflow:hidden; font-size:0;}
.xb1, .xb2, .xb3, .xb4, .xb5, .xb6 {height:1px;}
.xb4, .xb5, .xb6, .xb7 {background:#ccc; border-left:1px solid green; border-right:1px solid green;}

.xb1 {margin:0 8px; background:green;}
.xb2 {margin:0 6px; background:green;}
.xb3 {margin:0 4px; background:green;}
.xb4 {margin:0 3px; background:green; border-width:0 5px;}

.xb5 {margin:0 2px; background:green; border-width:0 4px;}
.xb6 {margin:0 2px; background:green; border-width:0 3px;}
.xb7 {margin:0 1px; background:green; border-width:0 3px; height:2px;}

.xboxcontent {display:block; background:green; border:3px solid green; border-width:0 3px;}

.xboxcontent table {margin:0;}

own.css

.rundebox_header{
 background-color:green;
 text-align:center;
 color:white;
}

.rundebox{
 background-color:white;
}

Und der HTML-Code dazu (eine Box dürfte reichen):

<div class="xsnazzy">
<b class="xb1"></b><b class="xb2"></b><b class="xb3"></b><b class="xb4"></b><b class="xb5"></b><b class="xb6"></b><b class="xb7"></b>
<div class="xboxcontent">
<div class="rundebox_header">
Login
</div>
<div class="rundebox">
Hallo Nudelholz,<br /><br />
du liegst mit <b>4 Punkten</b><br />
auf dem <b>1.</b> Platz
</div>
</div>

So, ich hoffe ich konnte mein Problem ausreichen schildern, sollte ich etwas ganz offensichtliches Übersehen haben, dann haut mich.

Vielen Dank fürs Grübeln

Ciao Georg