Problema com borda no :hover

[rafaeldorazio 2]

Quando há o :hover o texto se movimenta, pq?

 

 

        <style type="text/css">
		#scrollTest {
			width: 400px;
			height: 285px;
			overflow: auto;			
			background-color: #000;
			border: 1px solid #D6D6D6;
			color: #333;
		}

		.container
		{
		    height: 32px;
		    line-height: 32px;
               _font-family: Tahoma, Sans-Serif;
               font-family: Courier New, Monospace;
               font-size: 11px;
		}

		#scrollTest .container:hover
		{
                            border: 1px solid #CCC;
		}
	</style>


<div id="scrollTest">

       <table>
           <tr>
	        <td class="container">
		        Rafael Fernandes D Orazio
	        </td>
           </tr>
           <tr>
	        <td class="container">
		        Meire Fernandes D Orazio
               </td>
	    </tr>
           <tr>
               <td class="container">
		        Eliana Fernandes Malfarage
               </td>
           </tr>
       </table>

</div>

[William Bruno 1501]

pq você está adicionando uma largura e altura q não existia no box model antes.

 

faça assim, mais ou menos uma borda invisivel:

.container{
  border: 1px solid #fff;
}

[Guilherman 1]

Mas você só mudou a cor, isso resolveria?

[William Bruno 1501]

eu não mudei a cor simplesmente, eu apliquei uma cor para ficar "tecnicamente transparent" no objeto em estado normal.

 

assim no estado :hover, ele não estaria ganhando nada além doq ele já tem.

Para saber "se resolve", faça o teste :lol: