• Revista PROGRAMAR: Já está disponível a edição #53 da revista programar. Faz já o download aqui!

AriOps

[RESOLVIDO][Menu] Bem no Firefox, mal no IE

5 mensagens neste tópico

Boas,

Passa-se o seguinte, estou a criar um site que tem um menu com um efeito onhover de mudança de imagem. Até aqui tudo bem, excepto que quando vou ver com o IE para além da página aparecer distorcida (mas isso logo corrijo) o menu não apresenta o efeito onhover...é urgente, precisava MESMO de ajuda...aqui vai o código:

index.php

(...)
<div id="painel">
<div id="item_menu" onclick="document.location.href='index.php'">HOME</div>
<div id="item_menu">A EMPRESA</div>
<div id="item_menu">SERVIÇOS E EVENTOS</div>
<div id="item_menu">ESPAÇOS</div>
<div id="item_menu">A EQUIPA</div>
<div id="item_menu">CLIENTES E PARCEIROS</div>
<div id="item_menu">CONTACTOS</div>
<div id="item_menu">LINKS</div>
<div id="pesquisa"> </div>
<div id="item_menu2">SUGESTÕES DO CHEFE</div>
<div id="item_menu2">GALERIA FOTOGRÁFICA</div>
</div>
(...)

template_css.css

#painel {
background-color: #F9F9FA;
width: 202px;
clear: left;
height: 100%;
margin-left: 10px;
float: left;
}
#item_menu {
height: 15px;
width: 192px;
background-color: #F9F9FA;
border-top-width: 2px;
border-right-width: 2px;
border-bottom-width: 2px;
border-left-width: 2px;
border-top-style: none;
border-right-style: none;
border-bottom-style: solid;
border-left-style: none;
border-top-color: #FFFFFF;
border-right-color: #FFFFFF;
border-bottom-color: #FFFFFF;
border-left-color: #FFFFFF;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
color: #747474;
vertical-align: middle;
text-indent: 10px;
clear: both;
float: none;
padding: 5px;
cursor: pointer;
}
#item_menu a:link{
height: 15px;
width: 192px;
background-color: #F9F9FA;
border-top-width: 2px;
border-right-width: 2px;
border-bottom-width: 2px;
border-left-width: 2px;
border-top-style: none;
border-right-style: none;
border-bottom-style: solid;
border-left-style: none;
border-top-color: #FFFFFF;
border-right-color: #FFFFFF;
border-bottom-color: #FFFFFF;
border-left-color: #FFFFFF;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
color: #747474;
vertical-align: middle;
text-indent: 10px;
clear: both;
float: none;
padding: 5px;
cursor: pointer;
}
#item_menu:hover{
height: 15px;
width: 192px;
background-color: #F9F9FA;
background-image: url(../images/png/menuitemhover_bg.png);
border-top-width: 2px;
border-right-width: 2px;
border-bottom-width: 2px;
border-left-width: 2px;
border-top-style: none;
border-right-style: none;
border-bottom-style: solid;
border-left-style: none;
border-top-color: #FFFFFF;
border-right-color: #FFFFFF;
border-bottom-color: #FFFFFF;
border-left-color: #FFFFFF;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
color: #747474;
vertical-align: middle;
text-indent: 10px;
clear: both;
float: none;
padding: 5px;
cursor: pointer;
}
#item_menu:active{
height: 15px;
width: 192px;
background-color: #F9F9FA;
background-image: url(../images/png/menuitemhover_bg.png);
border-top-width: 2px;
border-right-width: 2px;
border-bottom-width: 2px;
border-left-width: 2px;
border-top-style: none;
border-right-style: none;
border-bottom-style: solid;
border-left-style: none;
border-top-color: #FFFFFF;
border-right-color: #FFFFFF;
border-bottom-color: #FFFFFF;
border-left-color: #FFFFFF;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
color: #747474;
text-indent: 10px;
clear: both;
float: none;
padding: 5px;
text-align: left;
cursor: pointer;
}
#item_menu a:visited{
height: 15px;
width: 192px;
background-color: #F9F9FA;
border-top-width: 2px;
border-right-width: 2px;
border-bottom-width: 2px;
border-left-width: 2px;
border-top-style: none;
border-right-style: none;
border-bottom-style: solid;
border-left-style: none;
border-top-color: #FFFFFF;
border-right-color: #FFFFFF;
border-bottom-color: #FFFFFF;
border-left-color: #FFFFFF;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
color: #747474;
vertical-align: middle;
text-indent: 10px;
clear: both;
float: none;
padding: 5px;
cursor: pointer;
}
#pesquisa {
height: 25px;
width: 202px;
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
color: #CCCCCC;
text-align: center;
padding: 0px;
background-image: url(../images/pesquisa.jpg);
}
#item_menu2 {
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
color: #747474;
height: 15px;
width: 192px;
padding: 5px;
text-indent: 10px;
background-image: url(../images/menutem2.jpg);
cursor: pointer;
}
#item_menu2:hover{
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
color: #747474;
height: 15px;
width: 192px;
padding: 5px;
text-indent: 10px;
background-image: url(../images/menutem2_hover_bg.jpg);
cursor: pointer;
}
#item_menu2:active{
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
color: #747474;
height: 15px;
width: 192px;
padding: 5px;
text-indent: 10px;
background-image: url(../images/menutem2_hover_bg.jpg);
cursor: pointer;
}
#item_menu2:visited{
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
color: #747474;
height: 15px;
width: 192px;
padding: 5px;
text-indent: 10px;
background-image: url(../images/menutem2.jpg);
cursor: pointer;
}

Precisava mesmo da vossa ajuda pessoal...

Cumps

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

O id é único a cada elemento de uma página. Devias utilizar class em vez de id. Não sei se terá a ver com o problema, mas como está não estás a respeitar as regras do HTML...

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

pode ser uma ena que nao faz muito sentido, mas experimenta colocar à frente dos "nomes" div, por exemplo

div#pesquisa

{

height: 25px;

width: 202px;

font-family: Arial, Helvetica, sans-serif; font-size: 10px;

color: #CCCCCC;

text-align: center;

padding: 0px;

background-image: url(../images/pesquisa.jpg); (e aqui é sem ponto e virgula nao ? a ultima nao e sempre sem ponto e virgula ? :S)

}

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

Tentei a tua maneira TheDark, fica na mesma... a tua UnKnowN é desnecessária porque ele vê logo os elementos com esse id e faz as aplicações que tem de fazer...

fica aqui o código remodelado:

CSS

#painel {
background-color: #F9F9FA;
width: 202px;
clear: left;
height: 100%;
margin-left: 10px;
float: left
}
.item_menu {
height: 15px;
width: 192px;
background-color: #F9F9FA;
border-top-width: 2px;
border-right-width: 2px;
border-bottom-width: 2px;
border-left-width: 2px;
border-top-style: none;
border-right-style: none;
border-bottom-style: solid;
border-left-style: none;
border-top-color: #FFFFFF;
border-right-color: #FFFFFF;
border-bottom-color: #FFFFFF;
border-left-color: #FFFFFF;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
color: #747474;
vertical-align: middle;
text-indent: 10px;
clear: both;
float: none;
padding: 5px;
cursor: pointer
}
.item_menu:hover{
background-image: url(../images/png/menuitemhover_bg.png)
}
.item_menu:active{
background-image: url(../images/png/menuitemhover_bg.png)
}

HTML

<div id="painel">
<div class="item_menu" onclick="document.location.href='index.php'">HOME</div>
<div class="item_menu">A EMPRESA</div>
<div class="item_menu">SERVIÇOS E EVENTOS</div>
<div class="item_menu">ESPAÇOS</div>
<div class="item_menu">A EQUIPA</div>
<div class="item_menu">CLIENTES E PARCEIROS</div>
<div class="item_menu">CONTACTOS</div>
<div class="item_menu">LINKS</div>
</div>

Tirei algumas coisas que não eram necessárias para este erro e tirei também bocados de código a mais....

Cumps e thanks pela tentativa

PS: Continuem a tentar sff  :)

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

Já consegui resolver o problema pessoal! :D

A solução era não usar divs mas sim a própria tag <a> para aplicar a class. Aqui vai o código:

EXEMPLO:

<a href="index.php" class="item_menu">HOME</a>

a.item_menu {
height: 15px;
width: 192px;
background-color: #F9F9FA;
border-top-width: 2px;
border-right-width: 2px;
border-bottom-width: 2px;
border-left-width: 2px;
border-top-style: none;
border-right-style: none;
border-bottom-style: solid;
border-left-style: none;
border-top-color: #FFFFFF;
border-right-color: #FFFFFF;
border-bottom-color: #FFFFFF;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
color: #747474;
vertical-align: middle;
text-indent: 10px;
clear: both;
float: none;
padding: 5px;
}
a.item_menu:link {
height: 15px;
width: 192px;
background-color: #F9F9FA;
border-top-width: 2px;
border-right-width: 2px;
border-bottom-width: 2px;
border-left-width: 2px;
border-top-style: none;
border-right-style: none;
border-bottom-style: solid;
border-left-style: none;
border-top-color: #FFFFFF;
border-right-color: #FFFFFF;
border-bottom-color: #FFFFFF;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
color: #747474;
vertical-align: middle;
text-indent: 10px;
clear: both;
float: none;
padding: 5px;
}
a.item_menu:link, a.item_menu:visited {
        display: block;
height: 15px;
width: 192px;
background-color: #F9F9FA;
border-top-width: 2px;
border-right-width: 2px;
border-bottom-width: 2px;
border-left-width: 2px;
border-top-style: none;
border-right-style: none;
border-bottom-style: solid;
border-left-style: none;
border-top-color: #FFFFFF;
border-right-color: #FFFFFF;
border-bottom-color: #FFFFFF;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
color: #747474;
vertical-align: middle;
text-indent: 10px;
clear: both;
float: none;
padding: 5px;
}
a.item_menu:hover {
background-image: url(../images/png/menuitemhover_bg.png);
}

O truque está principalmente numa linha aí no css, esta:

display: block;

Cumps e Obrigado a Todos :D

PS: Aqui vai uma ajuda para quem costuma ter problemas de distorção no IE: Por uma experiência que fiz aqui, a margin do IE é Metade da do Firefox, por exemplo se no Firefox têm 10px de margin numa tag e fica bem, arrangem uma maneira de por no IE a 5px (por exemplo com um script php, como eu fiz :))

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

Crie uma conta ou ligue-se para comentar

Só membros podem comentar

Criar nova conta

Registe para ter uma conta na nossa comunidade. É fácil!


Registar nova conta

Entra

Já tem conta? Inicie sessão aqui.


Entrar Agora