Jump to content

Desorientação no I.E


joanalemos
 Share

Recommended Posts

Boas pessoal,

Acabei um site e agora fui ver como tava nos outros browser ( default: chrome ), e tirando umas pequenas diferenças so no moz essta tudo ok, o problema e o de sempre . I.E!

Queria que alguém me desse umas luzes de como contornar este problema -.-

Utilizei sprites no menu e ficaram todas K.O ( que nao tem outro nome xD ) no I.E, alguma dica ou assim da imenso jeito 😉

http://img138.imageshack.us/img138/990/siteie.png -Porcaria do I.E -.-

Bonzudo do Chrome 🙂

http://img696.imageshack.us/img696/1818/chromelx.png

Ajuda please

Link to comment
Share on other sites

Estou especialmente interessado no cabeçalho do HTML, mais especificamente o que tens antes da tag <html>...

"Para desenhar um website, não tenho que saber distinguir server-side de client-side" - um membro do fórum que se auto-intitula webdesigner. Temo pelo futuro da web.

Link to comment
Share on other sites

Antes da tag html nao tenho o doctype :s mas ja o vou por, se era a isso que te referias...

Claro que era a isso que me referia. Se não declarares um doctype, isso vai disparar o quirks mode, que afecta várias propriedades CSS, incluíndo o box-model. Declara sempre, sempre, um doctype.

"Para desenhar um website, não tenho que saber distinguir server-side de client-side" - um membro do fórum que se auto-intitula webdesigner. Temo pelo futuro da web.

Link to comment
Share on other sites

Sim, isso foi erro meu :s programei a mão e não me lembrei do doctype, e depois não me lembrei que faltava, mal tu dizestes aquilo eu lembrei-me logo xD

Foi falha minha 😉

Agora preciso e de ajuda nas sprites que não me esta a reconhecer algumas :s alguma dica??

Link to comment
Share on other sites

http://img220.imageshack.us/img220/5582/cscsdm.png

Ai tens a imagem para veres a diferença

Html...

<div id="menu">
<ul id="nav">
  
  <!--Empresa--> 
  <a href="empresa.php" alt="Empresa">
  <li class="menutituloempresa"> </li>
  </a> 
  <!--Equipamentos--> 
  <a href="equipamentos.php" alt="Equipamentos">
  <li class="menutituloEquipamentos"> </li>
  </a> 
  
  <!--Tarifarios--> 
  <a href="tarifarios.php" alt="Tarifários">
  <li class="menutituloTarifarios"> </li>
  </a> 
  
  <!--No escritorio--> 
  <a href="escritorio.php" alt="No Escritório">
  <li class="menutituloEscritorio"> </li>
  </a> 
  
  <!--em mobilidade--> 
  <a href="mobilidade.php" alt="Em mobilidade">
  <li class="menutituloMobilidade"> </li>
  </a> 
  
  <!--ofertas integradas--> 
  <a href="ofertas.php" alt="Ofertas Integradas">
  <li class="menutituloOfertas"> </li>
  </a> 
  
  <!--soluçoes sectoriais--> 
  <a href="solucoes.php" alt="Soluções Sectoriais">
  <li class="menutituloSolucoes"> </li>
  </a> 
  
  <!--contactos--> 
  <a href="contactos.php" alt="Contactos">
  <li class="menutitulocontactos"></li>
  </a>
</ul>
</div>

A Css disso...

/*---------------------menu de navegaçao -----------------------------*/

#menu{
background-image:url(IMG/menu.png);
background-repeat: no-repeat;
height: 37px;
width:100%;
}
#nav{
list-style-type: none;
padding-left:3px;
}


#menu #nav .menutituloempresa {
height: 37px;
background-image:url(img/menu.png);
background-position: 0px 86px;
width:77px;
display: inline-block;
text-decoration:none;
}
#menu #nav .menutituloempresa:hover {
background-image:url(img/menu.png);
background-position: 0px 43px;
text-decoration:none;
}

/* equipamentos*/
#menu #nav .menutituloEquipamentos {
height: 37px;
background-image:url(img/menu.png);
background-position: -82px 86px;
width:117px;
display: inline-block;
text-decoration:none;

}
#menu #nav .menutituloEquipamentos:hover {
background-image:url(img/menu.png);
background-position: -82px 43px;
text-decoration:none;
}

/*----fim equipamentos--*/



#menu #nav .menutituloTarifarios {
height: 37px;
background-image:url(img/menu.png);
background-position: -203px 86px;
width:98px;
	display: inline-block;
}
#menu #nav .menutituloTarifarios:hover {
background-image:url(img/menu.png);
background-position: -203px 43px;
}


/* fim dos tarifarios ---------------------*/
#menu #nav .menutituloEscritorio {
height: 37px;
background-image:url(img/menu.png);
background-position: -304px 86px;
width:115px;
display: inline-block;
}
#menu #nav .menutituloEscritorio:hover {
background-image:url(img/menu.png);
background-position: -304px 43px;
}

/* fim do escritorio*/
#menu #nav .menutituloMobilidade {
height: 37px;
background-image:url(img/menu.png);
background-position: -422px 86px;
width:123px;
display: inline-block;
}
#menu #nav .menutituloMobilidade:hover {
background-image:url(img/menu.png);
background-position: -422px 43px;
}

/*ofertas*/

#menu #nav .menutituloOfertas {
height: 37px;
background-image:url(img/menu.png);
background-position: -548px 86px;
width:153px;
display: inline-block;
}
#menu #nav .menutituloOfertas:hover {
background-image:url(img/menu.png);
background-position: -548px 43px;
}

/*solucoes*/

#menu #nav .menutituloSolucoes {
height: 37px;
background-image:url(img/menu.png);
background-position: -705px 86px;
width:150px;
display: inline-block;
}
#menu #nav .menutituloSolucoes:hover {
background-image:url(img/menu.png);
background-position: -705px 43px;
}
/*contactos*/

#menu #nav .menutitulocontactos {
height: 37px;
background-image:url(img/menu.png);
background-position: -855px 86px;
width:88px;
display: inline-block;
}
#menu #nav .menutitulocontactos:hover {
background-image:url(img/menu.png);
background-position: -855px 43px;
}
Link to comment
Share on other sites

Em primeiro lugar tens de corrigir a estrutura: ul > a > li não é uma estrutura válida, que os browsers tentam corrigir, cada um à sua maneira.

Depois de corrigir (se queres mesmo usar mais ou menos isso tem de ser ul > li > a), tens de ajustar a CSS de molde a reflectir essa mudança; quando o fizeres, se continuar a dar problemas, volta cá com a estrutura e CSS novos e logo se vê.

"Para desenhar um website, não tenho que saber distinguir server-side de client-side" - um membro do fórum que se auto-intitula webdesigner. Temo pelo futuro da web.

Link to comment
Share on other sites

Ja meti a funcionar...

era na

#nav{

        list-style-type: none;

        padding-left:3px;

        }

ele reconhecia o padding-left para todos os li em x de o dar no ul como o chrome e os outross fazem

fiz o menu em ul a li para o li ficar com o link porque como no tem nada dentro e so a caixa que apresenta o link..

Já esta resolvido, obrigado pelas dicas 😉

Link to comment
Share on other sites

fiz o menu em ul a li para o li ficar com o link porque como no tem nada dentro e so a caixa que apresenta o link..

Não é uma opção. As ul só têm uma tag filha válida, que é a li.

Essa estrutura não é válida. Ponto. Não é passível de discussão.  Corrige isso. Se não der problemas agora, vai dar depois.

"Para desenhar um website, não tenho que saber distinguir server-side de client-side" - um membro do fórum que se auto-intitula webdesigner. Temo pelo futuro da web.

Link to comment
Share on other sites

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

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