Grauer Rand durch border-radius?

[Fuu]

Hallo Leute,
ich baue gerade eine Seite mit HTML und CSS und habe ein kleines Problem bei dem ich den Fehler nicht finde bzw garnicht weiß ob das überhaupt ein Fehler ist oder ich damit leben muss.
Ich hab ein DIV als Kontainer der mit runden Ecken (für alle Browser die das können) ausgestattet ist. in diesem Div sind noch einige unterschiedliche Divs und eigentlich läuft alles so wie es soll.
allerdings hab ich im untersten Div ein img als Background eingefügt (weil ich es anders nicht mittig bekommen habe) dieses ist zentriert und unten.
nun habe ich aber einen grauen rand unten dort wo der border-radius anfängt. hab ich einen fehler gemacht oder ist das normal? wird durch border-radius etwas vom DIV entfernt oder hinzugefügt?

ich hab als Anhang eine kleine Zeichnung wie ich das ganze meine und wo genau das Problem liegt.

ich hoffe das mir jemand von Euch helfen kann

Grüße Fuu

 

[Maik]

Hi,

ohne das jetzt live gesehen zu haben, versuch es mal mit display:block für das <img>-Element.

Gut möglich, dass da vom Browser "Whitespaces" im HTML-Code interpretiert werden.

mfg Maik

 

[Fuu]

das img steckt ja einfach nur in dem div.
soll ich nun dem div ein display:block geben oder für das img nochmal eine eigene id machen?

 

[Maik]

Von einem <div> hab ich hier nichts erwähnt.

Besitzt das umschliessende DIV einen ID- oder Klassenbezeichner?

#box img { display:block; }

mfg Maik

 

[Fuu]

das div in dem das img als Background liegt besitzt eine Klasse mit der es positioniert ist

ich hab nochmal 2 screens gemacht damit es deutlicher wird

bsp_1: so soll es aussehen
bsp_2: so sieht es aus

 

[Maik]

Also entnehme ich deinem Post, dass mein Vorschlag keine Besserung zu Tage gefördert hat.

Steht das Ganze irgendwo online zur Verfügung?

mfg Maik

 

[Fuu]

naja nach deiner beschreibung weiß ich einfach nicht WO ich mit deinem neuen Codeschnipsel hinsoll

html:

.
.
<div class="content"></div>
.

css:

.content
{	
	background-image:url(../Bilder/Newsletter_09-09_09.jpg);
	background-position:center bottom;
	background-repeat: no-repeat;
	height:380px;				 
	margin: 0px auto;
}

nein gibt leider kein beispiel online

 

[Maik]

Sorry, hab das so verstanden, dass du ein <img>-Element verwendest :-(

Also alles nochmal zurück zu "Start".

Versteh ich das dann in deiner letzten Skizze richtig, dass das Hintergrundbild von content den Rahmen der umschliessenden Box überdecken soll?

Das wäre so technisch nicht möglich.

mfg Maik

 

[Fuu]

ja genauso dachte ich mir das

mhh das ist schlecht. gibts da irgendein trick um son häßlichen grauen rahmen zu umgehen?

 

[Maik]

Jo, so einen Trick gibt es da schon: Den unteren Rahmen einfach mittels border-bottom:0 ausblenden.

Oder die runden Ecken alternativ mit einer Hintergrundgrafik erzeugen (wie z.B. http://www.schillmania.com/projects/dialog2/), die sich dann auch vom Inhalt überdecken lässt.

mfg Maik