[Resolvido] Barra menu desmancha no IE

[Gilmar Menezes 1]

O site que estou fazendo está aparecendo no firefox e no chrome impecáveis

porém no IE o menu quebra totalmente..

 

Chrome:

IE:

[Rubens De Andrade Garcia 1]

Gilmar, me parece que o IE não está carregando o css do menu! Nem todo bug do IE é culpa do IE.

 

1) Verificar se no IE o css responsavel pelo menu está sendo carregado

2) Verificar se existe um comentario condicional que reseta o código css ou se este comentario puxa outro css

[Gilmar Menezes 1]

Gilmar, me parece que o IE não está carregando o css do menu! Nem todo bug do IE é culpa do IE.

 

1) Verificar se no IE o css responsavel pelo menu está sendo carregado

2) Verificar se existe um comentario condicional que reseta o código css ou se este comentario puxa outro css

 

Index.php [MENU]:

<nav id="menu">

<ul>

<li><a href="index.php">Home</a></li>

<img id="divisao" src="img/separador.png" alt="separador" />

<li><a href="programas.php">Programas</a>

<img id="divisao" src="img/separador.png" alt="separador" />

<ul>

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

<li><a href="#">Mais Baixados</a></li>

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

</ul>

</li>

<li><a href="seriados.php">Seriados</a>

<img id="divisao" src="img/separador.png" alt="separador" />

<ul>

<li><a href="chaves.php">Chaves</a></li>

<li><a href="chris.php">Chris</a></li>

<li><a href="chuck.php">Chuck</a></li>

<li><a href="lost.php">Lost</a>

<ul>

<li><a href="#">1ª Temporada</a></li>

<li><a href="#">2ª Temporada</a></li>

<li><a href="#">3ª Temporada</a></li>

<li><a href="#">4ª Temporada</a></li>

</ul>

</li>

<li><a href="prison-break.php">Prison Break</a>

<ul>

<li><a href="#">1ª Temporada</a></li>

<li><a href="#">2ª Temporada</a></li>

<li><a href="#">3ª Temporada</a></li>

<li><a href="#">4ª Temporada</a></li>

</ul>

</li>

<li><a href="sobrenatural.php">Sobrenatural</a></li>

</ul>

</li>

<li><a href="filmes.php">Filmes</a>

<img id="divisao" src="img/separador.png" alt="separador" />

<ul>

<li><a href="#">Ação</a></li>

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

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

<li><a href="#">Comedia Romântica</a></li>

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

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

</ul>

<li><a href="animes.php">Animes</a>

<img id="divisao" src="img/separador.png" alt="separador" />

<ul>

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

<li><a href="#">Death Note</a></li>

<li><a href="#">Dragon Ball</a></li>

<li><a href="#">Fairy Tail</a></li>

<li><a href="#">Naruto Shippuden</a></li>

<li><a href="#">One Piece</a></li>

<li><a href="#">Yu Yu Hakusho</a></li>

</ul>

</li>

<li><a href="jogos.php">Jogos</a>

<ul>

<li><a href="#">Assassins Creed</a></li>

<li><a href="#">Battlefield 3</a></li>

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

<li><a href="#">Gta San Andreas</a></li>

<li><a href="#">Need For Speed 2</a></li>

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

</ul>

</li>

</ul>

<div id="search">

<form method="post" action="buscar.php" />

<input class="procurar" type="text" name="procurar" placeholder=" Iniciar uma nova busca" />

<input class="btn-pro" type="submit" name="go" value="buscar" />

</form>

</div>

</nav>

 

CSS do Menu:

/* Início Menu CSS */

nav{

height:40px;

background-color:#FF6600;

line-height:40px;

position:relative;

font-size:14px;

margin-bottom:14px;

z-index:1000;

box-shadow: 0px 0px 25px 8px white;

font-family:Segoe UI;

}

nav ul li {

display:block;

float: left;

position: relative;

}

nav ul li a {

padding-right:12px;

padding-left:12px;

color: #FFF;

text-decoration:none;

display:block;

float:left;

}

nav ul li a:hover{

background-color:#DEDEDE;

color:#666;

}

nav ul li ul {

width:156px;

display: none;

float: none;

left: 0;

position: absolute;

top: 100%;

background: #FFF;

line-height:26px;

font-family:Verdana;

font-size:12px;

}

nav ul li:hover > ul{

display: block;

}

nav ul li ul li,

nav ul li ul li a {

float: none;

background-color:#666;

color:#FFF;

}

nav ul li ul li a:hover {

float: none;

background-color:#DEDEDE;

color:#666;

}

nav ul li ul li {

margin-top:1px;

color: #FFF;

background: #000;

}

nav ul li ul li ul {

left: 100%;

top: 0;

}

nav ul li a.on {

background-color:#555;

}

nav ul li a.on:hover{

background-color:silver;

}

#divisao {

float:left;

margin-top: -14px;

}

/* Final Menu CSS */

 

Não tem nenhum comentário condicional..

[douglasdeodato 2]

gilmar seu css tem tags de css3 tipo: nav ul li:hover > ul, basicamente nao funciona no IE dependendo da versao.

 

isso pode te ajudar ele corrigi varios erros no ie.

 

http://html5boilerplate.com/

 

tente tambem criar um versao do menu em css quando for ie6 e 7.

 

assim corrigir rapidamente.

 

 

 

 

 

 

Index.php [MENU]:

 

 

CSS do Menu:

 

 

Não tem nenhum comentário condicional..

[Kaue Machado 0]

<nav> é uma tag do HTML5, o IE <= 8 não reconhece tags do HTML5, então você tem que criar essas tags com javascript, o código abaixo ou o modernizr.js devem resolver:

 

        <!-- Incluí elementos HTML5 no DOM se for IE -->
       <!--[if IE]>
           <script type="text/javascript">
           document.createElement("article");
           document.createElement("nav");
           document.createElement("section");
           document.createElement("header");
           document.createElement("aside");
           document.createElement("figure");
           document.createElement("legend");
           document.createElement("footer");
           </script>
       <![endif] -->

[Gilmar Menezes 1]

<nav> é uma tag do HTML5, o IE <= 8 não reconhece tags do HTML5, então você tem que criar essas tags com javascript, o código abaixo ou o modernizr.js devem resolver:

 

        <!-- Incluí elementos HTML5 no DOM se for IE -->
       <!--[if IE]>
           <script type="text/javascript">
           document.createElement("article");
           document.createElement("nav");
           document.createElement("section");
           document.createElement("header");
           document.createElement("aside");
           document.createElement("figure");
           document.createElement("legend");
           document.createElement("footer");
           </script>
       <![endif] -->

 

Vou tentar fazer isso agora mesmo =)

[Gilmar Menezes 1]

Consegui resolver o problema obrigado a todos que me ajudaram.

[douglasdeodato 2]

se usar o html5boilerplate ou modernizr

 

as tags: <article>, <section> or <nav> irao funcionar normalmente.

 

Consegui resolver o problema obrigado a todos que me ajudaram.