Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Olá amigos... novamente aqui recorrendo a ajuda de vocês... é o seguinte...
Eu estou criando um layout novo para meu site, e agora estou usando Tableless, que não apresentou nenhum problema ATÉ EU DECIDIR USAR UM MENU BONITO! ¬¬
Acontece que no IE 7 (minha versão), sempre aparece um chato dizendo:
Erro: O objeto não dá suporte para a propriedade ou método.
Linha: 12
Caractere: 252
Código: 0
Acontece que eu tenho plena certeza que esse código está correto... Trata-se do Jquery plugin kwicks e, sem estar no layout, ele funciona perfeitamente, mas basta eu inserir no layout, que do nada, sem nenhuma explicação lógica, ele some.
Vou colocar os códigos das duas páginas específicas para que os companheiros possam eventualmente encontrar algum erro que eu não consigo ver!
index.html onde está o futuro template:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="[http://www.w3.org/1999/xhtml">](http://www.w3.org/1999/xhtml)
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Meu maldito template</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery-easing-1.3.pack.js"></script>
<script type="text/javascript" src="js/jquery-easing-compatibility.1.2.pack.js"></script>
<script type="text/javascript" src="js/jquery.kwicks-1.5.1.pack.js"></script> <script type="text/javascript">
$().ready(function() {
$('.jimgMenu ul').kwicks({
max : 310,
spacing : 0,
duration: 1500,
easing: 'easeOutBounce'
});
});
</script>
</head>
<body>
<div id="all">
<div id="container"><div id="header">
<div id="logo"><a href="#"><img src="images/logo.png" title="Titulo" alt="Titulo" /></a></div>
<div id="head" class="jimgMenu">
<ul>
<li class="home" title="Titulo"><a href="#">Home</a></li>
<li class="sobre" title="Titulo"><a href="#">Sobre</a></li>
<li class="servicos" title="Titulo"><a href="#">Serviços</a></li>
<li class="frente" title="Titulo"><a href="#">Em Frente</a></li>
<li class="portfolio" title="Titulo"><a href="#">Portfolio</a></li>
<li class="host" title="Titulo"><a href="#">Hospedagem</a></li>
<li class="sitemap" title="Titulo"><a href="#">Mapa do Site</a></li>
<li class="contatos" title="Titulo"><a href="#">Contatos</a></li>
</ul>
</div>
</div><!-- inicio conteudo -->
<div id="main">
<!-- inicio menu lateral -->
<div id="menu">
<h1>Recentes</h1>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Sobre</a></li>
<li><a href="#">Serviços</a></li>
<li><a href="#">Blog / Artigos</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Hospedagem</a></li>
<li><a href="#">Mapa do Site</a></li>
<li><a href="#">Contatos</a></li>
</ul>
</div> <div id="text">
<h1>Bem Vindo</h1>
<p><b>Conteúdo</b></p>
<h1>Lorem ipsum</h1>
<p>Suspendisse egestas tincidunt erat. Proin tellus lacus, luctus vitae, ultrices vel, tincidunt vitae, quam. Proin sed enim. Nullam lobortis. Phasellus nec urna sit amet nibh iaculis consequat. Maecenas nisi eros, volutpat a, sagittis vitae, semper vestibulum, nibh. Integer euismod ante et ipsum</p>
</div>
</div><!-- inicio rodape -->
<div id="footer">
<div id="left_footer">licenced by <a href="#">MemHT</a></div>
<div id="right_footer">
© Copyright 2009 - MS Criações - Todos os direitos reservados ao autor!</div>
</div></div>
</div>
<div id="bottom">
<div id="bottom_center"></div>
</div>
</body>
</html>
Folha de estilos CSS responsável pela bagunça:
body {
margin:0; font-size:11px;
line-height:16px;
font-family:Arial, Tahoma, Helvetica, sans-serif;
background-color:#000000;
color:#FFFFFF;
}#all {background:url(images/body_bckg.jpg) repeat-x #60ce1a;}
#container {width:960px; margin:0 auto;}
/MENU DO TOPO/
.jimgMenu {
position:relative;
margin: 5px 0px 0px 0px;
padding: 0px;
width:700px;
height:180px;
overflow: hidden;
} list-style: none;
margin: 0px;
padding: 0px;
display: block;
height: 180px;
position: relative;
} width: 86px;
float: left;
display: block;
overflow: hidden;
} text-indent: -1000px;
background:#fff repeat scroll 0%;
border-right: 2px solid #fff;
cursor:pointer;
display:block;
overflow: hidden;
height: 180px;
} background: url(images/home.jpg) repeat scroll 0%;
} background: url(images/sobre.jpg) repeat scroll 0%;
} background: url(images/servicos.jpg) repeat scroll 0%;
} background: url(images/portal.jpg) repeat scroll 0%;
} background: url(images/portfolio.jpg) repeat scroll 0%;
} background: url(images/host.jpg) repeat scroll 0%;
} background: url(images/sitemap.jpg) repeat scroll 0%;
} background: url(images/contato.jpg) repeat scroll 0%;
border-right-style: none;
}#header {background:url(images/head_bckg.jpg) no-repeat #000000; height:186px;}
#logo {padding:9px 20px; width:215px; float:left; text-align:center;}
#logo a {color:#FFFFFF; text-decoration:none; font-size:16px; text-transform:uppercase;}
#head {float:right; width:690px;}
#main {background:url(images/textarea_bckg.jpg) no-repeat #000000; float:left; width:100%; min-height:250px;}
#menu {float:left; width:215px; padding:25px;}
#menu ul {list-style:none; padding:0; margin:0;}
#menu a {font-size:14px; font-style:italic; text-decoration:none; color:#FFFFFF; display:block; width:180px; height:20px; padding:5px 10px 0 10px; border-bottom:1px solid #4c4c4c; text-transform:lowercase;}
#menu a:hover {background-color:#1c1c1c;}
#text {padding:15px 20px 20px 290px;}
#footer {background:url(images/footer_text.jpg) no-repeat #000000; height:16px; color:#858383; font-size:11px; padding:59px 30px 0 30px; clear:both;}
#left_footer {float:left;}
#right_footer {float:right;}
#bottom {background:url(images/footer_bckg.jpg) repeat-x #000000;}
#bottom_center {
width:960px;
background:url(images/center_foot.jpg) no-repeat #000000;
height:85px;
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
}
Galera... já revirei esse código umas mil vezes procurando descobrir qualé o problema com esse menu e num acho... a única coisa que percebi, é que o problema só ocorre com os UL's no seguinte trecho:
<ul>
<li class="home" title="Titulo"><a href="#">Home</a></li>
<li class="sobre" title="Titulo"><a href="#">Sobre</a></li>
<li class="servicos" title="Titulo"><a href="#">Serviços</a></li>
<li class="frente" title="Titulo"><a href="#">Em Frente</a></li>
<li class="portfolio" title="Titulo"><a href="#">Portfolio</a></li>
<li class="host" title="Titulo"><a href="#">Hospedagem</a></li>
<li class="sitemap" title="Titulo"><a href="#">Mapa do Site</a></li>
<li class="contatos" title="Titulo"><a href="#">Contatos</a></li>
</ul>
Quando eu removo o menu ele para com o problema... mas, sem lógica, já que o MESMO MENU em uma página separada funciona sem problemas!!!
Agradeço de imediato a ajuda de todos...
Super abraços!
Carregando comentários...