Paddingwert greift unterschiedlich bei zwei Elementen

[joogl]

Hallo Community,

ich wende mich mit einem Problem, bei dem ich nicht weiterweiß an euch.
Ich will mit div-Containern einen Rahmen mit runden Ecken machen.
Dies funktioniert auch soweit super.
Allerdings sind meine Rahmen jetzt leicht durchsichtig. Und da muss ich mit Padding diese so verschieben, dass die Ecken nicht übereinanderliegen.
Allerdings greift ein Padding Wert auf der rechten Seite anders, als bei der linken. Könnt ihr mir sagen wieso?

hier mein Quelltext und das Bild dazu.

  
div.pospopular  {  
	background: transparent url(images/cbox_t.png)  scroll no-repeat top left ;  
	width: 179px;  
	padding-top:8px;  
}  
  
div.pospopular div{  
	background: transparent url(images/cbox_b.png) scroll no-repeat bottom right;  
	padding-bottom:4px;  
}  
  
div.pospopular div div{  
	background: transparent url(images/cbox_l.png) scroll no-repeat top left;  
}  
  
div.pospopular div div div {  
	background: transparent url(images/cbox_r.png) scroll no-repeat top right;  
}  

[Gunnar Bittersmann]

@@joogl:

nuqneH

hier mein Quelltext

Und was soll man mit einem Stylesheet ohne zugehöriges Markup anfangen?

Außerdem wäre ein Online-Beispiel besser.

Was sich sagen lässt:

cbox_t.png, cbox_b.png, cbox_l.png, cbox_r.png: Da ist mindestens ein Bild zu viel. Da die Box eine feste Breite hat, können linker und rechter Rahmen in einem Bild sein. Auch oberen und unteren könnte man in ein Bild tun (CSS-Sprites).

Für moderne Browser sind aber weder für runde Ecken noch für Schatten Bilder nötig, CSS 3 genügt. Schatteneffekte bekommt man im IE mit dessen proprietärem Filter hin; auf runde Ecken muss man dann halt in IE und Opera (noch) verzichten, davon kippt in China kein Reissack um.

Qapla'

[joogl]

Hallo,

sorry. hier ist das Online Beispiel:
Link

Danke für die anderen Hinweise.
Aber es kann doch normaler Weise nicht sein, dass 2 Elemente unterschiedlich auf einen Padding Wert reagieren oder?

Gruß

@@joogl:

nuqneH

hier mein Quelltext

Und was soll man mit einem Stylesheet ohne zugehöriges Markup anfangen?

Außerdem wäre ein Online-Beispiel besser.

Was sich sagen lässt:

cbox_t.png, cbox_b.png, cbox_l.png, cbox_r.png: Da ist mindestens ein Bild zu viel. Da die Box eine feste Breite hat, können linker und rechter Rahmen in einem Bild sein. Auch oberen und unteren könnte man in ein Bild tun (CSS-Sprites).

Für moderne Browser sind aber weder für runde Ecken noch für Schatten Bilder nötig, CSS 3 genügt. Schatteneffekte bekommt man im IE mit dessen proprietärem Filter hin; auf runde Ecken muss man dann halt in IE und Opera (noch) verzichten, davon kippt in China kein Reissack um.

Qapla'

[Gunnar Bittersmann]

@@joogl:

nuqneH

Aber es kann doch normaler Weise nicht sein, dass 2 Elemente unterschiedlich auf einen Padding Wert reagieren oder?

Tun sie auch nicht. Beachte: „Beim Box-Modell bezieht sich der ‚Hintergrund‘ auf den Hintergrund der Inhalts- und Polsterbereiche (padding).“ [CSS2 §14.2]

Hast du dir das Ganze eigentlich mal in einem vernünftigen Browser angesehen oder nur im IE?

Qapla'

PS: Bitte kein TOFU!

[joogl]

ja mit Firefox ist es nicht wirklich besser.

Hast du auch einen Vorschlag für mich, was ich machen kann, damit es nicht mehr so ist?

[Gunnar Bittersmann]

@@joogl:

nuqneH

Hast du auch einen Vorschlag für mich, was ich machen kann, damit es nicht mehr so ist?

Ja (Letzter Absatz).

Qapla'

[joogl]

hmm...das ist dann auch nicht das was ich will...
Aber wenn es sonst keine Möglichkeit gibt. Schade.

trotzdem Danke

Gruß