Hallo KonRad

Weil die Boxen (divs) abgerundete Ecken haben. Das erreiche ich durch die Pseudoklassen :before und :after. Die Ecken-Bilder haben dabei das Format 16*16. Damit der Text nun nicht in die Ecken hineinragt, wird ein Abstand von 16px gehalten.

Das hatte ich mir gedacht, war mir aber nicht sicher.

Darüber: Text (<p>). Darunter nichts -- zumindest nicht im selben Kasten. Ich überlege im Moment, ob hier die Trennlinie überhaupt sinnvoll ist -- wenn ich sie durch einen border-bottom des letzten <p> ersetze, fällt auch der ganze Ärger weg.

Genau darauf wollte ich hinaus, da du dies hr mittels "height: 0;" sowieso
ausblendest und stattdessen den border-top anzeigst.
Ich wollte das aber ohne diese Information nicht vorschlagen.

Wenn die hr für Browser ohne CSS vorhanden sein soll, könnte diese auch ohne
border-top drin bleiben.

Es ist die *einzige* CSS-Lösung.

Die einzige rein-CSS-Lösung, die leider nicht im IE funktioniert.
Eine Möglichkeit mit ein paar zusätzlichen Elementen wäre
http://aktuell.de.selfhtml.org/tippstricks/css/runde_ecken/index.htm.

Auf Wiederlesen
Detlef

Hi,

(ich verwende :before und :after, um dem div runde Ecken zu verpassen).
Ob das die optimale Lösung ist?
Es ist die *einzige* CSS-Lösung.

Nein, die wirkliche CSS-Lösung ist m.E. border-radius:16px; (CSS 3 Module: Border, Working Draft http://www.w3.org/TR/css3-border/#the-border-radius).
Wird nur noch von keinem Browser direkt unterstützt.

Aber: Mozilla unterstützt -moz-border-radius

cu,
Andreas

Hallo Konrad

... ich wäre allerdings trotzdem an einer Lösung des Problems interessiert, wenn jemand eine weiß.

Es ist für mich nicht hachvollziehbar, warum der Opera 7.23 nicht dazu zu
überreden ist, die hr zu zentrieren, wobei der IE 6.0 dies auch nicht
wirklich tut.
Eine Lösung, die ich allerdings nicht unbedingt für gut halte und auch nur
in IE 6.0, Mozilla 1.6 und Opera 7.23 getestet habe, wäre:

#nav {
    width: 20%;
}

.lightbox {
    background: #DCFE79;
    padding: 16px;
}

.lightbox:before {
    background: transparent url('pics/light-green-tr.png') scroll no-repeat top right;
    content: url('pics/light-green-tl.png');
    display: block;
    font-size: 1px;
    height: 16px;
    padding: 0;
    margin:-16px -16px 0 -16px;
}

.lightbox:after {
    background: transparent url('pics/light-green-br.png') scroll no-repeat top right ;
    content: url('pics/light-green-bl.png');
    display: block;
    font-size: 1px;
    height: 16px;
    padding: 0;
    margin:0 -16px -16px -16px;
}

hr {
    border: none;
    border-top: 1px solid Silver;
    width: 100%;
    height: 0;
    margin: 0;
    padding: 0;
}

p {
    margin: 1em 0;
    text-align: center;
}

Auf Wiederlesen
Detlef