Ir para conteúdo

POWERED BY:

Arquivado

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

esgoncalves

Problemas com divs no firefox...

Por , em Desenvolvimento frontend

Recommended Posts

esgoncalves    0

esgoncalves
Postado

Bom vamos lá...

 

Camaradas, sou novo pelo fórum... Estou tendo problemas com divs no FF e no Opera... Já no IE funciona muito bem... Gostaria de saber se podem me ajudar... Segue anexo screenshots dos navegadores, bem como o código da index e do CSS... Para quem quiser ver: http://www.eduardogoncalves.net

 

Aguardo resposta...

 

Att...

 

Eduardo Gonçalves

 

index.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html lang="pt-br">

	<head>
		<title>*** Eduardo Gonçalves ** Desenvolvimento de Sistemas Web ***</title>		
		<META http-equiv="Content-Type" content="text/html; charset=iso-8859-1" >
		<META name="keywords" content="gravataí, web, php, rs, brasil, mysql, ajax, web standards, javascript" >
		<META name="description" content="Página Pessoal para Divulgação de Portfólio de Desenvolvimento de Web Sites" >		
		<META name="author" content="Eduardo Gonçalves" >
		<META name="language" content="pt-br" >
		<META http-equiv="content-language" content="pt-br">
		<META name="robots" content="index,follow">
		<META name="reply-to" content="dudu@eduardogoncalves.net">
		<META name="generator" content="Dreamweaver CS3">
		<META http-equiv="cache-control"   content="no-cache" >
		<META http-equiv="pragma" content="no-cache" >

		<link href="scripts/rounded_corners.css" rel="stylesheet" type="text/css" >
		
		<!--[if IE]><link href="scripts/estilo-ie.css" rel="stylesheet" type="text/css" ><![endif]-->
		
		<script type="text/javascript" src="scripts/lib/MochiKit/MochiKit.js"></script>
		<script type="text/javascript" src="scripts/rounded_corners.js"></script>
		<script type="text/javascript" src="scripts/SpryData.js"></script> 
		<script type="text/javascript" src="scripts/XHConn.js"></script> 
		
		
		
		<script type="text/javascript">
			function enviaForm () {
				/*aqui eu chamo a  a class*/
				var myConn = new XHConn(); 
				
				/*pego o id do campo  */
				var poststr = "nome=" + encodeURI( document.getElementById("nome").value ) +"&email=" + encodeURI( document.getElementById("email").value ) +"&msg=" + encodeURI( document.getElementById("msg").value )+"&codigoimg=" + encodeURI( document.getElementById("codigoimg").value ); 
				
				/* Um alerta informando da não inclusão da biblioteca */
				if (!myConn) alert("XMLHTTP not available. Try a newer/better browser."); 
				
				/*aqui é onde vai mostrar atualizando quando eu for enviar os dados */
				document.getElementById('retorno').innerHTML = "<img src='images/ajax-loader.gif' />"; 
				
				/* o result do post */
				var inclusao = function (oXML) { 
					document.getElementById('retorno').innerHTML = oXML.responseText; 
				}; 
				
				/*aqui é enviado mesmo para pagina receber methodo post,+ as variaveis, valorese informar onde vai atualizar */
				myConn.connect("envia.php", "POST", poststr, inclusao); 
				
				/*uma coisa legal nesse script se o usuario não tive suporte a JavaScriptpor isso eu coloquei return false no form o php enviar sozinho  */
			}
		</script>
		
	</head>

	<body onload="Spry.Utils.updateContent('meio','home.php');" background="images/stripe.png">
		<div align="center">
			<!-- DIV TUDO -->
			  <div id="tudo" class="tudo">
			
				<!-- DIV TOPO -->
				<div id="topo" class="topo">
					<img src="images/cabecalho.png" width="485" height="90" alt="EduardoGoncalves.net" >				</div>		
				
			<!-- DIV ESQUERDA -->	  
				<div id="esquerda" class="esquerda">
					<p class="menu">
						<br>
						<br>				  
						  
						<div align="center" style="background:url(images/branco.png) no-repeat; width:100px; height:35px; margin-left:16px; padding-top:6px;">
							<a href="#" onclick="Spry.Utils.updateContent('meio','home.php');" id="home">
							<font color="#FFFFFF" face="Verdana, Arial, Helvetica, sans-serif" size="4"><b>Home</b></font>
							</a>
						</div>
											  
						  
						<div align="center" style="background:url(images/branco.png) no-repeat; width:100px; height:35px; margin-left:16px; padding-top:6px;">
						<a href="#" onclick="Spry.Utils.updateContent('meio','portfolio.php');" id="portfolio">
						<font color="#FFFFFF" face="Verdana, Arial, Helvetica, sans-serif" size="4"><b>Portfólio</b></font>
							</a>
						</div>
											  
						  
						<div align="center" style="background:url(images/branco.png) no-repeat; width:100px; height:35px; margin-left:16px; padding-top:6px;">
						<a href="#" onclick="Spry.Utils.updateContent('meio','formulario.php');" id="contatos">
						<font color="#FFFFFF" face="Verdana, Arial, Helvetica, sans-serif" size="4"><b>Contatos</b></font>
							</a>
						</div>
											  
						  
						<div align="center" style="background:url(images/branco.png) no-repeat; width:100px; height:35px; margin-left:16px; padding-top:6px;">
						<a href="#" onclick="Spry.Utils.updateContent('meio','diversos.html');" id="diversos">
						<font color="#FFFFFF" face="Verdana, Arial, Helvetica, sans-serif" size="4"><b>Diversos</b></font>
							</a>
						</div>
				   </p>
					   <br>
						
						<!-- Validação HTML W3C -->
						<p align="center">
							<a href="http://validator.w3.org/check?uri=referer">
							<img src="http://www.w3.org/Icons/valid-html401" alt="Valid HTML 4.01 Transitional" width="88" height="31" border="0">							</a>						</p>

						<!-- Validação CSS W3C -->
						<p align="center">
							<a href="http://jigsaw.w3.org/css-validator/">
							<img src="http://jigsaw.w3.org/css-validator/images/vcss" alt="Valid CSS!" border="0" style="border:0;width:88px;height:31px" />						  </a>						</p>

						<!-- Validação Web 2.0 -->
						<a href=http://www.certifyr.com/compliance.cfm?website=http://www.eduardogoncalves.net&checksum=5&refer><img border=0 src="http://www.certifyr.com/web20button.gif" align="middle"></a>
						
					  <br />
					<br />
			  </div><!-- FECHA DIV ESQUERDA -->
				
			<!-- DIV PRINCIPAL -->
				<div class="meio" id="meio"></div><!-- FECHA DIV PRINCIPAL -->
				
				<!-- DIV DIREITA -->
				<div class="direita" id="direita" align="right">
					<br /><br />
				  <p><a href="http://br.php.net/" target="_blank">PHP - Brasil</a>
					  <br />
					  <a href="http://www.mysqlbrasil.com.br/" target="_blank">MySQL - Brasil</a>
					  <br />
					  <a href="http://www.google.com.br/" target="_blank">Google Brasil</a>
					  <br />
					  <a href="http://www.w3c.org/" target="_blank" title="W3C - World Wide Web Consortium">W3C</a>
					  <br />
					  <a href="http://www.softwarelivre.org/" target="_blank" title="PSL - Projeto Software Livre Brasil">PSL</a>
					  <br />
					  <a href="http://www.tableless.com.br/" target="_blank" title="Padrões Web com Mandioca e Strogonoff">Tableless - Web Standards</a>
					  <br />
					  <a href="http://www.maujor.com/" target="_blank" title="Site sobre CSS e Web Standards">Maujor - CSS e Web Standards</a>
					  <br />
					  <a href="http://www.imasters.com.br/" target="_blank" title="Maior banco de dados em conteúdo técnico de TI no Brasil">iMasters</a>
					  <br />
				  <a href="http://revolucao.etc.br/" target="_blank" title="Web Standards em uma Casca de Noz">Revolução Etc</a></p>
				  <!-- Inicio Banner Tempo Agora - [url="http://www.tempoagora.com.br"]http://www.tempoagora.com.br[/url] -->
				  <iframe 
						  src="http://www.tempoagora.com.br/selos/custom/selo.php?cid=Gravatai-RS" 
						name="seloGravatai-RS" 
						width="120" 
						marginwidth="0" 
						height="125" 
						marginheight="0" 
						scrolling="No" 
						frameborder="0" 
						id="seloGravatai-RS">				  </iframe>
				  <!--Fim Banner Tempo Agora - [url="http://www.tempoagora.com.br"]http://www.tempoagora.com.br[/url] -->
			  </div><!-- FECHA DIV DIREITA -->
				
			<!-- DIV RODAPÉ-->
				<div class="rodape" id="rodape">
					<br /><br /><br /><br />
					<p>
						COPYRIGHT © 2007 <a href="http://www.eduardogoncalves.net/" target="_blank" class="links"><b>Eduardo Gonçalves</b></a>  (51) 9922-9908 Todos os direitos reservados     <img src="images/button-imweb20.gif" >					</p>
				</div><!-- FECHA DIV RODAPE -->
		  </div> <!-- FECHA DIV MEIO -->
			
	</div><!-- FECHA DIV ALIGN CENTER -->
		
	</body>
</html>

 

rounded_corners.css

.invisible { display: none; }

.tudo	{
	background:#ffffff;
	color:#000000;
	text-align:center;
	width:700px;
	height:auto;
	position:relative;
	display:table;
}

.topo	{
	width:auto;
	height:auto;
	color:#000000;
	text-align:center;
	position:relative;
	display:table;
}

.esquerda	{
	position:relative;
	width:140px;
	top:105px;
	left:0px;
	color:#000000;
	padding-bottom:20px;
	display:table;
}

.direita	{
	position:relative;
	width:140px;
	top:105px;
	right:148px;
	color:#000000;
	padding-bottom:20px;
	left: 555px;
	display:table;
}

.meio	{
	color:#000000;
	padding:2px 10px;
	text-align:justify;
	margin-left:140px;
	margin-right:140px;
	display:table;
}

body	{
	
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:12px;
}
.lables {
	text-align: center;
	font-weight: bold;
	font-size: 14px;
}

.lista	{
	list-style:none;
}

.links, a:link, a:visited, a:active	{
	text-decoration:none;
	color:#0000CC;
}
div#direita a:hover {
	font-size: 14px;
	font-weight: bold;
	color:#0099FF;
	text-decoration: none;
}

.rodape	{
	font-size:9px;
	text-decoration:none;
	position:relative;
	display:table;
}

.menu	{
	text-align:left;
}.fds {
	width: 400px;
	border: 1px solid;
	border-style: dotted;
	border-color: #000000;
}

.submitbutton	{
	background-image:url(images/btn.png);
	background-repeat:no-repeat;
	color:#000000;
	width:94px;
	height:32px;
}

.listas	{
	list-style:url(../images/arrow.gif);
}

.mostra	{
	border:1px #000000 dashed;
	width:auto;
	height:auto;
}
a:hover {
	font-size: 14px;
	font-weight: bold;
	color:#0099FF;
	text-decoration: none;
}

Internet Explorer

Imagem Postada

 

Firefox e Opera

Imagem Postada

Compartilhar este post

Link para o post
Compartilhar em outros sites

brcontainer    16

brcontainer
Postado

Parece que isso é um BUG do FF

acontece isso por causa do display:table;

faça assim(elemento fantasma hehehe):

#div_que_precisa_do_display_table:after {
content:"-";
display:block;
clear:both;
visibility:hidden;
}
ps.: E lembre-se remova o display:table;

 

 

eu tambem tive esse problema infelizmente =/

mas consegui resolver com isso:

height:auto min-height e float, sem display:table;

 

somente com o link o meu problema foi totalmente resolvido, mas talvez o "DIV fantasma"(usa after) ja lhe ajude

 

;)

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