Probleme mit DIVs und den Hintergrundfarben

[Georg]

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

[Engin]

Hi Georg,

background-color:white; ist schon mal sehr unpraktisch.
Benutze für Farbangaben in CSS die dazugehörigen Hexadezimal Farben.

Dann vieleicht noch ein !improtant, wirkt manchmal Wunder.

Grüße,
Engin
 GYRO

[Jonathan]

Hallo Engin,

background-color:white; ist schon mal sehr unpraktisch.

Wieso?

Dann vieleicht noch ein !improtant, wirkt manchmal Wunder.

Wenn schon !important. Das ist aber m.M.n. immer eher ne Notlösung.

Jonathan

[Engin]

Hi Jonathan,

background-color:white; ist schon mal sehr unpraktisch.

Wieso?

Frag mich doch nicht sowas, hab ich hier mehrmals so aufgeschnappt.  ;-)
Natürlich schreiben die Experten das schöner, ich kanns mir nur nicht merken.

!improtant, wirkt manchmal Wunder.

Wenn schon !important. Das ist aber m.M.n. immer eher ne Notlösung.

Ich habs aber auch mit diesem !improtant, das schreibe ich _jedesmal_ so, auch wenn ich es selbst mal brauche.

Aber das das eine Notlösung ist, würde ich so nicht sagen. Mit !improtant setzt man Prioritäten.
Kommt ja schon mal vor, das ein Browser eine anweisung nicht umsetzt,
 dann muss man dem Browser zu verstehen geben, das es halt !important ist.

Grüße,
Engin
 GYRO

[Steel]

Hey,

Aber das das eine Notlösung ist, würde ich so nicht sagen. Mit !improtant setzt man Prioritäten.
Kommt ja schon mal vor, das ein Browser eine anweisung nicht umsetzt,
dann muss man dem Browser zu verstehen geben, das es halt !important ist.

Na diesmal haste immerhin 1 von 2! :D

[Engin]

Hi Steel,

Mit !improtant setzt man Prioritäten.
dann muss man dem Browser zu verstehen geben, das es halt !important ist.

Na diesmal haste immerhin 1 von 2! :D

Und immerhin, du hast es gesehen. :-)

Dann sind wir ja beide in Richtung Richtig.   

Grüße,
Engin
 GYRO

[Jonathan]

Hallo Engin,

Aber das das eine Notlösung ist, würde ich so nicht sagen. Mit !improtant setzt man Prioritäten.

Ja schon, aber halt ziemlich dreist. Prioritäten setzt man IMHO besser durch sinnvollen einsatz von Klassen, IDs usw. Wenn man das ordentlich plant und umsetzt braucht man IMHO kein !important.

Kommt ja schon mal vor, das ein Browser eine anweisung nicht umsetzt,

Das kommt nicht einfach so schonmal vor sondern das liegt dann ganz einfach an schlechtem Code bzw. Konzept. Kein vernünftiger Browser ignoriert einfach willkürlich bestimmte CSS.Regeln.

Jonathan

[Engin]

Hi Jonathan,

Ja schon, aber halt ziemlich dreist. Prioritäten setzt man IMHO besser durch sinnvollen einsatz von Klassen, IDs usw. Wenn man das ordentlich plant und umsetzt braucht man IMHO kein !important.

Da ich noch ziemlich am anfang stehe kommt es bei mir schon mal vor, das ich !improtant brauche. ;-)
Aber von dreist kann man ja so nicht reden, man unterstreicht sein
verlangen, etwas bestimmtes angezeigt zu bekommen.
Wenn man eine bestimmte background color will, dann will man sie, und wenn
man da noch ein !improtant dran setzt um es zu Garantieren, passiert ja nichts weiter.

Kein vernünftiger Browser ignoriert einfach willkürlich bestimmte CSS.Regeln.

Jupp, und da sind wir beim Punkt, es geht in diesen Thread Primär um den IE[1].

Grüße,
Engin
 GYRO

[1] da muss ich ja jetzt nicht weiter drauf eingehen oder?   ;-)

[Jonathan]

Hallo Engin,

Da ich noch ziemlich am anfang stehe kommt es bei mir schon mal vor, das ich !improtant brauche. ;-)

Durchaus verständlich. Aber !important kann man eigentlich immer vermeiden.

Beispiel:

<ul class="navigation">  
<li class="selected">...</li>  
<li>...</li>  
<li>...</li>  
<li>...</li>  
</ul>

  
.navigation li {background:green;}  
.selected {background:red;}  

Wegen der Spezifität werden hier alle <li>s grün eingefärbt. Um das erste rot zu kriegen, kann man ein !important einfügen, es gibt aber auch "sanftere" Methoden. Z.B. das ersetzen von .selected durch #selected (und class durch id) oder besser indem man aus
.selected {...}
folgendes macht:
.navigation . selected {...}

Jupp, und da sind wir beim Punkt, es geht in diesen Thread Primär um den IE[1].

Selbst dem IE würde ich sowas im Normalfall nicht zutrauen.

Jonathan

[Engin]

Hi Jonathan,

.selected {...}
folgendes macht:
.navigation . selected {...}

Danke für den Tip, genau diese Geschichte bin ich grad am lernen, meine
ersten erfolge kann auf der von mir mitgeschleppten Seite begutäugeln. ;-)

Also lernen im Sinne von z.b. #inhalt p span oder #inhalt p img,
ist zwar ne kleinigkeit, aber selbst das will gelernt sein.

Selbst dem IE würde ich sowas im Normalfall nicht zutrauen.

Was ist im Zusammenhang mit dem IE schon normal? ;-)

Grüße,
Engin
 GYRO

[Kai345]

Grütze .. äh ... Grüße!

Also lernen im Sinne von z.b. #inhalt p span oder #inhalt p img,
ist zwar ne kleinigkeit, aber selbst das will gelernt sein.

In diesem Zusammenhang gibt es eine Erklärung der Spezifität und wie sie sich berechnet

Cü
Kai

[Engin]

Hi Kai345,

In diesem Zusammenhang gibt es eine Erklärung der Spezifität und wie sie sich berechnet

Danke für den Link, hatte heute mal Zeit mir das anzuschauen.
Anscheinend habe ich auf http://nimmet.de alles richtig gemacht,
ich brauchte kein einziges !improtant.  ;-))

Grüße,
Engin
 GYRO

[Georg]

Hi Georg,

background-color:white; ist schon mal sehr unpraktisch.
Benutze für Farbangaben in CSS die dazugehörigen Hexadezimal Farben.

Naja, am Problem selber ändert das ja nix, die Farben sind auch nur provisorisch in Textform eingetragen.

Dann vieleicht noch ein !improtant, wirkt manchmal Wunder.

Getestet und es funktioniert leider nicht, trotzdem danke.

Was ich vergessen hatte zu erwähnen war, dass auch z-index keine Lösung gebraucht hat.

Ciao Georg

[Engin]

Hi Georg,

Dann vieleicht noch ein !improtant, wirkt manchmal Wunder.

Getestet und es funktioniert leider nicht, trotzdem danke.

In deiner Datei hast du deine versuche anscheinend wieder gelöscht, ansonsten hätte
ich dir auch noch einen Refresh (strg+f5) um auch ein Cache problem ausschliessen zu können empfohlen.

Was ich vergessen hatte zu erwähnen war, dass auch z-index keine Lösung gebraucht hat.

Davon geh ich mal aus, das z-index keine lösung braucht.    ;-)

Grüße,
Engin
 GYRO

[Georg]

In deiner Datei hast du deine versuche anscheinend wieder gelöscht, ansonsten hätte
ich dir auch noch einen Refresh (strg+f5) um auch ein Cache problem ausschliessen zu können empfohlen.

Naja, das kann ich ausschließen, habs mehrmals, auch von freunden aufrufen lassen.

Davon geh ich mal aus, das z-index keine lösung braucht.    ;-)

Ich meine natürlich gebracht :)

Problem hat sich erledigt:

hasLayout wurde nicht aktiviert, durch

zoom:1;

im css wird der fehler behoben.

ciao Georg