✔ Container mit runden Ecken

[LuvShining]

Hallo, jetzt beschäftige ich mich mit der Darstellung meiner rechten Spalte. In dieser sollten Hinweise innerhalb von Boxen mit runden Ecken stehen.
Mein Lösungsansatz sieht nun wie folgt aus:

CSS

#anr { /* Linke Spalte - Überschrift */
width: 320px;
height: 31px;
padding-left: 25px;
padding-top: 5px;
background-image: url(bg_anr_top.jpg);
background-repeat: no-repeat;
}

#anr_content { /* Linke Spalte - Inhalt */
width: 320px;
padding: 5px 0 0 5px;
background-image: url(bg_anr.jpg);
background-repeat: repeat-y;
}

#anr_bottom { /* Linke Spalte - Abschluß */
width: 320px;
height: 7px;
background-image: url(bg_anr_bottom.jpg);
repeat: no-repeat;
}

HTML

<div id="anr">Hier steht die Überschrift</div>
<div id="anr_content">Hier kommt ein Dummy text rein. Hier kommt ein Dummy text rein. 
Hier kommt ein Dummy text rein. Hier kommt ein Dummy text rein. Hier kommt ein Dummy text 
rein. Hier kommt ein Dummy text rein.</div>
<div id="anr_bottom"></div>

Nun ist es so, dass unter #anr erst einmal ein min 4px dicker weisser Rand ist. Sowohl im IE als auch im FF.

Hinzu kommt, dass ich mir nicht wirklich sicher bin, ob mein Lösungsansatz wirklich der eleganteste ist oder ob es hierfür etwas besseres gibt. Ich möchte, dass es in jedem Browser problemlos läuft und vor allem auch, dass bei manueller Vergrößerung der Schrift auf meiner Seite durch den Leser diese Box nicht aus dem Rahmen springt.

Über eure Hilfe würde ich mich freuen.

Gruß
Nadine

 

[Maik]

Hi,

setze im Selektor #anr die padding-top-Angabe auf null und übergeb die Eigenschaft an ein eingebettetes Element:

#anr h1 { padding-top: 5px; }

<div id="anr">
        <h1>Hier steht die Überschrift</h1>
</div>

Alternativ kannst du dir mal Stu Nicholls' snazzy borders anschauen, die keine Grafiken für die runden Ecken benötigen.

 

[LuvShining]

Super Tipp! Danke, mit der Seite hat es erstklassig funktioniert!