[Resolvido] Erro ao renderizar tag span no IE7

[Thiago Nunes 0]

Olá amigos,

 

Preciso finalizar um trabalho, mas estou com um problema aqui com o IE7

 

http://migre.me/a2fFn

O texto destacado na imagem acima está dentro de uma tag span, no FF, IE8 e IE9 está

sendo renderizado perfeitamente, porém olhem o que o corre no IE7:

 

http://migre.me/a2g7h

 

 

Aqui está o HTML:

 

 

<section class="empregabilidade">
   <p class="left">
       <img src="images/icones-1.png" alt="">
         <span class="right">
             Empregabilidade<br>das PcD
             <a class="leiamais2" href="#">
                 LEIA MAIS
             </a>
         </span>                           
    </p>
   <p class="right">
       O principal papel social da UNILEHU é trabalhar em prol da
       empregabilidade da pessoa com deficiência, através de atendimentos
       totalmente gratuitos, tais como a orientação profissional,
       encaminhamentos para o mercado de trabalho, treinamentos técnicos e
       comportamentais, elevação da escolarização, aprendizagem
       profissional, oficinas de reabilitação profissional, entre outras
       inúmeras ações que visam o seu desenvolvimento profissional e pessoal.</p>
</section>

Folha de estilo:

/* Classe que formata a tag section   */

.empregabilidade{
   width: 773px;
   height: 110px;
   background:url(images/bg-sec-empregabilidade.png) repeat-y;
   margin: 20px 0 0 0;
   border-bottom: solid 1px #d0cfd4;
   border-top: solid 1px #d0cfd4;

}


/* Classe que formata a tag span que está apresentando o erro no IE7 */

.right, .alignright {
   float: right;
   padding-right:4px;

}

 

Aqui está o link para que possam visualizar o erro: http://www.thiagowebdesigner.com.br/unilehu/conheca-a-unilehu.php

 

 

Já tentei corrigir de várias maneiras, mas não obtive sucesso. Espero poder contar com a ajuda de vocês.

 

 

Obrigado ;)

[André do Vale 76]

Coloca a imagem anterior ao span, e o span também, com float: left. Daí é só acertar a margem. :thumbsup:

 

Se o elemento voltar a cair, aumenta largura do pai dos 2.

[Thiago Nunes 0]

Coloca a imagem anterior ao span, e o span também, com float: left. Daí é só acertar a margem. :thumbsup:

 

Se o elemento voltar a cair, aumenta largura do pai dos 2.

 

Olá André,

 

A imagem já estava anterior ao span, apliquei o float left no span conforme você orientou, mas não deu certo, acabei criando duas classes novas, uma para o parágrafo e outra para o span e agora está tudo ok. As classes criadas ficaram assim:

 

p.secao {
width: 228px;
float: left;

}

span.secao {
float: right;
padding-right:0px;
margin:11px 8px 0 0;
color:#FF3000;
font: 19px "Helvetica-LightCondensed";
text-align:right;	
}

.empregabilidade p.secao img, 
.suporte-tecnico p.secao img, 
.mobilizacao-social p.secao img, 
.promocao-social p.secao img{
margin: 17px 0 0 19px;
}

 

De qualquer forma muito obrigado por sua ajuda:D

 

Abraço!

[André do Vale 76]

Eu não falei pra colocar a imagem antes não, mas sim pra colocar "float: left" na imagem e no span irmão. Daí acertava com margem depois.

 

Mas já que resolveu, tá resolvido haha. :clap: