Desorientação no I.E

joanalemos · March 22, 2012

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

fil79 · March 22, 2012

Mostra o código que estás a usar

mjamado · March 22, 2012

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

joanalemos · March 22, 2012

O codigo é enorme :s

mas e o normal no chrome funca bem,

Precisso e de alguma tag para o i.e meter aquilo bem :s

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

joanalemos · March 22, 2012

meti-lhe o doctype

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

e ja fica direito 😉😄

Obrigadao pela lembrança 🙂😄

So no menu e que tem uma coisinha :s nao reconhece as sprites direitas :s alguma dica?

mjamado · March 22, 2012

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.

joanalemos · March 23, 2012

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

mjamado · March 23, 2012

Depende como estás a fazer. Tens de mostrar a estrutura e as CSS relevantes.

joanalemos · March 23, 2012

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;
}

mjamado · March 23, 2012

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

joanalemos · March 23, 2012

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 😉

mjamado · March 23, 2012

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.

joanalemos · March 23, 2012

Dá me uma dica atao de como por o link dentro sem utilizar texto, só utilizando o espaço da li sff 😉

HappyHippyHippo · March 23, 2012

queres isto ???

<ul>
<li>
<a href="#"><img src="" alt=""/></a>
</li>
</ul>

joanalemos · March 23, 2012

Nop 😉

Isso era se fosse uma imagem normal

só que o que tou a utilizar e sprites, para background dos li's por isso e que eu utilizei aquela extrutura.

HappyHippyHippo · March 23, 2012

então tira o tag <img /> ....

<ul>
<li>
<a href="#"></a>
</li>
</ul>

joanalemos · March 23, 2012

Se eu fizer isso ao passar por cima do menu num li so faz o hover o link desaparece

HappyHippyHippo · March 23, 2012

existe uma solução (workaround), não é bonita mas prontos ....

<html>
<ul>
<li>
<a href="#"><div style="width:100%; height:100%;"></div></a>
</ll>
</ul>
</html>

é por isso que nunca uso background para fazer botóes ....

joanalemos · March 23, 2012

Assim ja funca 😉

Já alterei, mas nao sera mais facil como estava? E porque e que poderá ser prblematico?

HappyHippyHippo · March 23, 2012

imagina que tens um browser mais restritivo ( tipo aqueles nos telemoveis ) poderia ignorar o tag anchor fora do lugar e assim perderes o link ...

(isto é um exemplo, normalmente não acontece, mas nada é impossivel)

Desorientação no I.E

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Important Information