Erro em posicionamento de BG

[yourwebmaker 0]

Bom pessoal... estou com um probleminha aqui que está me enchendo o saco já....

 

eu estou trabalhando com alguns boxes em CSS.. com cantos arredondados... o código é o seguinte

 

CSS:

#content_top {background: url(../images/content_top.gif) #F6F9F8 no-repeat right top; height:10px;}#content {padding: 10px 17px 17px 17px; background:#F6F9F8; border-right:#DFE8E8 solid 1px; margin:0;}#content_bottom{background: url(../images/content_bottom.gif) #F6F9F8 no-repeat right bottom; height:10px;}

HTML:

<div id="content_top"></div><div id="content">Conteúdo</div><div id="content_bottom"></div>

como vocês podem ver... estou usando imagens para mostrar os cantos arredondados das imagens... só que elas ficam posicionadas de forma errada...

 

assim...

 

 

quem puder me ajudar aí... ficaria muito grato

[Paulo de Tarso F. M. 24]

Olá meu caro yourwebmaker. Isso acontece porque é assim: você tem duas divs sem conteúdo nenhum, certo? Só que para o browser ele tem pelo menos 1 espaço em branco (& nbsp;)... E o browser também tem o tamanho da fonte padrão, que normalmente é superior a 12px, mais ou menos... Então, o que acontece é que, mesmo que você especificou uma altura (height) de 10px para sua div, ele acaba "ultrapassando" o limite especificado por causa desse espaço em branco existente na div (mesmo que você não coloque nada entre as tags <div></div>, o que também não é recomendável), ele acaba interpretando que ele tem, como disse, pelo menos 1 espaço em branco)... Então, para corrigir isso, adicione ao seu CSS:

#content_top {

background: url(../images/content_top.gif) #F6F9F8 no-repeat right top;

height:10px;

overflow: hidden;

}

#content {

padding: 10px 17px 17px 17px;

background:#F6F9F8;

border-right:#DFE8E8 solid 1px;

margin:0;

}

#content_bottom{

background: url(../images/content_bottom.gif) #F6F9F8 no-repeat right bottom;

height:10px;

overflow: hidden;

}

Compreendeu? Bom, qualquer coisa, por favor, volte a postar! Abraço!