Simples caixa, com 2 linhas (de cores diferentes) em baixo

[newboxters 0]

Olá pessoal, eu fiz um caixa bem simples, como uma célula de uma tabela e com 2 linhas no final de direrentes cores, eu fiz utilizando div's:

 

<div align="center"><div style="font-family:Verdana, Tahoma, Arial, Helvetica, sans-serif; width:180px; font-size:10px;"><div style="text-align:left; background-color:#636679; padding-top:5px; padding-left:4px; width:100%; height:24px; border-bottom:1px solid #38394D;"><a href="{linkdir:id}" target="_top"><font color="#FFFFFF">{titulo:manchete}</font></a></div><div style="text-align:left; background-color:#FFFFFF; padding:0px; width:100%; height:1px; border-top:1px solid #9C9EAB;"><p style="margin-top: -10; margin-bottom: -10"></div>

Até aí tudo certo, obtive o resultado que eu desejava visualizando no IE... porém logo que visualizei no firefox percebi que a célula ficou um pouco mais larga que as 2 linhas finais, e quando eu vou colocar uma após a outra, também no firefox fica com um espaço branco entre elas, por isso tentei até colocar margin de -10 como uma possível solução mas não deu certo.

 

Eu até pensei em fazer estilo menu, definindo um css antes, mas como não é um menu, é apenas pra exibir manchetes (títulos de news) resolvi utilizar divs mas pelo visto não vai ficar legal e o código ainda vai ficar mais pesado... então posso optar pelo desenvolvimento de um menu, mas minha dúvida é como eu poderia definir o código para no final de cada "célula" (bottom) inserir 2 linhas, cada uma de 1 px e de cores diferentes?

 

Enfim, só não consegui mesmo inserir estas duas linhas, que também tentei buscar sobre alguma informação referente, mas não encontrei... e também gostaria de confirmar se a melhor solução para fazer isso que eu pretendo é a utilização de um menu css... definindo os estilos do css e inserindo o código de exibição do menu do tipo:

 

<div id="title"><ul id="titlelist">MENU</ul></div>

<div id="navcontainer">

<ul id="navlist">

<a href="url"><span class="categfont">Categoria</span></a>

<a href="url">Link</a>

<a href="url">Link News</a>

Do resto tudo certo! http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

[Maujor 144]

Você fez uma grande confusão!

 

No seu código está:

 

<div align="center"> Em código standard não existe isto!

 

margin-top: -10; margin-bottom: -10

10 o quê? kilômetros, litros, toneladas ou o quê?

 

E aquele font-color? O que está fazendo no código standard?

 

Estude um pouquinho mais XHTML e CSS para começar a codificar.

 

--------------------------------------------------------------------------

 

Veja e estude o código para fazer o que você quer, usando uma só DIV:

 

div style="margin:0 auto;width:180px;height:24px;background:#ffc;text-align:left;font:10px/24px Verdana, Tahoma, Arial, Helvetica, sans-serif;border-bottom:1px solid #0f0;">
<a href="{linkdir:id}" target="_top" style="display:block;height:23px;border-bottom:1px solid #c30;padding-left:4px;">{titulo:manchete}</a>
</div>

 

Nota: Use CSS incorporado ou externo e não inline.

 

Usar lista neste caso, não é indicado

[newboxters 0]

Realmente, fiz uma imensa confusão, agradeço pelo "alerta", realmente vou me dedicar mais ao css dentro de algumas semanas, porque de momento, meu principal problema está sendo a falta de tempo. Mas com certeza irei me dedicar, já que estou utilizando cada vez mais.Obrigado.