Incompatibilidade Firefox x Explorer

Dieguinn · Setembro 28, 2009

E ae gente, gostaria de saber o que esta acontecendo, aqui em ksa qnd abro no Explorer fica normal... mas no firefox fica totalmente desconfigurado. Podem me dar uma maozinha?

ESTOU DISPONIBILIZANDO O CODIGO CSS E O HTML !

Codigo HTML:


<html>
 <head>
  <title>Portal da Sociedade Inclusiva</title>
   <link rel="stylesheet" type="text/css" href="css/home1.css" />
 </head>
 <body>
  <center>
   <!-- ************************* -->
   <!-- DIV GERAL -->
   <div id="geral" align="center"> 
    <!-- *************************--> 
    <!-- TOPO DO SITE -->
    <div class="topo"><img src="fig/logo.gif" alt="Sociedade Inclusiva" width="100%" height="110"  />
    </div> 
    <!-- FIM TOPO -->
    <!-- ************************* -->
    <!-- MENU DA ESQUERDA -->
     <div class="menuEsquerdo">
      <ul>
     
     <p><a title="Menu Principal"><b>Menu</b></a>
         <br/>
     </p>
     <li><a href="index.html" title="Página Inicial">Principal</a></li>
     <li><a href="conceito.html" target="central" title="Conceito da Inclusão">Conceito</a></li>
     <li><a href="historico.html" target="central" title="Histório na PUC MINAS">Histórico (PUC)</a></li>
     <li><a href="historico2.html" target="central" title="Histório na Europa">Histórico (Europa)</a></li>
     <li><a href="anais.html" target="central" title="Anais">Anais</a></li>
     <li><a href="cursosextensao/index.php" target="_blank" title="Educaçao Especial">Curso de        Extensão</a></li>
     <li><a href="forum_m.html" target="central" title="Fórum Mineiro de Educação">Fórum Mineiro</a></li>
     <li><a href="midia.html" title="Sugestões ">Sugestão de Mídia</a></li> 
     <li><a href="eventos.html" target="central" title="Arquivo do Site">Eventos Passados</a></li> 
     <li><a href="contato.html" target="central" title="Fale conosco">Contato</a></li>
    
     <br/>
     <br/>
     <a title="Cartilhas"><b>Cartilhas</b></a> 
     <li><a title="Direitos dos Idosos" href="cart_idoso.php">Idoso</a></li>
     <li><a title="Direitos de Pessoa com Deficiência" href="cart_def.php">Pessoa com        Deficiência</a></li> 
     <li><a title="Direitos Sexuais" href="cart_sex.php">Direitos Sexuais</a></li> 
     <li><a title="Direitos Étnico-Raciais" href="cart_rac.php">Étnico-Racial</a></li>
     <br/>

    
    </ul>
     </div> <!-- FIM MENU ESQUERDA -->
     <!-- ************************* -->
     <!-- CENTRO -->
     <div class="centro">
      <iframe  src ="index.html" name="central" width=500px height=493px scrolling=”auto” >  
      
 
     </iframe> 
     </div> <!-- FIM CENTRO -->
     <!-- ************************* -->
     <!-- MENU DIREITO -->
     <div class="menuDireita">
      <p> </p>
     <p><a title="Mural Geral"><b>Mural Geral</b></a>
       
         <br/>
     </p>
     <li><a title="Curso de Extensao" href="cursosextensao/index.php" target="_blank">Curso de Extensão Educação Especial</a></li>
     <br/>
    
     <li><a title "Curso gratuito para deficientes" href="cursocap.php" target="_blank">Cursos gratuitos para pessoas com defiência</a></li> 
     <br/>
    
     <li><a title="Curso gratuito a diferenca" href="cadext/insinf.html">Curso gratuito direito a diferença (reaberto)</a></li> 
     <br/>
     <br/>
     <a title="Livros"><b>Livros</b></a>
     <li><a href="livros.php" title="2008">2008</a></li>

     <br/>
     <br/>
     <a title="Núcleos da Sociedade Inclusiva"><b>Núcleos</b></a>
     <li><a href="nucleo_rac.php">Inclusão Racial</a></br></li>
     <br/>
     <br/>
     <br/>
     <br/>
      
    </div> <!--FIM MENU DIREITO -->
     <!-- ************************* -->
     <!-- RODAPE -->
     <div class="rodape">
      ©2007 | <a href="webmaster.php">Webmaster</a> | <a href="mapa.php">Mapa do Site</a>| <a href="contato.php">Contato</a> | <strong>Pro Reitoria de Extensão - <a     href="http://www.pucminas.br" target="_blank">PUC 
    Minas</a> - Belo Horizonte -     MG</strong><strong>
   </div> 
     <!-- FIM RODAPE -->
   </div> <!-- FIM DIV GERAL -->
  </center>
 </body>
</html>

Codigo CSS :

body{
	background-color:#f1f3f0;
	font-family:Verdana;
	font-size:12pt;
	
}

div.menubv {
	float:left;
	font-weight:bold;
	font-size:13pt;
	font-color:#b7daf8;
	margin:0;
	border-left:solid 1px black;
	background-color:#6699FF;
	width:123px;
}

div.menubv ul{
	width: 100%;
	margin:0;
	border-bottom-style: solid;
	border-bottom-width: 1px;
	border-bottom-color: black;
}

div.menubv ul li{
	background-color: #b7daf8;
	border-top-style: solid;
	border-top-width: 1px;
	border-top-color: black;
	list-style:none;
	text-align:left;
	height:20px;
	margin:0;
}

div.menubv ul li p{
	text-decoration: none;
	color:black;
	width: 100%;
	height:100%;
	margin:0;
	background-color:#f6e1c8;
}

div.menubv ul li a{
	background-color:#b7daf8;
	text-decoration: none;
	color:black;
	width: 100%;
	height:100%;
	margin:0;
	display:block;
    
	}

div.menubv ul li a:hover{
background-color:#f1f3f0;
font-style: italic;
}

div.titulo{
	margin:0;
	width:760px;
	height:50px;
	border-top-style:solid;
	border-top-width:1px;
	border-top-color:black;
	border-left-style:solid;
	border-left-width:1px;
	border-left-color:black;
	border-right-style:solid;
	border-right-width:1px;
	border-right-color:black;
	padding:0px;
}

div.main {
	float:left;
	border-style: solid;
	border-width: 1px;
	border-color: black;
	background-color:white;
	width:539px;
	text-align:justify;
	padding:5px;
	margin:0;
	height:100%;
}

div.main h2{
	text-align:center;
	font-weight:bold;
	margin:2px;
}


div.menudir{
	float:right;
	background-color:#FFCB90;
	border-right-style:solid;
	border-right-width:1px;
	border-right-color:black;
	border-top-style:solid;
	border-top-width:1px;
	border-top-color:black;
	border-bottom-style:solid;
	border-bottom-width:1px;
	border-bottom-color:black;
	list-style:none;
	font-weight:bold;;
	font-size:13pt;
	margin:0px;
	text-align:center;
	width:107px;
	clear:both;
	background-image:url("bgmenudir.jpg");
}

div.pai{
	width:785px;
	height:500px;
}

div.rodape{
	padding-top:0;
	margin-top:0;
	background-color:#FFCB90;
	color:black;
	text-align:center;
	width:793px;
	float:left;
	clear:none;
	border-style:solid;
	border-width:1px;
	border-color:black;
	
}

div.menuacess{
	width:529px;
	height:35px;
	text-align:center;
	background-image:url("bgacess.jpg");
	border:solid 1px black;
	margin:0px;
	padding-left:3px;
}

div.menuacess img{
	border:none;
	margin-left:10px;
	margin-right:10px;
	margin-top:3px;
	float:right;
}

div.menuacess p{
	float:left;
	font-weight:bold;
	font-size:13pt;
	margin-top:17px;
}

Muito obrigado!!!

Dee · Setembro 28, 2009

O que ta estranho ?? nao consegui ver

Aprendiz CSS · Setembro 28, 2009

posta um print do erro

Dieguinn · Setembro 28, 2009

Ai ta dando erro nao gente?

Tipo que aqui to sem firefox, tenho acesso somente ao explorer, no explorer ta beleza, ta dando erro eh somente no Firefox.. eu acho.

Mas nao consegui ajeitar algumas coisas... Tem algumas dicas para enxutar meu codigo CSS, e algumas dicas em si? Primeira vez q trabalho com isso hehe.

Brigado!

Dee · Setembro 28, 2009

O que está estranho ??

Não temos bola de LCD

Thiago Retondar · Setembro 28, 2009

Qual erro está dando? Pode postar um link para essa página, fica mais fácil. ;)

Não é muito bom misturar formatação com HTML, tal como aqui http://forum.imasters.com.br/public/style_emoticons/default/seta.gif <div id="geral" align="center">. Separe tudo, fica mais organizado. ;)

http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

Dieguinn · Setembro 28, 2009

Qual erro está dando? Pode postar um link para essa página, fica mais fácil. ;)

Não é muito bom misturar formatação com HTML, tal como aqui http://forum.imasters.com.br/public/style_emoticons/default/seta.gif <div id="geral" align="center">. Separe tudo, fica mais organizado. ;)

http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

No FIREFOX ele fica todo desconfigurado... com o menu da direita abaixo da div central, e abaixo do menu da esqquerda... mas no explorer fica normal.

O que pode ser ?

Thiago Retondar · Setembro 28, 2009

Primeira coisa. Inicie sempre com um Reset CSS básico, como:

*{
margin: 0;
padding: 0;
}

Veja se resolver.

Dieguinn · Setembro 28, 2009

Primeira coisa. Inicie sempre com um Reset CSS básico, como:
*{
margin: 0;
padding: 0;
}
Veja se resolver.

Tipo oq poe nesse * ? poe * mesmo ? Primeira coisa no css ?

Thiago Retondar · Setembro 28, 2009

Sim. Era só pesquisar por CSS Reset. http://forum.imasters.com.br/public/style_emoticons/default/closedeyes.gif

Dieguinn · Setembro 28, 2009

Tipo que o site ficou assim agora :

Como faço pra que o menu esquerdo volte a ficar como esta o do direito ?

=p

Lembrando que ai ta no firefox... vo te mostrar como fica no explorer...

Thiago Retondar · Setembro 28, 2009

E como é para ficar? O da direita está apenas com o list-style-type "ativado".

Estude CSS, dar as respostas para você não levará a nada.

http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

Edit

Agora que você postou a segunda imagem...

Verifique as contas da somas das colunas, tire as bordas, isso tudo influência para que o layout quebre.

Dieguinn · Setembro 28, 2009

E como é para ficar? O da direita está apenas com o list-style-type "ativado".

Estude CSS, dar as respostas para você não levará a nada.

http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

Edit

Agora que você postou a segunda imagem...

Verifique as contas da somas das colunas, tire as bordas, isso tudo influência para que o layout quebre.

Tem alguma soma que tem que seguir ? Nao pode ultrapassar e tal...

(Desculpa pelo incomodo, e pq tenho que arrumar isso ate amanha, so novato ainda no estagio hehe.)

2Flex · Setembro 28, 2009

Olá,

Amigo fiz umas alterações no seu código, espero que não se importe mas coloquei-o de uma forma mais limpa:

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
	<title>Portal da Sociedade Inclusiva</title>
	<meta http-equiv="content-type" content="text/html;charset=utf-8" />
	<link rel="stylesheet" type="text/css" href="style.css" />
</head>

<body>
	<!-- DIV GERAL -->
	<div id="geral"> 
	 
	<!-- TOPO DO SITE -->
		<div class="topo">
			<img src="fig/logo.gif" alt="Sociedade Inclusiva" width="100%" height="110" />
		</div> 
	<!-- FIM TOPO -->
	
	<!-- MENU DA ESQUERDA -->
		<div class="menuEsquerdo">
			<ul>
				<p>
					<a title="Menu Principal"><b>Menu</b></a><br />
				</p>
				<li><a href="index.html" title="Página Inicial">Principal</a></li>
				<li><a href="conceito.html" target="central" title="Conceito da Inclusão">Conceito</a></li>
				<li><a href="historico.html" target="central" title="Histório na PUC MINAS">Histórico (PUC)</a></li>
				<li><a href="historico2.html" target="central" title="Histório na Europa">Histórico (Europa)</a></li>
				<li><a href="anais.html" target="central" title="Anais">Anais</a></li>
				<li><a href="cursosextensao/index.php" target="_blank" title="Educaçao Especial">Curso de        Extensão</a></li>
				<li><a href="forum_m.html" target="central" title="Fórum Mineiro de Educação">Fórum Mineiro</a></li>
				<li><a href="midia.html" title="Sugestões ">Sugestão de Mídia</a></li> 
				<li><a href="eventos.html" target="central" title="Arquivo do Site">Eventos Passados</a></li> 
				<li><a href="contato.html" target="central" title="Fale conosco">Contato</a></li>
				<br />
				<br />
				
				<a title="Cartilhas"><b>Cartilhas</b></a> 
				
				<li><a title="Direitos dos Idosos" href="cart_idoso.php">Idoso</a></li>
				<li><a title="Direitos de Pessoa com Deficiência" href="cart_def.php">Pessoa com        Deficiência</a></li> 
				<li><a title="Direitos Sexuais" href="cart_sex.php">Direitos Sexuais</a></li> 
				<li><a title="Direitos Étnico-Raciais" href="cart_rac.php">Étnico-Racial</a></li>
				<br/>
			</ul>
		</div> <!-- FIM MENU ESQUERDA -->
	
	<!-- CENTRO -->
		<div class="centro">
			<iframe  src ="index.html" name="central" width=500px height=493px scrolling=”auto” >  
			</iframe> 
		</div> 
	<!-- FIM CENTRO -->
	
	<!-- MENU DIREITO -->
		<div class="menuDireita">
			<p></p>
			<p><a title="Mural Geral"><b>Mural Geral</b></a>
			<br />
			</p>
			<li>
				<a title="Curso de Extensao" href="cursosextensao/index.php" target="_blank">Curso de Extensão Educação Especial</a>
			</li>
			<br />
			<li>
				<a title "Curso gratuito para deficientes" href="cursocap.php" target="_blank">Cursos gratuitos para pessoas com defiência</a>
			</li> 
			<br />
			<li>
				<a title="Curso gratuito a diferenca" href="cadext/insinf.html">Curso gratuito direito a diferença (reaberto)</a>
			</li> 
			<br />
			<br />
			<a title="Livros"><b>Livros</b></a>
			<li>
				<a href="livros.php" title="2008">2008</a>
			</li>
			<br />
			<br />
			<a title="Núcleos da Sociedade Inclusiva"><b>Núcleos</b></a>
			<li>
				<a href="nucleo_rac.php">Inclusão Racial</a>
			</li>
			<br />
			<br />
			<br />
			<br />
		</div> 
	<!--FIM MENU DIREITO -->
	
	<!-- RODAPE -->
		<div class="rodape">
			©2007 | <a href="webmaster.php">Webmaster</a> | <a href="mapa.php">Mapa do Site</a> | <a href="contato.php">Contato</a> | <strong>Pro Reitoria de Extensão - <a     href="http://www.pucminas.br" target="_blank">PUC Minas</a> - Belo Horizonte -     MG</strong>
		</div> 
	<!-- FIM RODAPE -->
	</div>
	<!-- FIM DIV GERAL -->
</body>
</html>

CSS:

* {
	margin: 0px;
	padding: 0px;
}

body {
	background-color: #f1f3f0;
	font-family: Verdana;
	font-size: 12pt;     
}

div.menubv {
	float: left;
	font-weight: bold;
	font-size: 13pt;
	color: #b7daf8;
	margin: 0px;
	border-left: 1px solid black;
	background-color: #6699FF;
	width: 123px;
}

div.menubv ul {
	width: 100%;
	margin: 0px;
	border-bottom: 1px solid black;
}

div.menubv ul li {
	background-color: #b7daf8;
	border-top: 1px solid black;
	list-style: none;
	text-align: left;
	height: 20px;
	margin: 0px;
}

div.menubv ul li p {
	text-decoration: none;
	color: black;
	width: 100%;
	height: 100%;
	margin: 0px;
	background-color: #f6e1c8;
}

div.menubv ul li a {
	background-color: #b7daf8;
	text-decoration: none;
	color: black;
	width: 100%;
	height: 100%;
	display: block;
}

div.menubv ul li a:hover {
	background-color: #f1f3f0;
	font-style: italic;
}

div.titulo {
	width: 760px;
	height: 50px;
	border-top: 1px solid black;
	border-left: 1px solid black;
	border-right: 1px solid black;
	padding: 0px;
}

div.main {
	float: left;
	border: 1px solid black;
	background-color: white;
	width: 539px;
	text-align: justify;
	padding: 5px;
	height: 100%;
}

div.main h2 {
	text-align: center;
	font-weight: bold;
	margin: 2px;
}


div.menudir {
	float: right;
	background-color: #FFCB90;
	border-right: 1px solid black;
	border-top: 1px solid black;
	border-bottom: 1px solid black;
	list-style: none;
	font-weight: bold;
	font-size: 13pt;
	text-align: center;
	width: 107px;
	background-image: url("bgmenudir.jpg");
}

div.pai {
	width: 785px;
	height: 500px;
}

div.rodape {
	background-color: #FFCB90;
	color: black;
	text-align: center;
	width: 793px;
	float: left;
	clear: none;
	border: 1px solid black;  
}

div.menuacess {
	width: 529px;
	height: 35px;
	text-align: center;
	background-image: url("bgacess.jpg");
	border: 1px solid black;
	padding-left: 3px;
}

div.menuacess img {
	border: none;
	margin: 3px 10px 0px 10px;
	float: right;
}

div.menuacess p {
	float: left;
	font-weight: bold;
	font-size: 13pt;
	margin-top: 17px;
}

Espero que agora você consigo dar conta do recado, seu CSS estava muito poluído, seu HTML tinha caracteres em desuso mas você também não referenciou nenhum DOCTYPE o que é extremamente importante. Caso você queira centrar algo utilize o seguinte CSS:

margin: 0px auto;

Acrescentei o selector reset para colocar todos os valores do margin e padding nulos.

Qualquer duvida ou esclarecimento me avise. Outra coisa, alterei o directório do CSS, depois não se esqueça de alterar, foi para eu fazer teste. Agora é só estilizar :D

Cumprimentos

Dieguinn · Setembro 29, 2009

2Flex, brigadao =D

~~Voce poderia passar seu msn ?~~

Brigadao a todos ae =D

Alexandre_Cruz · Setembro 29, 2009

E como é para ficar? O da direita está apenas com o list-style-type "ativado".Estude CSS, dar as respostas para você não levará a nada.http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gifEditAgora que você postou a segunda imagem...Verifique as contas da somas das colunas, tire as bordas, isso tudo influência para que o layout quebre.
Tem alguma soma que tem que seguir ? Nao pode ultrapassar e tal...(Desculpa pelo incomodo, e pq tenho que arrumar isso ate amanha, so novato ainda no estagio hehe.)

Depende, se você limita o site a 800px, uma coluna tem 200px, o main dosite tem 400px e a outra coluna 200px, a pagina onde o layout foi montado n pode ser menor que 800px, se você adiciona uma borda ela adiciona uma contorno que ocupa 1px em cada canto do elemento, se as pixels somados forem maiores que o tamanho da pagina onde os elementos estão uma coluna vai decer. Espero que eu tenha sido bem claro ^^.

Thiago Retondar · Setembro 29, 2009

2Flex, brigadao =D

~~Voce poderia passar seu msn ?~~

Brigadao a todos ae =D

Vamos evitar ficar solucionando problemas por msn. Aliás, aqui tem mais chance de ser ajuda. ;)

O código que ele passou deu certo? Você testou?

http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

2Flex · Setembro 29, 2009

Olá,

O código não sei se deu certo, mas as duvidas se surgirem por favor diga, apenas limpei seu código amigo ;).

Força com isso e estude algum HTML e CSS.

Cumprimentos

Arquivado

Incompatibilidade Firefox x Explorer

Recommended Posts

Dieguinn 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Dee 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Aprendiz CSS 3

Compartilhar este post

Link para o post

Compartilhar em outros sites

Dieguinn 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Dee 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Thiago Retondar 18

Compartilhar este post

Link para o post

Compartilhar em outros sites

Dieguinn 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Thiago Retondar 18

Compartilhar este post

Link para o post

Compartilhar em outros sites

Dieguinn 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Thiago Retondar 18

Compartilhar este post

Link para o post

Compartilhar em outros sites

Dieguinn 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Thiago Retondar 18

Compartilhar este post

Link para o post

Compartilhar em outros sites

Dieguinn 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

2Flex 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

Dieguinn 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Alexandre_Cruz 4

Compartilhar este post

Link para o post

Compartilhar em outros sites

Thiago Retondar 18

Compartilhar este post

Link para o post

Compartilhar em outros sites

2Flex 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

Estou criando uma calculadora de m2 e litros de tinta

Cruzamento de Bases

Consulta sem duplicação

Fóruns

Tempo Real