Ir para conteúdo

POWERED BY:

Arquivado

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

Filipe Fialho de Moraes

Problemas no list-style

Por , em Desenvolvimento frontend

Recommended Posts

Filipe Fialho de Moraes    0

Filipe Fialho de Moraes
Postado

Opa pessoal, beleza?!

 

To implementando aqui um hot-site e me deparei com um bug do IE.

 

Nos navegadores normais ele aparece assim: imagem1uu.jpg

 

Mas no IE, (independente da versão) em modo de compatibilidade, ele aparece assim : imagem2ze.jpg

 

Aqui vai o código pra vocês entenderem como ele esta:

 

<!DOCTYPE html>
<html>
   <head>
       <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
       <link rel="stylesheet" type="text/css" media="screen" href="css/bootstrap.css" />
       <script type="text/javascript" src="js/bootstrap.min.js"></script>
       <title>1° Congresso Norte-Nordeste de Gestão em Saúde</title>
       <style type="text/css">
           body{
               background-image: url('img/bg.jpg');
               background-repeat: repeat-x;
           }
           #menu ul {
               padding:0px;
               margin:0px;
               float: left;
               width: 951px;
               height: 35px;
               background-image: url('img/bg_menu.jpg');
               background-repeat: no-repeat;
               list-style:none;
           }
           #menu ul li { display: inline; }
           #menu ul li a {
               padding: 8px 50px;
               float:left;
               color: #FFF;
               text-transform: uppercase;
               /* visual do link */

           }
           #menu ul li a:hover {
               text-transform: uppercase;
               /*background-color:#D6D6D6;
               color: #6D6D6D;
               border-bottom:3px solid #EA0000;*/
           }
           .conteudo{
               width: 950px;
               height: 350px;
               background-color:#e7f6f8;
               border:1px solid #CCC;
               margin-top: 10px;
           }
           .texto{
               color: #0055cc;
               font-family: sans-serif;
               font-size: 14px;
           }
       </style>
   </head>
   <body>
       <div class="container">
           <div class="span12">
               <img src="img/logo.png" alt="logo" />
           </div>
           <div class="span12">
               <nav id="menu">
                   <ul>
                       <li><a href="#">O Congresso</a></li>
                       <li><a href="#">Público Alvo</a></li>
                       <li><a href="#">Programa</a></li>
                       <li><a href="#">Contato</a></li>
                       <li><a href="#">Inscreva-se</a></li>
                   </ul>
               </nav>
           </div>
           <div class="span12 conteudo">
               <p>O 1º Congresso Norte-Nordeste em Gestão de Saúde foi cuidadosamente 
                   elaborado através de uma intensa e direcionada pesquisa de mercado com 
                   os players de saúde das regiões norte e nordeste do Brasil, o que tornou possível 
                   o desenvolvimento de uma das agendas mais completas para a realidade e tendências locais.</p>
                <p>Com o foco em “A Gestao na Saúde: Os Novos Desafios e Perspectivas”, o evento será dirigido 
                    a profisisonais do segmento das principais instituições da cadeia de saúde do brasil e será,
                    sem dúvida, uma oportunidade extraordinária para refletir e aprimorar o setor de saude brasileiro nos   
                    contextos das regiões norte e nordeste.</p>
                  <p>Este evento é dirigido aos líderes da cadeia de saúde com foco em benchmarking para
                      o desenvolvimento de novas diretrizes estratégicas e proporcionará um intenso networking 
                      com os players de tobo o brasil.</p>
           </div>
       </div>
   </body>
</html>

 

 

Alguém ai consegue entender o porquê?! E se entenderem, por favor me ajudem.

Desde já fica meu agradecimento.

 

Administrador, por favor excluir os tópicos iguais a este, criou mais de 1

Compartilhar este post

Link para o post
Compartilhar em outros sites

FK.    0

FK.
Postado

Iaew Filipe. Seu CSS está um pouco problemático, pois olhe a renderização aqui no meu pc:

 

errosx.png

 

É lógico que eu não tenho a logo, e outro arquivo CSS linkado no código HTML que você postou. Não sei o que é aquele bootstrap.css, mas é bom que você use um reset CSS. Procure por isso caso não saiba o que é, irá ajudar muito você. Mas se você observar bem, o menu está dentro dessa div azul, porém a cor dos links está branco, e quase não da para ver.

 

Fiz umas pequenas modificações, ficou ruim, mas aqui funcionou perfeitamente no IE9, e analisando o código, acredito não ter muito problema em versões anterioes; talvez o IE6 de problema pra você, mas eu por exemplo, nem me preocupo com essa... Olha como ficou com a modificação:

 

erro2l.png

 

O código:

 

body {
   background-image: url('img/bg.jpg');
   background-repeat: repeat-x;
}
.container {
   /*Acrescentado*/
   width: 990px;
   margin: 0 auto;
}
#menu ul {
   padding:0px;
   margin:0px;
   float: left;
   height: 35px;
   /*Acrescentado*/ background-color: #045692;
   /*Acrescentado*/ border-radius: 5px;
   background-repeat: no-repeat;
   list-style: none;
}
#menu ul li { display: inline; }
#menu ul li a {
   padding: 8px 49px;
   float:left;
   color: #FFF;
   /*Acrescentado*/ text-decoration: none;
   text-transform: uppercase;
   /* visual do link */           
}
#menu ul li a:hover {
   text-transform: uppercase;
   background-color:#D6D6D6;
   color: #6D6D6D;
   border-bottom:3px solid #EA0000;
}
.conteudo{                
   height: 350px;
   background-color:#e7f6f8;
   border:1px solid #CCC;
   margin-top: 10px;
   /*Acrescentado*/ clear: left;
}
.texto{
   color: #0055cc;
   font-family: sans-serif;
   font-size: 14px;
}

 

Só acrescentei as partes comentadas "Acrescentado". Modifiquei apenas para ficar parecido com a sua imagem. Ainda está bastante problemático, o ideal seria você reestruturar esse CSS. O conteúdo da segunda está todo zuado porque removi aqueles caracteres quando modifiquei a codificação de caracteres.

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