IE / Problema com o line-height

Pikatxu

Pikatxu

Power Member
Bom, para variar, cá estou de volta de mais um problema IE/CSS. Desta vez resolvi melgar o pessoal a ver se alguem já passou por isto e me pode ajudar.

O problema:
cap.gif

IE
cap2.gif

Firefox

Como podem ver falta ali uma linha debaixo do "pulvinar" e nao percebo o porquê. A box é daquele tamanho e suportava bem mais texto.

As CSS's:
.texto {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size:0.625em;
font-style:normal;
font-weight:normal;
color:#000000;
line-height:1; /* adicionada porque o IE parece que por defeito isto vem a 2*/
}

.textholder{
margin:18px 18px 0px 14px;
width:156px;
height:112px;
float:left;
vertical-align:top;
text-align:left;
padding:0px;
border:#0000CC thin solid; /* para ver bem o fuckup */
}


Alguém?

Obrigado.
 
O line-height não tem que levar unidades?

Tipo line-height: 1em; ? Ou em px's ?
Tenta 'line-height: normal'; mas sinceramente parece-me e' q a caixa está a herdar padding..

Instalar o FireBug no Firefox.. Depois carregas com o botão do lado direito em cima da caixa e fazes 'Inspect Element'. Em baixo do lado direito vao-te aparecer todas as caracteristicas da caixa.. Logo ves se se passa alguma coisa de errado, com a qual o FF consegue lidar e o IE não..

Cumps

EDIT:
adiciona isto ao .texto :
' float: left; '

EDIT2:
Just for the record:
IE/Win continues to amaze us. This demo will describe a bug where the line-height is incorrectly rendered if the line contains a replaced element. Very simply, if the default line-height is changed to a larger value, the line spacing above and below any text line that contains a replaced element, such as a small emoticon, will be half of the spacing seen elsewhere in the text.

source:
http://www.positioniseverything.net/explorer/lineheightbug.html
 
Última edição:
Obrigado pelo reply hYpe.

Bom, ao que parece o problema todo era gerado pelo vertical-align na div. (textholder) Troquei as valigns para o text e voilá, problema resolvido, nem precisei de usar o line-height.

Edit: boa dica quanto ao firebug. Tinha instalado mas só para debug em JS. Nunca tinha prestando atenção ao inspect, excelente para ver as heranças! :)

Quanto ao line-height, pode levar 3 tipos de valores, numero só, em e px. ;) Numero só é o defeito para uma linha.
 
Inicie sessão ou registe-se para poder participar.
Back
Topo