Ir para conteúdo
Fórum Script Brasil
  • 0

li a: hover no IE6 não rola?

Rafael Spilki

Perguntado por Rafael Spilki,

 Share

Pergunta

Rafael Spilki

Rafael Spilki

Postado
Postado

Pessoal, boa noite.

To com um probleminha aqui num menu que estou fazendo. Não funciona o li a: hover no IE6. Já no IE7 e no FF está perfeito...

Andei fazendo uma série de pesquisas e vi que no IE 6 o hover causa uma série de problemas, mas nada relacionado quando o uso é em a:, correto?

Bom, enfim, será que alguém ilumina um pouco o caso? porque tipo, não é só o efeito da barrinha que não está aparecendo, o link tb não funciona!

css

@charset "utf-8";
#menubox {
    background-color: #002953;
    border-top-width: 2px;
    border-right-width: 2px;
    border-bottom-width: 2px;
    border-left-width: 2px;
    border-top-style: solid;
    border-top-color: #3F6F8B;
    border-right-color: #3F6F8B;
    border-bottom-color: #3F6F8B;
    border-left-color: #3F6F8B;
    height: 1000px;
    margin: 0px;
    padding: 0px;
    background-image: url(newimages/backmenu.jpg);
}
#alamenubox {
    height: 136px;
    float: left;
    background-color: #002953;
}

ul#alamenu {
    margin: 0px;
    padding: 0px;
    float: left;
    height: 24px;
    list-style-type: none;
    width: 100px;
}
ul#alamenu li {
    padding: 0px;
    float: left;
}
ul#alamenu li a {
    list-style-type: none;
    font-size: 10px;
    color: #FFFFFF;
    text-decoration: none;
    display: block;
    font-family: Tahoma;
    float: left;
    text-align: left;
    padding-top: 6px;
    padding-bottom: 6px;
    visibility: visible;
    width: 150px;
    z-index: auto;
    background-color: #4D7393;
    padding-right: 30px;
    padding-left: 10px;
    border-left-width: 6px;
    border-left-style: solid;
    border-left-color: #5E88AA;
    margin-bottom: 2px;
    border-top-width: 1px;
    border-bottom-width: 1px;
    border-top-style: solid;
    border-bottom-style: solid;
    border-top-color: #5E88AA;
    border-bottom-color: #5E88AA;
}
.menucat {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 11px;
    color: #4D7393;
    text-decoration: none;
    padding-bottom: 6px;
    width: 140px;
    background-color: #002953;
    padding-top: 6px;
    padding-left: 2px;
    margin: 0px;
}

ul#alamenu li a:hover {
    list-style-type: none;
    color: #99CC66;
    text-decoration: none;
    background-color: #2C5B8B;
    border-left-width: 6px;
    border-left-style: solid;
    border-left-color: #99CC66;
}
#alamenubox2 {
    height: 80px;
    float: left;
    width: 190px;
    clear: left;
    background-color: #002953;
}
#alamenubox3 {
    height: 130px;
    float: left;
    width: 190px;
    clear: left;
    background-color: #002953;
}
html: 
<div id="menubox">
  <div id="alamenubox">
    <ul id="alamenu">
    <p class="menucat"><img src="newimages/icon_menu.png" width="6" height="10" hspace="4" />sub1</p>
      <li><a href="/1.asp">1</a></li>
      <li><a href="/2.asp">2</a></li>
      <li><a href="/3.asp">3</a></li>
      <li><a href="/4">4</a></li>     
    </ul>
  </div> 
<div id="alamenubox2">
    <ul id="alamenu">
    <p class="menucat"><img src="newimages/icon_menu.png" width="6" height="10" hspace="4" />sub2</p>
      <li><a href="/5.asp">5</a></li>
      <li><a href="/6.asp">6</a></li>  
    </ul>
  </div>
<div id="alamenubox3">
    <ul id="alamenu">
    <p class="menucat"><img src="newimages/icon_menu.png" width="6" height="10" hspace="4" />sub3</p>
      <li><a href="/7.asp">7</a></li>
      <li><a href="/8.asp">8</a></li>  
      <li><a href="/9.asp">9</a></li>
      <li><a href="/10.asp">10</a></li>  
    </ul></div>   
</div> 

</div>

Muito obrigado pela atenção.

[]'s Rafael Spilki

Link para o comentário
Compartilhar em outros sites

9 respostass a esta questão

Posts Recomendados

  • 0
KaKarotto

KaKarotto

Postado
Postado

É eu também não vi problemas...tá funcionando sussa...

Andei fazendo uma série de pesquisas e vi que no IE 6 o hover causa uma série de problemas, mas nada relacionado quando o uso é em a:, correto?

O iE6 não tem problemas com hover em outros elementos, ele simplesmente não funciona mesmo. A pseudo-classe hover no iE6 só funciona para links.

Link para o comentário
Compartilhar em outros sites
  • 0
Rafael Spilki

Rafael Spilki

Postado
  • Autor
Postado

Caras, valeu pela luz...

quando oculto esta outra div o menu realmente funciona perfeito...

div#main {background-color: #D8D8D8;}
div#main {font-size: 80%;}
div#main {width:490px;}
div#main {height:auto;}
div#main {margin-top:-880px;}
div#main {margin-left:355px;}
div#main a:link {text-decoration: none; color: #325983;}
div#main a:visited {text-decoration: none; color: #325983;}
div#main a:hover {text-decoration: underline;}
div#main a:active {text-decoration: none}
vocês conseguem ver algum tipo de conflito entre os codigos acima? Só não rola no IE6... e quando oculto a div acima rola em todos! Será alinhamento?!? Vou tentando aqui... posto algum resultado se obtiver! EDIT: O problema aqui é o seguinte, essa div: 
div#main {background-color: #D8D8D8;}
div#main {font-size: 80%;}
div#main {width:490px;}
div#main {height:auto;}
div#main {margin-left:355px;}
div#main a:link {text-decoration: none; color: #325983;}
div#main a:visited {text-decoration: none; color: #325983;}
div#main a:hover {text-decoration: underline;}
div#main a:active {text-decoration: none}

precisa ficar posicionada 880px acima no ff e 1000px acima no IE... O problema é que quando eu subo essa div altera o alinhamento no IE em ul#alamenu li a, fazendo com que os efeitos hover falhem...

valeu a força... já ajudaram muito!

[]'s Rafael Spilki

Link para o comentário
Compartilhar em outros sites
  • 0
KaKarotto

KaKarotto

Postado
Postado

Novato, eu não consegui entender patavinas...

Tem como postar isso funcionando em algum servidor pra eu ver ? Deixa rolando com o erro mesmo, pra eu tentar identificar o que acontece.

;)

Pra mim não muda nada e inserindo o css do main a saída fica exatamente igual.

Link para o comentário
Compartilhar em outros sites
  • 0
Rafael Spilki

Rafael Spilki

Postado
  • Autor
Postado

Ahahah, boa!

Poisé... tb não pesquei essa aqui ainda! não entendi direito o porque... mas tem alguma coisa a ver com essa div main! quando oculto ela, o simplesmente retiro ela do código funciona tudo perfeitinho...

Não entendi o porque dela influenciar tb... mas enfim..

Muito obrigado pela atenção.

[]'s Rafael Spilki

Link para o comentário
Compartilhar em outros sites
  • 0
Rafael Spilki

Rafael Spilki

Postado
  • Autor
Postado

Bom dia a todos... retomei esse probleminha hoje, fiz vários testes! Não sou nenhum expert em CSS, mas nunca havia tido esse tipo de problema com alinhamento das divs... acho que estou me passando em algum detalhe!

É incrível, porque realmente não entendo qual a relação provável entre a "div#main" e a "ul#alamenu li a"... Eu não entendo, nem o FireFox e nem o IE 7... só o IE6 entende que há algum problema com elas...

Incrivel mesmo... porque como podem ver a "ul#alamenu li a" inclusive esta setada como float:left...

Tentei gambiarras como usar float:right na main ou clear ou, absolute, qualquer outro negócio aqui que eu conhecesse... só pra testar mesmo... mas nada funcionou! Essa div#main inclusive tem um hack para alinhamento correto no IE 6, mas ela estando alinhada desalinha completamente a "ul#alamenu li a", fazendo com que o menu não funcione...

Não sei se me entenderam? mas se rolar alguma dica seria bem vinda! o link de onde está ocorrendo o problema está postado no post anterior...

valeu!

[]'s Rafael Spilki

Link para o comentário
Compartilhar em outros sites
  • 0
KaKarotto

KaKarotto

Postado
Postado

Novato, eu percebi só agora que tem alguns erros no seu html. Cuidado com isso aí, dentro de ul só pode li, depois no li você pode colocar um <p> por exemplo.

Tem mais de um elemento com o mesmo id, use classes quando precisar compartilhar propriedades.

No caso do hover, tente usar no link um width:100%.

Veja se resolve.

Link para o comentário
Compartilhar em outros sites
  • 0
Rafael Spilki

Rafael Spilki

Postado
  • Autor
Postado

Fala Kakaratto, beleza?

Cara... você acha que o problema é por conta do <p> dentro do <ul>?

porque eu até tentei sem o <p> mas não rolou igual...

E eu tb não consegui achar qual elemento esta com o mesmo id...

Cara... sei lá... esse lance ta meio estranho... to mexendo nisso agora... vou ver se consigo descobrir o porque disso até o fim da tarde de hoje!

valeu a força.

[]'s Rafael Spilki

Link para o comentário
Compartilhar em outros sites
  • 0
Rafael Spilki

Rafael Spilki

Postado
  • Autor
Postado

Resolvido... adicionei um hack para o IE:

div#main {position:absolute;}
div#main {margin-top: -1000px;}
edit: achei que tinha resolvido... mas dei uma mancada... porque com absolute o codigo ficava um lixo ao ser redimendionado... no fim, consertei mesmo assim: 
div#global {position:relative;}
div#global {margin-right: 300px}
div#global {left: 15%}

div#main {margin-top: -1000px;}

agora foi! rsssssss

valeu a todos!

[]'s Rafael Spilki

Link para o comentário
Compartilhar em outros sites

Participe da discussão

Você pode postar agora e se registrar depois. Se você já tem uma conta, acesse agora para postar com sua conta.

Visitante
Responder esta pergunta...

×   Você colou conteúdo com formatação.   Remover formatação

  Apenas 75 emoticons são permitidos.

×   Seu link foi incorporado automaticamente.   Exibir como um link em vez disso

×   Seu conteúdo anterior foi restaurado.   Limpar Editor

×   Você não pode colar imagens diretamente. Carregar ou inserir imagens do URL.

×
 Share
Ir para lista de Perguntas


  • Estatísticas dos Fóruns

    • Tópicos
      152,3k
    • Posts
      652,2k
×
×
  • Criar Novo...