Ir para conteúdo

Arquivado

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

mcareias

Listas aninhadas e bug no IE8 e FF

Por , em Desenvolvimento frontend

Recommended Posts

mcareias    0

mcareias
Postado

Boa noite!

O layout no link abaixo, no IE6 e IE5, só funciona o primeiro nível da lista, mas nem é esse o problema... Está muito feio no FF e IE8 e, por mais que veja o css, não consigo entender o motivo pelo qual a imagem que estiliza a lista fica acima do texto.

Obrigada pela atenção e desculpe se estiver sendo repetitiva...

 

layout errado no IE8 e FF

Compartilhar este post

Link para o post
Compartilhar em outros sites

Thales Caricati    3

Thales Caricati
Postado

Bem, pelo que eu pude ver, quando você determinou o UL do menu, você colocou apenas 130px de largura(width) creio que precise ter mais largura para o menu ficar alinhado. Com relação a list-style você poderia dar uma margin no próprio UL.

 

Num sei se ficaria bom, mais tente ver se assim funciona:

.Menu  ul {
	margin: 30px; /*Aqui vai depender do valor, va alterando e veja até quando está bom*/
	padding: 0;
	list-style: inside url(imagens/botao.png);
	width: 175px; /* Aqui você vê também se está bom, caso não esteja você vai alterando até quando estiver */
	}

Dica: de preferência em seus layouts ao Firefox e no IE 8.

Compartilhar este post

Link para o post
Compartilhar em outros sites

mcareias    0

mcareias
Postado

Obrigada, desculpe a demora, mas só hoje vi a resposta, a notificação do forum parece não estar funcionando.

Enfim.. eu já havia tentado aumentar a largura da ul, mas não funciona.. e a margin está associada ao fundo azul (tag wrap) e apenas afasta toda a lista dela... tenho a impressão de que é um bug do ie8 e, surpreendentemente, do FF. No Chrome, ie7 funciona corretamente...

obrigada, mesmo assim!

Bem, pelo que eu pude ver, quando você determinou o UL do menu, você colocou apenas 130px de largura(width) creio que precise ter mais largura para o menu ficar alinhado. Com relação a list-style você poderia dar uma margin no próprio UL.

 

Num sei se ficaria bom, mais tente ver se assim funciona:

.Menu  ul {
	margin: 30px; /*Aqui vai depender do valor, va alterando e veja até quando está bom*/
	padding: 0;
	list-style: inside url(imagens/botao.png);
	width: 175px; /* Aqui você vê também se está bom, caso não esteja você vai alterando até quando estiver */
	}

Dica: de preferência em seus layouts ao Firefox e no IE 8.

 

Compartilhar este post

Link para o post
Compartilhar em outros sites

mcareias    0

mcareias
Postado

Posta o código do .css e o index para o pessoal pode ver e quem sabe ajudar, também de principio acho que a largura da div está espremendo o conteudo

 

Ok, aí estão o HTML e o CSS... (estou desconfiada de que é o tal hack... já tentei aumentar a largura da UL, da LI e nada! Mas o tal hack... não me parece correto usar a mesma marcação para a lista principal e para a aninhada... acho q. estou errando aí... sei lá! o layout fica quebrado até no FF!)

Lá vai, então, não achei como anexar o arquivo, daí colei os códigos aki mesmo... espero não estar fazendo nada muito impróprio... :/

 

Aí está o XHTML: 

<!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" xml:lang="pt" lang="pt">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="google-site-verification" content="dXhDzMiP4LOT81G-Iq9CEhf92jaVL4Cl1n3pqTyad5w" />
<title>HOME - Cursos de Arte em Goiânia - Milagre dos Peixes</title> 
<meta name="TITLE" content="HOME - Cursos de Arte em Goiânia - Milagre dos Peixes" />
<meta name="DESCRIPTION" content="Página inicial do site Cursos de Arte em Goiânia - Milagre dos Peixes"/>
<meta name="KEYWORDS" content="ononononoononoon"/>
<meta name="AUTHOR" content="Cristina Areias"/>
<meta http-equiv='Expires' content='0' />
<meta http-equiv='Cache-Control' content='no-cache, must-revalidate' />
<meta http-equiv='Pragma' content='no-cache' />
<meta http-equiv="CONTENT-LANGUAGE" content="Português" />
<meta name="RATING" content="Geral" />
<meta name="ROBOTS" content="index,follow" />
<link rel="stylesheet" type="text/css" href="index.css" />
<link rel="shortcut icon" href="imagens/animated_favicon.gif" />
<style type="text/css">td img {display: block;}</style>

</head>

<body>
<script type="text/javascript">
startList = function() {
if (document.all&&document.getElementById) {
navRoot = document.getElementById("nav");
for (i=0; i<navRoot.childNodes.length; i++) {
node = navRoot.childNodes[i];
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" over";
  }
  node.onmouseout=function() {
  this.className=this.className.replace
	(" over", "");
   }
   }
  }
 }
}
window.onload=startList;
</script>

<div class="wrap">

	<div class="header-flash">	
			<object
				data="cabecalho_milpeix.swf" 
				type="application/x-shockwave-flash"
				width="775" 
				height="121" >
				<param name="movie" 
				value="cabecalho_milpeix.swf" />
			</object>
	</div><!--fim da div header-flash--> 
	
	

	
	<div class="Menu">
	
		<ul id="nav">
			<li><a href="#"> INICIAL</a></li>
			<li><a href="#" title="Link para página Quem Somos">QUEM SOMOS</a></li>
			<li><a href="#" title="Link para página Cursos">CURSOS</a> 
				<div class="subMenu">
					<ul> 
						<li><a href="#" title="Link para página Artes Plásticas">Artes Plásticas</a>
							 
								<ul id="artes">
									<li><a href="#">Curso de Ilustração Zoo-Botânica</a> </li>
									<li><a href="#" title="Link para página Quem Somos">Curso de Pintura em Tela</a> </li>
								</ul>
						 
						</li>	
				
						<li><a href="#">Artesanato e Trabalhos Manuais</a>
							 	
								<ul id="artesanato">
									<li><a href="#" title="Link para página Curso de Mosaico">Curso de Mosaico</a></li>
									<li><a href="#" title="Link para página Curso de Marchetaria">Curso de Marchetaria</a></li>
									<li><a href="#" title="Link para página Bordados">Bordados</a></li>
									<li><a href="#" title="Link para página Decoração de Caixinhas">Decoração de Caixinhas</a></li>
								</ul>	
							 
						</li>
				
						<li><a href="#">Paisagismo</a>
							<ul id="paisagismo">
									<li><a href="#" title="Link para página Paisagismo">Paisagismo</a></li>
									<li><a href="#" title="Link para página Jardinagem">Jardinagem</a></li>
									<li><a href="#" title="Link para página Feng Shui no Jardim">Feng Shui no Jardim</a></li>
								</ul>
						 
						</li>
					
						<li><a href="#">Música</a> 
							<ul id="musica">
									<li><a href="#" title="Link para página Curso de Violão">Curso de Violão</a></li>
									<li><a href="#" title="Link para página Curso de Canto">Curso de Canto</a></li>
								</ul>	
							 
						</li>
					
						<li><a href="#">Arte para Adolescentes - Curso de Férias</a>	
							<ul id="adolescente">
									<li><a href="#" title="Link para página História em Quadrinhos e Mangá">História em Quadrinhos e Mangá</a></li>
									<li><a href="#" title="Link para página Intensivo de Violão">Intensivo de Violão</a></li>
									<li><a href="#" title="Link para página Intensivo de Ilustração Zoo-Botânica">Intensivo de Ilustração Zoo-Botânica</a></li>
								</ul>
							 
						</li>
					
						<li><a href="#">Construção de Brinquedos</a></li> 
						<li><a href="#">Desenho de Moda</a></li> 
						<li><a href="#">Yoga e Meditação</a></li> 
						<li><a href="#">Cultura Chinesa</a></li>
					
					</ul>	<!--fecha ul interna Cursos-->	
				</div><!--fecha div SubMenu-->	
						
			</li><!--fecha li Cursos-->
			<li><a href="#">EVENTOS</a></li>
			<li><a href="#">REDES SOCIAIS</a></li> 
			<li><a href="#">BLOG NO SITE!</a></li>
			<li><a href="#">COMO CHEGAR</a></li> 
			 <li><a href="#">CONTATO</a></li>
			<li><a href="#">SELOS</a></li>
		</ul> 
			
	<br /> 
	<br /> 		
	<br /> 
	<br /> 	
	<br /> 
	
	
	<div class="banner"><img src="imagens/banner.gif" alt="banner publicitário" /></div><br /> 
	
	</div><!--fim da div wrap-->
	
	<div class="rodape">	
<span>Site desenvolvido por:  <a href="http://cristinaareias.com/contato.html" target="_blank" title="link para a pgina de formulário de contato com Cristina Areias">Cristina Areias</a></span>
	</div><!--fim da div rodapé-->  
</div><!--fim da div wrap-->  

</body>
</html>

----------------------

E aqui o CSS:

 

/* CSS Document */

/*Cursos de Arte - Milagre dos Peixes Css*/

* { 	margin:0; 	
		padding:0;
}

body {
	background: #F2E692;
	font-family: Tahoma, Verdana, sans-serif;
	font-size: 0.8em;
	color: #333333;
}

a {
	color: #BE501B;
	text-decoration:none;
}

a:hover {
	color: Gray;
	text-decoration:none;
}

.wrap {
	width: 790px;
	margin: 20px auto;
}

/*

<div class="logotipo"><!--div logotipo-->
		<h1>
			<a href="index.html" title="logomarca do site Milagre dos Peixes">
			<span>MILAGRE DOS PEIXES - CURSOS DE ARTE EM GOIÂNIA - GO</span>
			</a>
		</h1>

	<h2>Multiplicando Talentos</h2>	
	</div><!--Fim div logotipo-->
	
.logotipo h1 {
	font-size:1.0em;
	background-image: url(imagens/logotipo.gif);
	background-repeat: no-repeat;
	width: 63px;
	height: 60px;
	margin-top: -10px;
	margin-left: 10px;
}

.logotipo h1 a {
	display:block;
	width: 63px;
	height: 60px;
}

.logotipo h1 span {
	display:none;
}

.logotipo h2 {
	font-size:1em;
	text-align: left;
	top: 130px;
	left: 220px;
	z-index: 2;
}
*/

.header-flash {
	width: 775px;
	height: 121px;
	margin: 0 0 0 15px;
	
}

.Menu   {
	background-image: url(imagens/bg_meio.png);
	background-repeat: repeat-y;
	width: 790px;
	margin: 0 auto;
}

.Menu  ul { 
	margin: 0;
	padding: 0;
	list-style: inside url(imagens/botao.png);
	width: 130px;
	}	

.Menu  ul  li a{ 	
	margin:0;
	padding: 0;
	display: block;
	text-decoration: none;
	border-bottom: 1px solid #8FD1F0;
	}
	
.Menu  ul li { 
	 position: relative;
	}


.Menu   li ul {
	position: absolute;
	left: 129px;
	top: 0;
	display: none;
	}
	
.Menu  li:hover ul { 
	display: block;	
}


.Menu  li.over ul { 
	display: block; 
}
 
/* Fix IE. Hide from IE Mac \*/
* html ul li { float: left; height: 1%; }
* html ul li a { height: 1%; }
/* End */




/*Sub Menu*/
.subMenu  ul { 
	padding: 0;
	width: 270px;  
	}	

.subMenu  ul li { 
	position: relative;
	}

.subMenu  ul li a { 
	margin: 0;
	padding: 0;
	display: block;
	text-decoration: none;
	border-bottom: 1px solid #999;
	}
	
.subMenu li ul li {
	position: absolute;
	left: 269px;
	display: none;
	}
	
.subMenu  li:hover ul li{ 
	display: block;	
}

.subMenu li.over ul li { 
	display: block; 
}
 
/* Fix IE. Hide from IE Mac \*/
* html ul li { float: left; height: 1%; }
* html ul li a { height: 1%; }
/* End */



 /*Lista Artes*/
 ul#artes ul li{ 
	padding: 0;	
	width: 270px; 
	
	}	

 ul#artes li {  
	position: relative;	
	}

 ul#artes li ul li {
	position: absolute;
	left: 269px;
	display: none;
	}
	
 ul#artes  li:hover ul li{ 
	display: block;
}

 ul#artes li.over ul li { 
	display: block; 
}
 
/* Fix IE. Hide from IE Mac \*/
* html ul li { float: left; height: 1%; }
* html ul li a { height: 1%; }
/* End */


 ul#artes li a { 
	display: block;
	text-decoration: none;
	border-bottom: 1px solid #999;
	}
	
	
/*Lista Artesanto*/
 ul#artesanato ul li{ 
	padding: 0;	
	width: 270px; 
	
	}	

 ul#artesanato  li {  
	position: relative;	
	}

 ul#artesanato  li ul li {
	position: absolute;
	left: 269px;
	display: none;
	}
	
 ul#artesanato  li:hover ul li{ 
	display: block;
}

 ul#artesanato  li.over ul li { 
	display: block; 
}
 
/* Fix IE. Hide from IE Mac \*/
* html ul li { float: left; height: 1%; }
* html ul li a { height: 1%; }
/* End */


 ul#artesanato  li a { 
	display: block;
	text-decoration: none;
	border-bottom: 1px solid #999;
	}
	
	
/*Lista Paisagismo*/
	ul#paisagismo ul li{ 
	padding: 0;	
	width: 270px; 
	
	}	
	
 ul#paisagismo li {  
	position: relative;	
	}

 ul#paisagismo li ul li {
	position: absolute;
	left: 269px;
	display: none;
	}
	
 ul#paisagismo  li:hover ul li{ 
	display: block;
}

 ul#paisagismo  li.over ul li { 
	display: block; 
}
 
/* Fix IE. Hide from IE Mac \*/
* html ul li { float: left; height: 1%; }
* html ul li a { height: 1%; }
/* End */


 ul#paisagismo  li a { 
	display: block;
	text-decoration: none;
	border-bottom: 1px solid #999;
	}	
	
	
/*Lista Música*/
	ul#musica ul li{ 
	padding: 0;	
	width: 270px; 
	
	}	
	
	ul#musica li {  
	position: relative;	
	}

	ul#musica li ul li {
	position: absolute;
	left: 269px;
	display: none;
	}
	
	ul#musica li:hover ul li{ 
	display: block;
}

	ul#musica  li.over ul li { 
	display: block; 
}
 
/* Fix IE. Hide from IE Mac \*/
* html ul li { float: left; height: 1%; }
* html ul li a { height: 1%; }
/* End */


	ul#musica  li a { 
	display: block;
	text-decoration: none;
	border-bottom: 1px solid #999;
	}		
	
	
/*Lista Adolescente*/
	ul#adolescente ul li{ 
	padding: 0;	
	width: 270px; 
	
	}	
	
	ul#adolescente  li {  
	position: relative;	
	}

	ul#adolescente  li ul li {
	position: absolute;
	left: 269px;
	display: none;
	}
	
	ul#adolescente  li:hover ul li{ 
	display: block;
}

	ul#adolescente   li.over ul li { 
	display: block; 
}
 
/* Fix IE. Hide from IE Mac \*/
* html ul li { float: left; height: 1%; }
* html ul li a { height: 1%; }
/* End */

	ul#adolescente   li a { 
	display: block;
	text-decoration: none;
	border-bottom: 1px solid #999;
	}	
	
	
.banner {	
	width: 120px;
	height: 60px;
	margin: 0 auto;
	text-align: center;
}

.rodape {
	background-image: url(imagens/bg_rodape.png);
	background-repeat: repeat-y;
	width: 790px;
	margin: 0 auto;
	text-align: center;
}


.rodape span {
	font-size: smaller;
}

.texto {
	width:350px;
	margin:0 0 0 130px;
	text-align: center;
	float: left;
}
	

.w3c {
	z-index:1;
	margin-left: 620px;
}	


.obrigado {
	width:300px;
	font-size: 2em;
	text-align:center;
	margin:50px auto;
}

 

 

 

Valeu!

^..^

ca

Compartilhar este post

Link para o post
Compartilhar em outros sites

mcareias    0

mcareias
Postado

Desculpe a demora em responder! Ajudou muito sim. Ainda não conferi meu erro, mas vi q. seu código está funcionando em todos os navegadores e versões. Vou incluí-lo no restante do código e quando ficar pronto, eu aviso!

Muitíssimo obrigada!

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