André Sugai Postado 18 de janeiro de 2008 Denunciar Compartilhar Postado 18 de janeiro de 2008 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 Citar Link para o comentário Compartilhar em outros sites More sharing options...
fredperes Postado 18 de janeiro de 2008 Denunciar Compartilhar Postado 18 de janeiro de 2008 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. Citar Link para o comentário Compartilhar em outros sites More sharing options...
André Sugai Postado 18 de janeiro de 2008 Autor Denunciar Compartilhar Postado 18 de janeiro de 2008 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!! Citar Link para o comentário Compartilhar em outros sites More sharing options...
André Sugai Postado 18 de janeiro de 2008 Autor Denunciar Compartilhar Postado 18 de janeiro de 2008 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!! Citar Link para o comentário Compartilhar em outros sites More sharing options...
Rafael Fischmann Postado 18 de janeiro de 2008 Denunciar Compartilhar Postado 18 de janeiro de 2008 Quando tiver dúvidas assim, cola o código HTML e CSS do menu direto aqui que fica mais fácil tentar ajudar. Citar Link para o comentário Compartilhar em outros sites More sharing options...
fredperes Postado 18 de janeiro de 2008 Denunciar Compartilhar Postado 18 de janeiro de 2008 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. Citar Link para o comentário Compartilhar em outros sites More sharing options...
André Sugai Postado 18 de janeiro de 2008 Autor Denunciar Compartilhar Postado 18 de janeiro de 2008 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!! Citar Link para o comentário Compartilhar em outros sites More sharing options...
André Sugai Postado 18 de janeiro de 2008 Autor Denunciar Compartilhar Postado 18 de janeiro de 2008 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 Citar Link para o comentário Compartilhar em outros sites More sharing options...
fredperes Postado 19 de janeiro de 2008 Denunciar Compartilhar Postado 19 de janeiro de 2008 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 Citar Link para o comentário Compartilhar em outros sites More sharing options...
André Sugai Postado 19 de janeiro de 2008 Autor Denunciar Compartilhar Postado 19 de janeiro de 2008 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... Citar Link para o comentário Compartilhar em outros sites More sharing options...
Posts Recomendados
Participe do debate
Você pode postar agora e se registrar depois. Se você tem uma conta, entre agora para postar com ela.