[Resolvido] Tamanho do elemento a

[maiden]

Boas,

Tenho uma barra de menu horizontal, na qual utilizo como background uma imagem de 5x33, repetida no eixo do x (repeat-x). Nessa barra tenho uma lista não ordenada (<ul>), com display: inline;, cujos itens são os links para as diferentes páginas do projecto. Depois tenho outra imagem de 5x33 que representa o link no estado hover, repetindo-se também no eixo do x. O problema é que apesar de a imagem ser repetida no eixo do x, esta cobre apenas a área de texto em vez de ocupar os 33px de altura. Fica algo deste género:

quando o meu objectivo era que a imagem mostrada no hover do link tivesse os 33px, de forma a tocar na barra azul cá de baixo.

Já defini uma altura para o a, mas não resulta. Inclusive já tentei definir a imagem como background do <li> e utilizar a pseudo-class hover para este elemento, mas o resultado é o mesmo.

O código CSS que tenho para esta barra é o seguinte

#topo #nav {
background: #87aade url('img/nav_back.png') repeat-x;
width: 1024px;
height: 37px;
text-transform: lowercase;
font: bold 16px Verdana;
}

#topo #nav ul li {
display: inline;
height: 33px;
}

#topo #nav ul li a {
color: #fff;
height: 33px;
}

#topo #nav ul li a:hover {
background: url('img/nav_high.png') repeat-x;
height: 33px;
}

Alguém me dá uma ajuda?

Cumps,

[Battousai]

no a poe display block, deve ficar resolvido

[maiden]

Boas Battousai,

Também já tinha tentado isso, mas perdem o inline, ou seja, fica com este aspecto:

Obrigado pela atenção.

Cumps,

[Battousai]

No Li em vez de meteres display:inline, poe display:block;float:left

depois é só dar margens ou paddings, como quiseres.

[maiden]

É isso mesmo, obrigadão 😛

Cumps,