Como esconder texto no Opera, IE e FF?

[Tiago Madeira 0]

Quero esconder o texto de um <a> (só mostrar o background), mas não estou conseguindo fazê-lo no Firefox, IE e Opera juntos. Seguem screenshots do site no Firefox, Opera e IE (respectivamente) e o XHTML e CSS correspondente a essas partes do site.

 

Primeira observação: Nesses screenshots e estilos eu deixei funcionando no IE e no Firefox. (só faltou no Opera)

 

<!-- Início dos botões --><div class="bloco">        <h2>Padrões Web</h2>        <ul class="botoes">                <li><a class="xhtml" href="http://validator.w3.org/check?uri=referer" title="XHTML 1.1 Válido">XHTML 1.1 Válido</a></li>                <li><a class="css" href="http://jigsaw.w3.org/css-validator" title="CSS 2.0 Válido">CSS 2.0 Válido</a></li>                <li><a class="tableless" href="http://www.tableless.com.br" title="Tableless">Tableless</a></li>                <li><a class="rss2" href="/feeds/rss2.php" title="Feed RSS 2">Feed RSS 2</a></li>        </ul></div><div class="bloco">        <h2>Links</h2>        <ul class="botoes">                <li><a class="firefox" href="http://www.getfirefox.com" title="Get Firefox">Get Firefox</a></li>                <li><a class="sosphp" href="http://www.sosphp.com.br/forum" title="Fórum SOSPHP">Fórum SOSPHP</a></li>        </ul></div>

.botoes {        margin:0 auto;        text-align:center;        width:75px;}.botoes a {        text-align:middle;        font-size:0;        text-indent:0 !important;        text-indent:-2000px;        display:block;        width:75px;        height:14px;}.botoes a.xhtml {        background:url("bt/xhtml.gif") no-repeat;}.botoes a:hover.xhtml {        background:url("bt/xhtml-hover.gif") no-repeat;}

Espero ter sido claro e que possam me ajudar...

 

Valeu!

[_ nEoN _ 0]

Seguinte, para fazer o código funcionar em todos os browser você terá de fazer o seguinte...

 

dentro do <a> crie uma tag <span> da seguinte forma

 

<li><a class="xhtml" href="http://validator.w3.org/check?uri=referer" title="XHTML 1.1 Válido"><span>XHTML 1.1 Válido<span></a></li>

ok, agora no CSS defina o <span> como display: none;

 

.botoes a span { display: none; }

no CSS da imagem de background defina a altura da imagem.

 

.botoes a.xhtml { height: ???; background:url("bt/xhtml.gif") no-repeat; }

Não esqueça de retirar o text-indent pois ele não sera mais necessario...

Isso resolve seu problema...