← HTML + CSS

codigo incompativel com IE

Lida 3766 vezes

Offline
r

ragnarock 
Membro
Mensagens 208 Gostos 1
Feedback +1

Troféus totais: 27
Trófeus: (Ver todos)
Tenth year Anniversary Nineth year Anniversary Super Combination Combination Topic Starter Poll Voter Level 5 Level 4 Level 3 Level 2

tenho o seguinte codigo no meu blog(wordpress)

Código: [Seleccione]
<a href="http://www.jogosbaratos.info/2009/08/28/ps3-killzone-2-%e2%80%93-9-90e-no-jumbo-da-maia/"><table cellpadding="0" cellspacing="5" border="0" background="http://www.jogosbaratos.info/wp-content/themes/jogosBaratos/images/comment.png" alt="Comentar/ver comentarios" width="48" height="39">
                      <tr><td align="center" valign="top">
 
                        <p class="commentnum">
                          0                        </p>
                      </td></tr>
        </table></a>

este codigo serve para ter texto por cima de uma imagem, e eu quero que ao clicar e em qualquer ponto da imagem (ou no numero de comentario) ele vá para os comentarios do respectivo post.

isto funciona no firefox como esperado já no IE...o ponteiro do rato muda(detecta que é um link) mas quando carrego nele não acontece nada.

alguém sabe como fazer isto ficar compativel com ambos os browsers?
Offline
r

ragnarock 
Membro
Mensagens 208 Gostos 1
Feedback +1

Troféus totais: 27
Trófeus: (Ver todos)
Tenth year Anniversary Nineth year Anniversary Super Combination Combination Topic Starter Poll Voter Level 5 Level 4 Level 3 Level 2

ja me disseram que n se pode ter uma table dentro de <a>

e um div? será que dá?
Offline
r

rtbfreitas 
Equipa
Mensagens 1497 Gostos 9
Feedback +24

Troféus totais: 30
Trófeus: (Ver todos)
Windows User Apple User Super Combination Combination Topic Starter 10 Poll Votes Poll Voter Poll Starter Level 5 Level 4

Olá,

Sim, com div podes e até deves optar por esse meio, as tabelas deves apenas utilizar para listar dados, fica aqui um exemplo rápido:

Código: [Seleccione]
<div id="comentarios">
<a href="#" title="Título do link">0</a>
</div>
e o CSS

Código: [Seleccione]
#comentarios {
background-color: #000;
height: 50px;
width: 100px;
}
#comentarios a {
display: block;
width: 100px;
height: 50px;
text-align: center;
text-decoration: none;
line-height: 50px;
color: #fff;
}
Testa e diz se funcionou, qualquer coisa pergunta.
Offline
r

ragnarock 
Membro
Mensagens 208 Gostos 1
Feedback +1

Troféus totais: 27
Trófeus: (Ver todos)
Tenth year Anniversary Nineth year Anniversary Super Combination Combination Topic Starter Poll Voter Level 5 Level 4 Level 3 Level 2

mas no exemplo que me das so o "0" fica a ser um link

ter

Código: [Seleccione]
<a href="#" >
  <div id="comentarios">0</div>
</a>
isto assim esta correcto? para todo o div ser um link
Offline

Julio Araujo 
Membro
Mensagens 34 Gostos 0
Troféus totais: 22
Trófeus: (Ver todos)
Super Combination Combination Topic Starter Poll Voter Level 4 Level 3 Level 2 Level 1 10 Posts First Post

Bom, eu não uso o WIN mas tenta o código abaixo.

Código: [Seleccione]
<style type="text/css">
 
#commentsNum a{

background: url(http://www.jogosbaratos.info/wp-content/themes/jogosBaratos/images/comment.png) no-repeat;
display: block;
width: 48px;
height: 39px;
text-decoration: none;
cursor: default;

}   
</style>

<table cellpadding="0" cellspacing="5" border="0" alt="Comentar/ver comentarios" width="48" height="39">
 <tr><td align="center" valign="top">
    <p class="commentnum" id="commentsNum">
    <a  href="http://www.jogosbaratos.info/2009/08/28/ps3-killzone-2-%e2%80%93-9-90e-no-jumbo-da-maia/">0</a>                        </p>
 </td></tr>
</table>
Offline
r

ragnarock 
Membro
Mensagens 208 Gostos 1
Feedback +1

Troféus totais: 27
Trófeus: (Ver todos)
Tenth year Anniversary Nineth year Anniversary Super Combination Combination Topic Starter Poll Voter Level 5 Level 4 Level 3 Level 2

quase....
experimentei o codigo do Julio Araujo e estava quase a funcionar...mas o numero não estava centrado como queria, resolvi então dar umas marteladas e tirei o pading da table e passei isso para o css e ficou assim
Código: [Seleccione]
<style type="text/css">
 
#commentsNum a{
background: url(http://www.jogosbaratos.info/wp-content/themes/jogosBaratos/images/comment.png) no-repeat;
display: block;
        width: 48px;
        height: 39px;
        text-decoration: none;
        padding-top: 5px;}
}   
</style>

<table cellpadding="0" cellspacing="0" border="0" alt="Comentar/ver comentarios" width="48" height="39">
 <tr><td align="center" valign="top">
    <p class="commentnum" id="commentsNum">
      <a  href="<?php the_permalink() ?>"><?php comments_number('0', '1', '%'); ?></a>
    </p>
 </td></tr>
</table>

assim fica bem no firefox...mas no IE deixa de aparecer a imagem de fundo...
alguém se sabe dizer pk?

(e já agora podias explicar por alto o que fizeste??...eu não pesco nada disto..faço a base da martelada e seachs no google aquele id="commentsNum" é como se estivesse a particularizar um filho da class "commentnum" ?[tipo herança em java?])

tks
Offline
r

rtbfreitas 
Equipa
Mensagens 1497 Gostos 9
Feedback +24

Troféus totais: 30
Trófeus: (Ver todos)
Windows User Apple User Super Combination Combination Topic Starter 10 Poll Votes Poll Voter Poll Starter Level 5 Level 4

Citação de: ragnarock em 31/Ago/2009 00:56
mas no exemplo que me das so o "0" fica a ser um link

Nesse exemplo o link tem a altura e largura da div, ou seja é como se fosse a div toda um link.
Offline
r

rtbfreitas 
Equipa
Mensagens 1497 Gostos 9
Feedback +24

Troféus totais: 30
Trófeus: (Ver todos)
Windows User Apple User Super Combination Combination Topic Starter 10 Poll Votes Poll Voter Poll Starter Level 5 Level 4

Modifiquei o exemplo para fazer o que colocaste no primeiro post mas com DIV's em vez da tag TABLE, podes ver este exemplo aqui , não era isto que querias?

Código: [Seleccione]
<div id="comentarios">
<a href="http://www.jogosbaratos.info/2009/08/28/ps3-killzone-2-%e2%80%93-9-90e-no-jumbo-da-maia/" title="Comentar/ver comentario">0</a>
</div>
e o CSS

Código: [Seleccione]
#comentarios {
background: url(http://www.jogosbaratos.info/wp-content/themes/jogosBaratos/images/comment.png) no-repeat;
height: 39px;
width: 48px;
}
#comentarios a {
display: block;
width: 48px;
height: 39px;
text-align: center;
text-decoration: none;
line-height: 32px;
color: #fff;
}
Offline
r

ragnarock 
Membro
Mensagens 208 Gostos 1
Feedback +1

Troféus totais: 27
Trófeus: (Ver todos)
Tenth year Anniversary Nineth year Anniversary Super Combination Combination Topic Starter Poll Voter Level 5 Level 4 Level 3 Level 2

Muitissimo obrigado :D

funcionou sim sr!

obrigado a todos :grin:
Offline
r

rtbfreitas 
Equipa
Mensagens 1497 Gostos 9
Feedback +24

Troféus totais: 30
Trófeus: (Ver todos)
Windows User Apple User Super Combination Combination Topic Starter 10 Poll Votes Poll Voter Poll Starter Level 5 Level 4

De nada, qualquer dúvida coloca que tentamos ajudar. :)
Offline
t

tonebiclas 
Membro
Mensagens 29 Gostos 0
Troféus totais: 16
Trófeus: (Ver todos)
Super Combination Combination Level 3 Level 2 Level 1 10 Posts First Post Karma Eighth year Anniversary Seventh year Anniversary

posso deixar uma dica:

para veres se podes meter por exemplo uma div/table/etc dentro de um <a> valida o documento.

se tiveres o extra "web developer" para o firefox basta fazeres CTRL + SHIFT + A

também dá jeito para ver se há tag's mal fechadas :p

cumps ;)

Páginas: 1

Posts relacionados

Blogging/Comunidades

Super Bock Super Blog Awards incompatível com AdSense Google?

Paulo Freixinho

HTML + CSS

Chamar código de uma outra página

l
leite

Blogging/Comunidades

MOVIDO: Ajuda com o meu código CSS

Nuno