Firefox imperfeito internet explorer perfeito

Cristiano Acosta · Março 31, 2009

Galera !

Estou desenvolvendo um site basico no Dreamweaver CS4, mas tenho problemas muito graves o codigo html é esse:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- TemplateBeginEditable name="doctitle" -->
<title>Untitled Document</title>
<!-- TemplateEndEditable -->
<link href="../estrutura.css" rel="stylesheet" type="text/css" />
<script src="../Scripts/swfobject_modified.js" type="text/javascript"></script>
<script src="../SpryAssets/SpryDOMUtils.js" type="text/javascript"></script>
<script src="../modelo_geral.js" type="text/javascript"></script>
<!-- TemplateBeginEditable name="head" -->
<!-- TemplateEndEditable -->
</head>
<body>
<div id="total">
  <div id="topo">
	<object id="FlashID" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="800" height="215">
	  <param name="movie" value="../MidaSiteHome.swf" />
	  <param name="quality" value="high" />
	  <param name="wmode" value="opaque" />
	  <param name="swfversion" value="8.0.35.0" />
	  <!-- This param tag prompts users with Flash Player 6.0 r65 and higher to download the latest version of Flash Player. Delete it if you don’t want users to see the prompt. -->
	  <param name="expressinstall" value="file:///C|/Documents and Settings/Teresinha/Meus documentos/teste2/Scripts/expressInstall.swf" />
	  <!-- Next object tag is for non-IE browsers. So hide it from IE using IECC. -->
	  <!--[if !IE]>-->
	  <object type="application/x-shockwave-flash" data="../MidaSiteHome.swf" width="800" height="215">
		<!--<![endif]-->
		<param name="quality" value="high" />
		<param name="wmode" value="opaque" />
		<param name="swfversion" value="8.0.35.0" />
		<param name="expressinstall" value="file:///C|/Documents and Settings/Teresinha/Meus documentos/teste2/Scripts/expressInstall.swf" />
		<!-- The browser displays the following alternative content for users with Flash Player 6.0 and older. -->
		<div>
		  <h4>Content on this page requires a newer version of Adobe Flash Player.</h4>
		  <p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" /></a></p>
		</div>
		<!--[if !IE]>-->
	  </object>
	  <!--<![endif]-->
	</object>
  </div>
  <div id="conteudo">
	<div id="menucima">
	  <ul>
		<li id="nav"><a href="#">Cirurgia Plástica</a>
		  <ul>
			<li><a href="#">Lipoaspiração</a></li>
			<li><a href="#">Lipoescultura</a></li>
			<li><a href="#">Abdominoplastia</a></li>
			<li><a href="#">Mamoplastia</a></li>
			<li><a href="#">Face</a></li>
			<li><a href="#">Linoplastia</a></li>
		  </ul>
		</li>
		<li id="nav"><a href="#" >Doenças Crônicas</a>
		  <ul>
			<li><a href="#">Obesidade</a></li>
			<li><a href="#">Hipertenção</a></li>
			<li><a href="#">Colesterol</a></li>
			<li><a href="#">Diabetes</a></li>
		  </ul>
		</li>
		<li id="nav"><a href="#">Obstetrícia</a></li>
		<li id="nav"><a href="#">3ª Idade</a></li>
	  </ul>
	</div>
	<!-- TemplateBeginEditable name="principal" -->
	<div id="principal"></div>
	<!-- TemplateEndEditable -->
	<div id="menubaixo">
	  <ul>
		<li id="nav"><a href="nos.html">Quem Somos</a></li>
		<li id="nav"><a href="trabalhe.html">Trabalhe na Mida</a></li>
		<li id="nav"><a href="contato.html">Contato</a></li>
		<li id="nav"><a href="localizacao.html">Localização</a></li>
		<li id="nav"><a href="ouvidoria.html">Ouvidoria</a></li>
	  </ul>
	</div>
  </div>
  <div id="rodape">Alameda Coelho Neto, 40, sala 202, Boa Vista, Porto Alegre 0800 643.1530 ou (51) 3491.5437 mida@mida.srv.br</div>
</div>
</body>
</html>

E o código CSS é esse:

@charset "utf-8";
/* CSS Document */
html, body , h1, h2, h3, h4, h5, img {
	margin: 0;
	padding: 0;
	border: 0;
}
h1 {
	font:Verdana, Geneva, sans-serif;
	font-size:16px;
	color:#666;
	font-weight:bold;
}
h1:hover {
	color:#333;
}
p {
	font-size:13px;
	color:#666;
	font-family: Verdana, Geneva, sans-serif;
	line-height:90%;
	text-align: justify;
	padding:3px;
}
html, body {
	height:100%;
}
html, #tudo {
	height:100%; /* hack para IE6 hq trata height como min-height */

}
/* Estrutura */
#total {
	background-color: #FFF;
	min-height:100%;
	width: 800px;
	margin-right: auto;
	margin-left: auto;
	top: 3px;
	position: relative;
}
#conteudo {
	padding-bottom: 30px;
}
/* Topo */
#topo {
	height: 215px;
	width: 800px;
}
/* Menu */
#menucima {
	position:absolute;
	top:216px;
	float:left;
	height: 30px;
}
#menubaixo {
	position:absolute;
	bottom: 45px;
}
/* Area de login */
#login {
	position:absolute;
	top:216px;
	float:right;
}
/* Principal */
#principal {
	padding-bottom:40px;
	width: 800px;
	padding-top: 30px;
}
/* Rodape */
#rodape {
	height: 30px;
	width: 800px;
	font-weight:bolder;
	text-align:center;
	font-size: 10px;
	line-height: 30px;
	background-color: #60C;
	position:absolute;
	bottom:0;
}
#nav {
	display:inline-block;
	width:130px;
	height:30px;
	float:left;
}
/* Removeremos as marcas (bullets) e a indentação próprias das listas não ordenadas e definiremos uma largura para os itens do menu.*/
ul {
	margin: 0;
	padding: 0;
	display:inline;
	list-style:none;
	width: 150px;
}
/* A seguir precisamos posicionar os itens da lista. Felizmente os itens são renderizados um embaixo do outro, por padrão, que é justamente o que nós queremos. Contudo vamos definir o posicionamento com o valor relative, porque iremos posicionar os sub-menus de modo absoluto em relação a eles, itens.*/
ul li {
	position: relative;
}
/*Próximo passo, são os sub-menus. Queremos cada sub-menu ao lado direito do seu elemento pai (item) quando passarmos o mouse sobre ele, item.*/
li ul {
	position: absolute;
	top:30px;
	display:none;
	background:#FFF;
}
/*Usando as propriedades CSS “left” e “top” posicionamos de modo absoluto cada sub-menu ao lado de seu item pai. Você deve ter notado que eu defini para a propriedade “left” o valor de 149px (1px menor que a largura dos itens do menu), isto faz com que os sub-menus transpassem o menu e em consequência não apareça uma borda dupla. (Você verá este efeito adiante.)
Também definimos display como “none,” pois não queremos os sub-menus visíveis por padrão.
Bem, agora já temos nosso framework no lugar, mas isto ainda está com um visual bem precário. Vamos estilizar nossos links.
*/
ul li a {
	display: block;
	text-decoration: none;
	color: #666;
	background: #FFF;
	padding: 5px;
}
/* Eu estilizei os links de acordo com minhas preferências pessoais, mas é claro, você pode estilizar segundo as suas necessidades. É importante definir display como “block,” para garantirmos que cada link ocupará toda a a largura definida para o item da lista.
Bem, as coisas agora parecem um pouco melhor, muito embora usuários com Internet Explorer não concordem. Lamentavelmente o IE Win interpreta as quebras de linha entre os itens de lista, como espaços vazios e assim para o IE os itens do menu não se assentam um sobre o outro. Contudo existe uma maneira de corrigir este bug do IE:
*/
/* Fix IE. Hide from IE Mac \*/
* html ul li { float: left; }
* html ul li a { height: 1%; }
/* End */
/*Podemos aplicar o Holly Hack acima, que esconde estas regras CSS de todos os browsers menos do IE Win. Perfeito. Você deve ter notado a declaração height: 1% que foi definida. Lamentavelmente (outra vez!) a propriedade float usada no hack faz aparecer outro bug no IE, que requer a declaração de um valor para height a fim de fazer os links elementos nível de bloco.
Você deve ter notado também que se faz necessário 'fechar' o menu, e isto pode ser feito adicionando-se uma borda no fim da lista. E, as regras CSS para ul são:
*/
/*Agora o pulo! Precisamos fazer 'aparecer' os sub-menus quando passamos o mouse sobre o item.*/
li:hover ul ul, li.over ul ul { 
color:#333;
display:block; 
}

li:hover ul, li li:hover ul, li.over ul, li li.over ul { 
color:#333;
display: block;
}
a:hover {
	color:#333;
	border:#CCC;
	display:block;
}
/*
“Woo hoo! Funciona!” ouço 1% de vocês exclamar. “Sinistro!”
OK, OK, droga, o IE/Win tinha que arruinar tudo e não se comportar em conformidade. O IE/Win somente suporta a pseudo classe:hover aplicada a um link — assim li:hover que faz os sub-menus aparecer, nada significa para o IE.
Um 'pouquinho' de JavaScript será necessário para trazer o IE à ação. (line wraps marked » — Ed.):
*/


startList = function() {
if (document.all&&document.getElementById) {
navRoot = document.getElementById("nav");
for (i=0; i<navRoot.childNodes.length; i++) {
node = navRoot.childNodes[i];
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" over";
  }
  node.onmouseout=function() {
  this.className=this.className.replace
	(" over", "");
   }
   }
  }
 }
}
window.onload=startList;
/*Muito grato e apreciado à Patrick Griffiths e Dan Webb, que mostraram esta dica em um artigo no , Suckerfish Dropdowns. Obrigado, rapazes!
*/
over = function() {
	var sfEls = document.getElementById("nav").
	
getElementsByTagName("LI");
	for (var i=0; i<sfEls.length; i++) {
		sfEls[i].onmouseover=function() {
			this.className+=" over";
		}
		sfEls[i].onmouseout=function() {
			this.className=this.className.
replace(new RegExp(" over\\b"), "");
		}
	}
}
if (window.attachEvent) window.attachEvent("onload", over);

li:hover ul, li.over ul { 
	display: block;
}

Esse são os codigos do templete, mas o problema é na pagina de conteudo que estou criando:

na area de edição proncipal eu acresentei:

<style type="text/css">
#caixa {
	width:350px;
	padding-bottom:10px;
	padding-top: 10px;
	height: 300px;
	margin: 7px;
	padding-right: 5px;
	padding-left: 5px;
}
#titulo {
	padding-bottom:5px;
	padding-top: 5px;
}
#texto {
	float: right;
	padding: 3px;
	margin: 1px;
	overflow: auto;
}
#foto {
	padding:1px;
	float: left;
}
#rolagem {
	width:700px;
	padding-bottom:10px;
	padding-top: 10px;
	height: 150px;
	margin: 7px;
	padding-right: 5px;
	padding-left: 5px;
}
#caixa2 {
	width:200px;
	height:120px;
	padding-bottom:10px;
	padding-top: 10px;
	margin: 7px;
	padding-right: 5px;
	padding-left: 5px;
}
</style>

como css exclusivo para a pagina e

<div id="principal">
	  <div id="caixa">
		<div id="titulo" align="center">
		  <h1>Acompanhamento aos Casais Gestantes</h1>
		</div>
		<div id="foto"><img src="" alt="Gestantes" name="foto" width="100" height="100" id="foto" /></div>
		<div id="texto">
		  <p>Está grávida ou pensando em ter um bebe? Uma gestação saudável contribui para o sucesso do futuro do seu filho. A MIDA, junto ao seu obstetrá, proporcionará vocês, casaislnknknkjnknkiççljllkj</p>
		</div>
	  </div>
	  <div id="rolagem" align="center">
		<div id="caixa2">
		  <div id="titulo">
			<!--Aqui titulo noticias-->
		  </div>
		  <div id="texto">
			<!--Aqui texto de noticias-->
		  </div>
		</div>
	  </div>
	</div>

O que não deixa com a aparencia correta no Firefox, a div#foto não vai para esquerda ao lado da div#texto como deveria... seria que tipo de erro???

Me mandem um help por msn ou e-mail: e-mail

Giovani · Março 31, 2009

Você não tem um link?

Fica bem mais fácil para visualizar o possível erro. http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

Cristiano Acosta · Abril 1, 2009

Você não tem um link?

Fica bem mais fácil para visualizar o possível erro. http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

Tenho urgencia em resolver essa dor de cabeça...

http://br.geocities.com/acosta.cristiano/

Cristiano Acosta · Abril 1, 2009

Como podem ver tem muitos erros que não faço ideia do porque existem e queria uma explicação detalhada dos erros que cometi...

os Menu de cima tem que aparecer por cima do conteudo e não aparece, o conteudo no firefox fica fora de alinhamento colocando o texto abaixo da foto, sendo que eles devem ficar ao lado de um e outro...

a.... socorro!!!!

Estou atrasado com esse projeto!!!!!!!!

Bem ai esta o link e meu msn é esse siemai@hotmail.com qualquer coisa me manda um help por ele

alebae · Abril 1, 2009

Tanto no IE quanto no Firefox ocorrem problemas de desalinhamento...

Perceba que parte do seu CSS, contém:

position: absolute;

Acredito que a chave do problema reside aí...como a posição é variável...desalinha conforme a resolução e o navegador...

A solução retirar essa position bem como as "variantes" dela (top, right, left, bottom, etc...) e ir alinhando o site através das propriedades margin, padding, float e display http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

Edultra · Abril 1, 2009

Acredito que terá que utilizar um hack para o IE utilizando um código CSS especifico para o IE e outro para o FF e demais browsers, existem N's incompatibilidades entre seguir ou não os padrões (IE não segue FF segue).

Cristiano Acosta · Abril 2, 2009

Galera esta valendo as dicas, dexei melhor o codigo, mas tenho ainda um problema:

Olhe as imagens:

No firefox

Imagem Postada

No Internet:

Imagem Postada

Como podem ver existe esse problema no firefox que quero corrigir...

Cristiano Acosta · Abril 3, 2009

nossa ninguem até agora para me ajudar....

socorro gente... me adicione no msn, quero arrumar todos esses defeitos....

Arquivado

Firefox imperfeito internet explorer perfeito

Recommended Posts

Cristiano Acosta 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Giovani 104

Compartilhar este post

Link para o post

Compartilhar em outros sites

Cristiano Acosta 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Cristiano Acosta 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

alebae 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Edultra 13

Compartilhar este post

Link para o post

Compartilhar em outros sites

Cristiano Acosta 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Cristiano Acosta 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

JAVA - Ajuda em Paginação

Alteracao Tema Wordpress Profolio

Alteracao Tema Wordpress Profolio

Fóruns

Tempo Real

Informação importante