Help em menu criado em CSS!

[André Sugai]

Galera, ontem instalei um menu em CSS no meu blog que fica em uma posição fixa na tela, no alto, olhando pelo Firefox o menu aparece de forma correta, centralizado e fixo, porém pelo Internet Explorer o menu aparece totalmente desalinhado com o restante do blog, estou quebrando a cabeça para tentar alinhar mas não faço idéia do que possa ser, alguém poderia dar uma luz? caso queiram visitar a página para ver o erro o link é http://www.tutoriaisphotoshop.blogspot.com, obrigado desde já!!

Abaixo seguem duas fotos em Anexo com a mesma página aberta o Firefox no IE

[fredperes]

Na minha resolução (1680 x 1050) está alinhado à esquerda.

Na minha opinião é porque você especificou 100% de width no menu. Tente colocar a mesma largura do #main e centralizá-lo.

O site http://www.maujor.com.br tem dicas fáceis de centralização na tela.

[André Sugai]

Na minha resolução (1680 x 1050) está alinhado à esquerda.

Na minha opinião é porque você especificou 100% de width no menu. Tente colocar a mesma largura do #main e centralizá-lo.

O site http://www.maujor.com.br tem dicas fáceis de centralização na tela.

Vou experimentar aqui e já já posto os resultados, obrigado pela ajuda!!

[André Sugai]

Como não posso deixar o Blog assim no ar, desinstalei este menu e coloquei o menu antigo que não apresentava este erro no IE, mas vou continuar pesquisando caso encontre a solução posto aqui no tópico... valeu pela ajuda!!

[Rafael Fischmann]

Quando tiver dúvidas assim, cola o código HTML e CSS do menu direto aqui que fica mais fácil tentar ajudar.

[fredperes]

Como não posso deixar o Blog assim no ar, desinstalei este menu e coloquei o menu antigo que não apresentava este erro no IE, mas vou continuar pesquisando caso encontre a solução posto aqui no tópico... valeu pela ajuda!!

O menu estava com erro no Opera também; só para informá-lo.

[André Sugai]

Quando tiver dúvidas assim, cola o código HTML e CSS do menu direto aqui que fica mais fácil tentar ajudar.

Ok, consegui resolver o problema do menu mas arrumando o menu o que sai do lugar é a sidebar

  <style type="text/css">

  /* layout */

body	{
  margin: 0;
  padding: 0;
  border: 0;
  text-align: center;
  color: #555;
  background: #bba url(http://www.salsicha.apanela.com/inferno/imagens/outerwrap.gif) top center repeat-y;
  font: small tahoma, "Bitstream Vera Sans", "Trebuchet MS", "Lucida Grande", lucida, helvetica, sans-serif;
  }

img  {
  border: 0;
  display: block;
  }


  /* Wrapper */

@media all {
  #wrapper  {
	margin: 0 auto;
	padding: 0;
	border: 0;
	width: 990px;
	text-align: left;
	background: #fff url(http://www.salsicha.apanela.com/inferno/imagens/innerwrap.gif) top right repeat-y;
	font-size:90%;
	}
  }
@media handheld {
  #wrapper  {
	width: 90%;
	}
  }

  /* layout interno */

#content  {
  padding: 0 5px;
  }

@media all {
  #main  {
	width: 710px;
	float: left;
	}

  #sidebar  {
	width: 226px;
	float: right;
	}
  }
@media handheld {
  #main  {
	width: 100%;
	float: none;
	}

  #sidebar  {
	width: 100%;
	float: none;
	}
  }

  /* layout  rodapé*/

#footer  {
  clear: left;
  margin: 0;
  padding: 0 20px;
  border: 0;
  text-align: left;
  border-top: 1px solid #f9f9f9;
  background-color: #fdfdfd;
  }

#footer p  {
  text-align: left;
  margin: 0;
  padding: 10px 0;
  font-size: x-small;
  background-color: transparent;
  color: #999;
  }



  /* Links */

a:link, a:visited {
  background: transparent;
  font-weight : bold; 
  text-decoration : none;
  color: #cc3333;

  }

a:hover {
  font-weight : bold; 
  text-decoration : underline;
  color: #6633ff;
  background: transparent; 
  }

a:active {
  font-weight : bold; 
  text-decoration : none;
  color: #cc3333;
  background: transparent;  
  }


  /* Tipografia */

#main p, #sidebar p {
  line-height: 140%;
  margin-top: 5px;
  margin-bottom: 1em;
  }

.post-body {
  line-height: 140%;
  } 

h2, h3, h4, h5  {
  margin: 25px 0 0 0;
  padding: 0;
  }

h3
{color:#9E5205;font-size: large; font-weight:bold;font-family:Verdana,Sans-Serif;letter-spacing:-1px;}

h2
{margin:10px 0px 0px 0px;color:#777777;font-size:105%;}

/*h2  {
  font-size: large;
  }

h3.post-title {
  margin-top: 5px;
  font-size: medium;
  }
*/

ul  {
  margin: 0 0 25px 0;
  }

li  {
  line-height: 160%;
  }

#sidebar ul   {
  padding-left: 10px;
  padding-top: 3px;
  }

#sidebar ul li {
  list-style: disc url(http://www.salsicha.apanela.com/inferno/imagens/diamond.gif) inside;
  vertical-align: top;
  padding: 0;
  margin: 0;
  }

#comments  {
  border: 0;
  border-top: 1px dashed #eed;
  margin: 10px 0 0 0;
  padding: 0;
  }

#comments h3  {
  margin-top: 10px;
  margin-bottom: -10px;
  font-weight: normal;
  font-style: italic;
  text-transform: uppercase;
  letter-spacing: 1px;
  }  

#comments dl dt   {
  font-weight: bold;
  font-style: italic;
  margin-top: 35px;
  padding: 1px 0 0 18px;
  background: transparent url(http://www.salsicha.apanela.com/inferno/imagens/commentbug.gif) top left no-repeat;
  color: #bba;
  }

#comments dl dd  {
  padding: 0;
  margin: 0;
  }
.deleted-comment {
  font-style:italic;
  color:gray;
  }


/* Citações */

blockquote.style1 {
  font: 14px/20px italic Times, serif;
  padding-left: 70px;
  padding-top: 18px;
  padding-bottom: 18px;
  padding-right: 10px;
  background-color: #dadada;
  border-top: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
  margin: 5px;
  background-image: url(http://www.salsicha.apanela.com/inferno/Botoes/examplequote.gif);
  background-position: middle left;
  background-repeat: no-repeat;
  text-indent: 23px;
} 
.style3 {
	font-size: 14px
}

/* Menu  */

		#nav
{
	width: 100%;
	height: 25px;
	border-bottom: 0px solid white;
	color: white;
	background-color: #202020;
	opacity: 0.8;
	-moz-opacity: 0.8;
	filter:progid:DXImageTransform.Microsoft.Alpha(opacity=60);
	position: fixed;
	top: 0px;
	margin-left: 0px;
	margin-top: 0px;
	padding: 0px;
	z-index: 99;
	_position: absolute;
	_top: expression((dummy = document.documentElement.scrollTop) + "px");
}

#nav li
{
	display: block;
	float: left;
	height: 25px;
	width: auto;
	text-align: center;
	line-height: 25px;
	color: white;
	text-decoration: none;
	font-weight: bold;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
}

#nav li a
{
	display: block;
	padding-left: 15px;
	padding-right: 15px;
	line-height: 25px;
	color: white;
	text-decoration: none;
	font-weight: bold;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
}

#nav li a:hover
{
	background-color: #666666;
}
.navlist ul
{
margin-left: 0;
padding-left: 0;
white-space: nowrap;
}

.navlist li
{
display: inline;
list-style-type: none;
}

.navlist a { padding: 3px 10px; }

.navlist a:link, .navlist a:visited
{
color: #fff;
background-color: #369;
text-decoration: none;
}

.navlist a:hover
{
color: #fff;
background-color: #427bb4;
text-decoration: none;
}
  </style>

e no body vão os links

<ul id="nav">
	 	   <li><a href="http://www.tutoriaisphotoshop.blogspot.com">Home</a></li>
		   <li><a href="http://tutoriaisphotoshop.blogspot.com/2006/10/arquivo-de-tutoriais.html">Tutoriais Anteriores</a></li>
		   <li><a href="#">Matérias</a></li>
		   <li><a href="#">Palestras, Workshops e Eventos</a></li>
		   <li><a href="http://tutoriaisphotoshop.blogspot.com/2006/10/ps-help.html">PS Help!</a></li>
	   <li><a href="http://tutoriaisphotoshop.blogspot.com/2006/12/ps-downloads.html">PS Downloads</a></li>
	   <li><a href="mailto:guitarfreaks@gmail.com?subject=Contato Tutoriais Photoshop">Contato</a></li>
</ul>

Caso alguém possa ajudar eu agradeço!!

[André Sugai]

Descobri que existia (não me pergunte o porque) um conflito entre o body e o menu, deixando o body no desabilitado o menu fica centralizado no IE, mas se eu fizesse isso perdia todas as minhas preferências para o body, então o que fiz foi usar um CSS Hack que diz para navegadores como Firefox, Safari (não sei se o Opera entra nessa) para ler o body enquanto o IE ignora, então antes do body coloquei seguinte código html>body { .... }; , é lógico que o IE mostra todo o conteúdo do blog sem minhas prefeências mas tudo bem.. pelo menos resolvi o problema do menu... caso queira ver, façam o teste no IE e no Firefox e vejam a diferença nas fontes... obrigado a todos pela força!!

http://www.tutoriaisphotoshop.blogspot.com

[fredperes]

Descobri que existia (não me pergunte o porque) um conflito entre o body e o menu, deixando o body no desabilitado o menu fica centralizado no IE, mas se eu fizesse isso perdia todas as minhas preferências para o body, então o que fiz foi usar um CSS Hack que diz para navegadores como Firefox, Safari (não sei se o Opera entra nessa) para ler o body enquanto o IE ignora, então antes do body coloquei seguinte código html>body { .... }; , é lógico que o IE mostra todo o conteúdo do blog sem minhas prefeências mas tudo bem.. pelo menos resolvi o problema do menu... caso queira ver, façam o teste no IE e no Firefox e vejam a diferença nas fontes... obrigado a todos pela força!!

http://www.tutoriaisphotoshop.blogspot.com

Testei aqui no FF, Opera e IE:

. as fontes mudaram no IE mesmo;

. o menu esta alinhado à esquerda, nos três navegadores.

Você não queria centralizá-lo

[André Sugai]

Descobri que existia (não me pergunte o porque) um conflito entre o body e o menu, deixando o body no desabilitado o menu fica centralizado no IE, mas se eu fizesse isso perdia todas as minhas preferências para o body, então o que fiz foi usar um CSS Hack que diz para navegadores como Firefox, Safari (não sei se o Opera entra nessa) para ler o body enquanto o IE ignora, então antes do body coloquei seguinte código html>body { .... }; , é lógico que o IE mostra todo o conteúdo do blog sem minhas prefeências mas tudo bem.. pelo menos resolvi o problema do menu... caso queira ver, façam o teste no IE e no Firefox e vejam a diferença nas fontes... obrigado a todos pela força!!

http://www.tutoriaisphotoshop.blogspot.com

Testei aqui no FF, Opera e IE:

. as fontes mudaram no IE mesmo;

. o menu esta alinhado à esquerda, nos três navegadores.

Você não queria centralizá-lo

Oi, Fred, sim, queria centralizar, mas centralizar o Menu todo e não os links, estes são centralizados a esquerda mesmo, dê uma olhada nos dois anexos que deixei no tópico, antes o Menu começava da metade da tela para a direita no IE e no Firefox aparecia do jeito certo.. eu só não entendi o que o body tinha haver com isso.. mas...