Problemas com borda

[rafaeldorazio 2]

A borda com efeito hover está sobrepondo com a borda default

 

    .listaContato { height: 28px; line-height: 28px; padding-left: 17px; font-family: Segoe UI, Tahoma, Verdana, Arabic Transparent; font-size: 11px; }    
   .listaContato:first-child:nth-child(1) { border: 1px solid #DFDFDF; }
   .listaContato:not(:first-child){ border: 1px solid #DFDFDF; border-top: none; }
   .listaContato:first-child:nth-child(1):hover { border: 1px solid #BBD8FB; background-color: #F7F3FD; cursor: pointer; }   
   .listaContato:not(:first-child):hover { border: 1px solid #BBD8FB; background-color: #F7F3FD; cursor: pointer;  }  

 

Como eu faço para nao ter essa sobreposição ?

[William Bruno 1501]

como assim 'sobrepondo'?

 

na verdade, oque acontece é uma troca.

sai a default, e entra a do estado :hover no lugar

 

poste uma imagem do efeito que você deseja.

[rafaeldorazio 2]

Este exemplo

http://imageshack.us/photo/my-images/132/semttuloikb.jpg/

é um exemplo errado, pois parece que a borda top está com 2px mas na verdade está com 1px.

 

como deveria ficar é assim

http://imageshack.us/photo/my-images/189/semttulo2ng.jpg/

para qualquer hover !

[William Bruno 1501]

Então no caso temos elementos diferentes, por isso a borda duplicada.

 

analisando melhor o teu css, dessa forma que você implementou você não vai conseguir o efeito.

muito complicado ter que 'retirar e por' bordas..

 

pq você não trabalhou com uma table ? ai você poderia contar com o border-collapse;

[rafaeldorazio 2]

como iria funcionar com border collapse ?

[William Bruno 1501]

Eu pensei em algo assim:

<style type="text/css">
table {
border-collapse: collapse;
}
td{
border: 1px solid #000;
width: 200px;
}
td:hover {
border-color: #f00;
}
</style>
<table>
<tbody>
	<tr>
		<td>Nome</td>
	</tr>
	<tr>
		<td>Nome</td>
	</tr>
	<tr>
		<td>Nome</td>
	</tr>
</tbody>
</table>