Jump to content

Menu: Firefox vs IE

AriOps

By AriOps
in CSS

 Share
Go to solution Solved by AriOps,

Recommended Posts

AriOps boolean user

AriOps

Posted
Posted

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

Daniel Correia

TheDark try-catch user

TheDark

Posted
Posted

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...

Desaparecido.

UnKnowN boolean user

UnKnowN

Posted
Posted

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)

}

 

AriOps boolean user

AriOps

Posted
  • Author
Posted

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  🙂

Daniel Correia

  • Solution
AriOps boolean user

AriOps

Posted
  • Author
  • Solution
Posted

Já consegui resolver o problema pessoal! 😄

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 😄

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 🙂 )

Daniel Correia

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing
×
×
  • Create New...

Important Information

By using this site you accept our Terms of Use and Privacy Policy. We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.