Desorientação no I.E

joanalemos · March 22, 2012 at 05:35 PM

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 at 05:41 PM

Mostra o código que estás a usar

mjamado · March 22, 2012 at 05:43 PM

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

joanalemos · March 22, 2012 at 05:44 PM

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 at 05:51 PM

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 at 05:56 PM

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 at 12:33 AM

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 at 01:18 AM

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

joanalemos · March 23, 2012 at 03:03 PM

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 at 03:07 PM

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 at 03:14 PM

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 at 03:23 PM

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 at 03:33 PM

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 at 03:40 PM

queres isto ???

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

joanalemos · March 23, 2012 at 03:49 PM

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 at 03:54 PM

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

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

joanalemos · March 23, 2012 at 04:15 PM

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

HappyHippyHippo · March 23, 2012 at 04:23 PM

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 at 04:30 PM

Assim ja funca 😉

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

HappyHippyHippo · March 23, 2012 at 04:32 PM

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)

Sign In

Desorientação no I.E

Recommended Posts

joanalemos

fil79

mjamado

joanalemos

joanalemos

mjamado

joanalemos

mjamado

joanalemos

mjamado

joanalemos

mjamado

joanalemos

HappyHippyHippo

joanalemos

HappyHippyHippo

joanalemos

HappyHippyHippo

joanalemos

HappyHippyHippo

Create an account or sign in to comment

Create an account

Sign in

Home

Activity

Revista PROGRAMAR

Important Information