✔ Fehldarstellung Runder Ecken

[cymbalta]

Hallo tutorials Gemeinde,

ich bastle mir grade ein eigenes Template zusammen. Da ich doch um einige Dinge gerne Runde Ecken haben möchte hab ich mir folgendes zusammen gestückelt:

index.php

<div class="box" style="position:absolute; left: 68px; top: 300px; width: 270px; height:auto;">
	 <div>
          <div>
               <div>
                    <div>
                         <div>
                              <div>
                                   <div>
                                        <div class="inhaltB4">
						<div align="center">
							<table width="auto" border="0">
								<tr>
								<td><jdoc:include type="modules" name="left"  style="xhtml" /></td>
								</tr>
							</table>
						</div>
                                        </div>
                                   </div>
                              </div>
                         </div>
                    </div>
               </div>
          </div>
     </div>	
</div>

meine css Datei sieht dann so aus:

div.box {background:url(../images/lm.png) repeat-y;}
div.box div {background:url(../images/rm.png) right repeat-y;}
div.box div div {background:url(../images/mo.png) repeat-x;}
div.box div div div {background:url(../images/mu.png) bottom repeat-x;}
div.box div div div div {background:url(../images/lo.png) left top no-repeat;}
div.box div div div div div {background:url(../images/ro.png) right top no-repeat;}
div.box div div div div div div {background:url(../images/lu.png) left bottom no-repeat;}
div.box div div div div div div div {background:url(../images/ru.png) right bottom no-repeat;}

div.inhaltB4 {padding: 10px 10px 15px 10px;}

und das Ergebnis ist dann das hier:

Meine Frage wie bekomme ich die falschen Grafiken (Roter Kreise)weg?


Danke schon mal für Eure Antworten

LG cymbalta

 

[Quaese]

Hi,

der Hintergrund des letzten DIVs in deiner CSS-Deklaration wird auf tiefer geschachtelte weitervererbt. Hier könntest du für DIVs tieferer Ebene angeben, dass kein Hintergrund angezeigt werden soll. Ausserdem musste ich die Höhe auf 100% setzen.

div.box div div div div div div div div{height: 100%; background: none;}

Ciao
Quaese

 

[cymbalta]

wow das es so einfach ist hätte ich nicht gedach danke

 

[franz007]

In CSS3 gibt es Runde Ecken.
http://www.css3.info/preview/rounded-border/

Dann könntest du deine Lösung als alternative für den IE und andere ältere Browser einsetzen und hättest bei den neueren schönere Ecken.

Gruß