Box mit runden Ecken mit DIVs

[Rainer]

Hi!

Ich werd noch verrückt, ich will mich jetzt auch mal den "CSS-Layouts" versuchen und die "bösen" Tabellen-Layouts hinter mich lassen. Aber ich häng scho bei so einfachen Sachen...

Ich kenn die "Box mit runden Ecken"-Lösung von Selfhtml (http://aktuell.de.selfhtml.org/artikel/css/runde_ecken/), aber mal ehrlich: da hab ich zwar schönen und wenig Code, dafür aber vier dicke Bilder. Das stört mich, weil eigentlich brauch ich ja nur die vier kleinen Ecken, spart Ladezeit und Traffic.

Also will ichs wie mit ner Tabelle lösen, jedoch funktionierts weder im FF noch IE. Der FF ignoriert den linken und rechten Rand und zieht den Border unten ganz durch. Beim IE sieht das ganze fast richtig aus, nur dass der irgendwo Abstände herkriegt, obwohl ich margin und padding auf 0 hab.

Ich peil das ganze ned wirklich, wär super wenn mir jemand helfen könnt.

Der Code:

<style type="text/css">
div.box_top-left { background: url("gfx/box_top-left.gif") top left no-repeat; width: 11px; height: 11px; float: left;}
div.box_top-right { background: url("gfx/box_top-right.gif") top right no-repeat; width: 11px; height: 11px; float: right;}
div.box_bottom-left { background: url("gfx/box_bottom-left.gif") bottom left no-repeat; width: 11px; height: 11px; float: left;}
div.box_bottom-right { background: url("gfx/box_bottom-right.gif") bottom right no-repeat; width: 11px; height: 11px; float: right;}
div.box_top { border-top: 1px solid #000000; background-color: #e4e4e4; height: 11px;}
div.box_left { border-left: 1px solid #000000; background-color: #e4e4e4; width: 11px; float: left; }
div.box_bottom { border-bottom: 1px solid #000000; background-color: #e4e4e4; height: 11px;}
div.box_right { border-right: 1px solid #000000; background-color: #e4e4e4; width: 11px; float: right;}
div.box_content { background-color: #e4e4e4; padding: 5px;}
#test div {margin: 0; padding: 0;}
</style>

<div id="test" style="width: 500px; margin-left: 50px">
<div class="box_top-left"></div><div class="box_top-right"></div><div class="box_top"></div>
<div class="box_left"></div><div class="box_right"></div><div class="box_content">
Hier ist der wundersch&ouml;ne Inhalt dieser Box!
</div>
<div class="box_bottom-left"></div><div class="box_bottom-right"></div><div class="box_bottom"></div>
</div>

merci!
Greets
Rainer