Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Juh

Bug IE versões anteriores ao 7.0

Por , em Desenvolvimento frontend

Recommended Posts

Juh    0

Juh
Postado

Olá pessoal,

Eu criei um menu drop down e ele funcionou corretamente no IE 7.0. Mas quando fui testar no IE 6.0 os sub-menus ficavam desalinhados,como faço pra consertar esse bug??Me ajudem!! O código é esse:

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pt-br" lang="pt-br">

<head>

<meta name="keywords" content="tutorial,acessibilidade,css,css menu,estilo,folhas estilo,layout css,layout sites,menu css,paginas web,tutorial css,web design,web standards,webdesign,tableless" />

<meta name="description" content=" Tutoriais, macetes, dicas sobre uso das CSS para projetar sites." />

<meta name="author" content="Nick Rigby" />

<meta name="MSSmartTagsPreventParsing" content="true" />

<meta http-equiv="imagetoolbar" content="no" />

<meta http-equiv="Pragma" content="no-cache" />

<meta name="robots" content="all" />

<meta name="language" content="pt-br" />

<meta name="ICBM" content="-22.975781,-43.193082" />

<meta name="DC.title" content="CSS para Web Design" />

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<title>Horizontal Drop Down Menus - Parte 3</title>

<script type="text/javascript">

function IEHoverPseudo() {

 

var navItems = document.getElementById("primary-nav").getElementsByTagName("li");

 

for (var i=0; i<navItems.length; i++) {

if(navItems.className == "menuparent") {

navItems.onmouseover=function() { this.className += " over"; }

navItems.onmouseout=function() { this.className = "menuparent"; }

}

}

 

}

window.onload = IEHoverPseudo;

 

</script>

 

<style type="text/css">

 

body { font: normal 62.5% verdana; }

 

ul#primary-nav,

ul#primary-nav ul {

margin: 0;

padding: 0;

/* width: 600px; */ /* Width of Menu Items */

border-bottom: 0px; solid #ccc;

background: #fff; /* IE6 Bug */

/* background: blue; /* IE6 Bug */ cor do fundo dos menus

font-size: 100%;

}

 

 

ul#primary-nav li {

position: relative;

list-style: none;

display: inline;

float:left;

}

 

ul#primary-nav li a {

display: block;

text-decoration: none;

text-align:center;

float:left;

color: #000;

/* color: red; cor das letras do menu */

border: 1px solid #ccc;

border-bottom: 1px;

margin: 0;

padding: 0;

list-style: none;

width: 130px;

height:20px;}

 

/* Fix IE. Hide from IE Mac \*/

* html ul#primary-nav li { float: left; height: 1%; }

* html ul#primary-nav li a { height: 1%; }

/* End */

/* Fix IE. Hide from IE Mac \*/

* html ul li { float: left; height: 1%; }

* html ul li a { height: 1%; }

/* End */

 

ul#primary-nav ul {

position: absolute;

display: none;

left: 0px; /* Set 1px less than menu width */

top: 21px;

}

 

ul#primary-nav li ul li a { padding: 0; } /* Sub Menu Styles */

 

ul#primary-nav li:hover ul ul ,

ul#primary-nav li:hover ul ul ul,

ul#primary-nav li.over ul ul,

ul#primary-nav li.over ul ul ul {display: none; top: 17px;} /* Hide sub-menus initially */

 

ul#primary-nav li:hover ul,

ul#primary-nav li li:hover ul,

ul#primary-nav li li li:hover ul,

ul#primary-nav li.over ul,

ul#primary-nav li li.over ul,

ul#primary-nav li li li.over ul { display: block; } /* The magic */

 

ul#primary-nav li.menuparent { background: transparent url(arrow-down.gif) right center no-repeat; }

/* ul#primary-nav li.menuparent { background: yellow url(arrow-down.gif) right center no-repeat; } Cor dos que tem o -> */

 

ul#primary-nav li.menuparent:hover,

ul#primary-nav li.over { background-color: #f9f9f9; }

/*ul#primary-nav li.over { background-color: blue } cor da selecao quando tem submenu */

 

ul#primary-nav li a:hover { color: #E2144A; }

/*ul#primary-nav li a:hover { color: blue; background-color: blue} cor da letra dos menus com selecao / cor do fundo */

 

</style>

</head>

 

<body>

 

<table width="800" height="394" border="0" align="center">

<tr>

<td width="791" height="157" valign="top"><table width="801" height="123" border="0">

<tr>

<td width="976" height="119" valign="bottom" background="imagens/mestre.png"><table width="796" border="0">

<tr>

<ul id="primary-nav"> <li><a href="#">Principal</a></li>

 

<li class="menuparent"><a href="#">A Empresa </a>

<ul>

<li><a href="historia.html">História</a></li>

 

<li><a href="#">Atuação no Mercado</a></li>

<li><a href="#">Missão</a></li>

<li><a href="#">Visão</a></li>

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

</ul>

</li>

 

<li class="menuparent"><a href="#">Obras Realizadas </a>

<ul>

<li><a href="#">Obra 1</a></li>

 

<li><a href="#">Obra 2</a></li>

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

<li><a href="#">Obra 4</a></li>

</ul>

</li>

 

<li class="menuparent"><a href="#">Dicas de Contrução </a>

<ul>

<li><a href="#">United Kingdom</a></li>

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

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

 

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

 

</ul>

</li>

<li class="menuparent"><a href="#">Nosso Parceiros</a>

<ul>

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

<li><a href="#">Orgãos</a></li>

<li><a href="#">Ong´s</a></li>

</ul>

</li>

<li class="menuparent"><a href="#">Fale Conosco</a>

<ul>

<li><a href="#">Informações</a></li>

<li><a href="#">Deixe um Recado</a></li>

</ul>

</li>

</ul>

</tr>

</table></td>

</tr>

</table>

Compartilhar este post

Link para o post
Compartilhar em outros sites

Hunter_    0

Hunter_
Postado

Opa, seja bem vindo(a) Juh,

 

Se possível posta um link, ajuda na resolução do teu problema, falo por experiência própria muita gente não lê códigos extensos demais.

 

 

[]'s

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento frontend
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito